First, try to get an understanding of what a static site generator is. This might be different from what your used to, so it helps to understand why you would want to get your hands on with this approach
Here is a website to learn more about static site generators.
Link: https://www.netlify.com/blog/2020/04/14/what-is-a-static-site-generator-and-3-ways-to-find-the-best-one/
To start, I tried creating three types of 11ty based websites.
Hello World Website
I made a repo on git hub named 11ty-hello-world and cloned it. I changed my directory to 11ty-hello-world and followed this 11ty documentation to get started. I added text to the README.md file where 11ty would compile these changes and update them on the index.html file.
Link to website: https://jfz5219.github.io/11ty_hello_world/
Eleventy Based Blog
I used this template to set up the second 11ty website. At this point, I was able to better understand the structure of 11ty. I tried adding an additional navigation tab called "Practice Tagging". This was all done under the practice.md file that I created. I just had to add these headings on top of the code.
---
layout: layouts/post.njk
title: "Practice"
templateClass: tmpl-post
eleventyNavigation:
key: Practice Tagging
order: 4
---
No website, will explain later.
Hax11ty Website
This one was fairly easy, all I had to do was use this template, clone it, yarn install, and yarn start. Originally, npm was used, but I ran into some problems, so yarn is used instead.
Link to website: https://jfz5219.github.io/hax_11ty/
Compare 11ty to HAX11ty
The first thing I noticed was how easy it was to get started with HAX11ty. There was no need physically install eleventy. I am pretty sure this step is automated in the code. Where as setting up an 11ty website required a bit more steps even though it wasn't difficult to understand. Personally, I thought structure of 11ty was easier to understand and it's because the website is simpler compared to HAX11ty. The UI of HAX11ty looks more user-friendly, but the 11ty-based-blog can probably be changed with more add-ons.
CI/CD Pipeline
Here is a great video explaining why you would use GitHub workflow and how to get started with it.
Link
No Link to Eleventy Based Blog!?
I was able to successfully set my workflow. However, when time came to build and run the code, I got an error. I believe GitHub was trying to use the Liquid language to process Nunjucks code. I had no clue on how to fix this, so that's why my GitHub page was not working.
Top comments (0)