Make your Archivator archive a static site

This is an example of how you could list sites you want to archive and describe how you want them to look locally leveraging renoirb/archivator .

Use

Archive pages only

If you already have Node.js v10+ installed already with npx, you can do the following

1. Create an empty folder, with a archive/ directory folder into it

   mkdir -p archivator-demo/archive

2. Add at least one recipe into archive/index.csv

   echo 'https://renoirboulanger.com/blog/2015/05/converting-dynamic-site-static-copy/;article;' > archivator-demo/archive/index.csv

3. From the folder where the archive/ folder exists (i.e. where you'd put your site, package.json, etc.), run archivator using npx

   cd archivator-demo
   npx archivator@^1.0.2

4. Have a look at all the directories created and copies of the pages

   

As a project to make archived content be presented in static-site generator

1. Clone this repo, or fork it

   git clone https://github.com/renoirb/archivator-demo.git cookbook
   cd cookbook
   yarn

2. Add an URL to a recipe you like to archive/index.csv

   Files goes as the following: <URL>;<CSS selector of the main section of interest>;<CSS selectors of things you do not want>

   https://www.finecooking.com/recipe/hot-garlicky-shrimp-with-asparagus-lemon;div.recipe__wrap;.recipe__top__content--secondary
   

3. Archive the recipes

   Which should write a copy of the page in archive/finecooking.com/recipe/hot-garlicky-shrimp-with-asparagus/, copy all images to it, and create a simplified version index.md in Markdown format.

   yarn archive

4. Make the archived URLs into HTML

   You can give it the look you want by changing layouts/default.hbs. It's just a rough starting point. Take a look at the awesome Metalsmith project.

   yarn build

   Which will read all archive/**/index.md into respective dist/**/index.html

5. Consult them or expose them on the Web. They're in dist/

   So, now you have your own web cookbook locally.

   

6. If you use GitHub pages (see Using GitHub pages and Jekyll below), see renoirb.github.io/archive/finecooking.com/recipe/hot-garlicky-shrimp-with-asparagus/

Using GitHub pages and Jekyll

1. Reproduce _config.yml

2. Commit files from archive/<Normalized URL as a path>/index.md

3. See the following copy;

   • renoirb.github.io/archivator-demo/archive/renoirboulanger.com/blog/2015/05/converting-dynamic-site-static-copy/ (source)
   • renoirb.github.io/archive/finecooking.com/recipe/hot-garlicky-shrimp-with-asparagus/ (source)
   • renoirb.github.io/archivator-demo/archive/yupitsvegan.com/caramelized-onion-hummus (source)

4. ... you’re on your own. Ruby is hard (for a Non Ruby developer as myself). Your mileage may vary.

Next up

Since this project is just about binding Archivator and a Static HTML site.

As such, you may want to take a look at renoirb/archivator where there will be other features than exporting into Markdown and then HTML.

Other Archivator features should include indexing content to ElasticSearch.