Generate a website for viewing web archives.
- Compatible with web archives in WACZ format (WARC also supported)
- Automatic deploy to GitHub Pages
- List & autocomplete-search web archives
- Embedded web archive replay
- Load web archives from any
https://ors3://URLs. - IPFS Support Coming soon
Jump to:
In the new repository, go to "Settings" > "Pages" for the new repository and under "Source" select "GitHub Actions".
Once settings have been updated, clone your new repository as usual to your local machine.
Navigate to your project directory and run:
npm installAdd your website title and web archive URL:
{
"site": {
"title": "My Web Archives"
},
"archives": [
"https://replayweb.page/docs/assets/example.wacz",
"s3://webrecorder-builds/warcs/netpreserve-twitter.warc"
]
}See Configuration for all options.
To access your site from http://localhost:8080, run:
npm run servePush to main to automatically deploy your site to GitHub Pages. ✨
You can also opt-out of Pages to use another hosting provider. See Deployment for more information.
Configure options in wrg-config.json.
Object for configuring site details.
| Key | Default Value | Value Type | |
|---|---|---|---|
site |
{} |
Object |
|
site.title |
"Web Archives" |
string |
Website title, used in browser title bar and as the primary heading |
site.logoSrc |
"" |
string |
Website logo, any valid <img> src |
Object for configuring the embedded ReplayWeb.page <replay-web-page> tag.
<replay-web-page> tag.| Key | Default Value | Value Type | |
|---|---|---|---|
replay |
{} |
Object |
|
replay.embed |
"replayonly" |
"replayonly"|"full"|"default" |
ReplayWeb.page embed option |
replay.replayBase |
"./replay/" |
"./replay/"|string" |
ReplayWeb.page replayBase option |
Configure location of web archive files.
| Key | Default Value | Value Type |
|---|---|---|
archives |
[] |
undefined|string[]|{name:string;url:string}[] |
Option values can be a JSON array of plain URL strings or an object with name and url
Example:
{
"archives": [
// Plain URL string:
"https://replayweb.page/docs/assets/example.wacz"
// Plain URL string to S3 bucket
"s3://my-bucket/a/archive.wacz",
// Plain URL string to a file relative to output `_site`
"./public-data/",
// Object with name and URL:
{
"name": "My Web Archive",
"url": "s3://my-bucket/b/archive.wacz"
}
]
}Setting archivesPath will override this option.
The following options can only be set at build-time (i.e. when you run npm run build.) Updates to options in your output _site/wrg-config.json file will have no effect.
Base URL for ReplayWeb.page scripts.
| Key | Default Value | Value Type | |
|---|---|---|---|
replayBaseURL |
"https://cdn.jsdelivr.net/npm/replaywebpage" |
string |
Base URL for ReplayWeb.page scripts |
Path to local web archive files.
| Key | Default Value | Value Type |
|---|---|---|
archivesPath |
undefined |
string |
Paths should be relative to your project root (i.e. where you execute npm run build.) Option values can be:
- Relative path to directory containing
.waczfiles - Relative path to
.txtfile with newline-separated list of remote URLs - Relative path to JSON file with an
archiveskey where the value is a JSON array
Examples:
{
"archivesPath": "./wacz-files/"
}{
"archivesPath": "./source_data/archives.json"
}Take precedence over the archives array.
By default, Web Replay Gen will deploy to Pages on every push to the main branch, as configured in this GitHub Workflow. To change the deployment workflow (e.g. to change the release branch) update the publish-gh-pages.yml workflow file.
Due to GitHub's file size limit and lack of support for git LFS in Pages, you may run into an issue with deploying large web archive files. To resolve the issue, you can create a separate workflow for uploading web archive files elsewhere (e.g. to an S3 bucket) and configure your site with the remote URLs. Alternatively, you can self-host.
To prevent deployment to Pages, either disable the workflow through the GitHub UI or simply delete the workflow file (publish-gh-pages.yml.)
First, remove the Pages workflow. Run the build script to output your site into a local directory:
npm run build
This will output a production-ready build to /_site. Transfer the contents of /_site to your host.
Run the dev server with npm run serve to serve files from /_site.
Saving changes to src will automatically reload the page. See 11ty Browsersync docs to customize the dev server.
Create and configure options in wrg-config.local.json to specify different site options during local development.
To use wrg-local.local.json, run the following:
echo 'WRG_CONFIG_NAME=wrg-config.local.json' > .env
To disable, comment out the line in .env:
# WRG_CONFIG_NAME=wrg-config.local.json
Web Replay Gen templates are written in Nunjucks. You are free to use any templating language Eleventy supports, like plain HTML, markdown, or ejs.
JS files in /js will be copied as-is to _site. To include JS files in templates, import as ES modules and use module-shim. For example, to render a Web Component called my-component:
<!-- my-template.njk -->
<my-component></my-component>
<script type="module-shim">
import('./js/my-component.js');
</script>TailwindCSS is enabled in all Eleventy template files. You can install a specific Tailwind version with npm install -D tailwindcss@{version}.
Note: Tailwind is not available in web components (/components/*.js) due to limitations with the shadow DOM. See workarounds if you'd like to access Tailwind classes in web components.
Tailwind supports inline-style-like customization through arbitrary values in class names. For a more global approach to customization (for example, if you have vendor CSS file) include a <link rel="stylesheet"> tag in your template file. Any .css files in /src will be copied to the output site folder and can be referenced in the <link> tag.