This project is a recipe book created using Eleventy to generate a static site for personal cooking from Markdown files and basic CSS. It was also an opportunity to work with GitHub actions to manage the deployment to GitHub pages.
The websites intentionally simplistic design allows me to quickly upload recipes as markdown files which are generated into HTML files using eleventy. The recipes are variations of recipes from advert-riddled websites and/or social media videos.
To use GitHub pages, a deploy key and a secret are required, they can be generated using ssh-keygen. For a full breakdown of how to create the public and private keys see here. For a step by step guide on how to create an Eleventy website using GitHub pages see here.
Below is the folder structure explained for future reference.
This folder includes the layouts such as the base.html file for all webpages to inherit. At the moment, 2 other layouts exist one for 'home.html', which bullet points all the available receipes, and a second for 'recipe.html' which all the recipes use as a template.
The 'CSS' folder is stored here and is added as a passthrough/watchtarget in the .eleventy.js file.
The 'mains' folder contains the markdown files for all the main recipes which are then transformed into html files by Eleventy. The 'desserts' folder contains the markdown files for the dessert recipes which are then transformed into html files by Eleventy. Now the website is up and running, this should be the only folder that will be regularly edited.
Finally, the 'index.md' is also included in 'src', this file is the home page of the static website.
This file is really important, it tells eleventy that it can use nunjucks to
build HTML websites, nunjucks is the {{ title }} syntax seen inside the markdown
files. It also tells eleventy which folders to include; in my case I'm including
the CSS in the passthrough so the website can use it. Finally, it tells eleventy
which folder to output the webpages into and where to find them. In my case my
content is in src and I output to docs.
GitHub pages attempts to use Jekyll to build a static website, this empty file tells GitHub not to use Jekyll.
This folder contains the 'workflows' folder which contains the 'elementy_build.yml' file. This is the deployment method that's used by GitHub actions. It tells GitHub that any time a change occurs to the 'main' branch, to rebuild the website and deploy it.
package-lock.json is a file that is automatically generated by npm when a package is installed.
package.json files contain descriptive and functional metadata about a project, such as a name, version, and dependencies. Here we can also include 'scripts' that are actioned. For example, there's one for 'npm start' which will sever the eleventy webpage.
When the '.github/workflows/eleventy_build.yml' file is actioned by a change to the 'main' branch, the output will be a new branch called gh-pages. This is the current deployment of the website.
To install eleventy head over to the docs.
Once insatlled, to run the website run the following command from the root file.
npx @11ty/eleventy --serve
or because of the script we created in package.json
npm start