Skip to content

Example of a self hosted recipe cookbook using https://archivator.site and GitHub pages

License

Notifications You must be signed in to change notification settings

renoirb/archivator-demo

Repository files navigation

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 npm.

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

    archive directory now has a copy of the page with its assets

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.

    Recipe available locally with images

  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;

  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.