11ty
Published: 2022-02-27 23:03:47

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/](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](https://www.11ty.dev/docs/getting-started/) 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/](https://jfz5219.github.io/11ty_hello_world/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06eodnqyj73cybj2dklh.png)
 

## **Eleventy Based Blog**
I used this [template](https://github.com/11ty/eleventy-base-blog) 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.**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4budd48o58ybbyo47cj.png)

## **Hax11ty Website**
This one was fairly easy, all I had to do was use this [template](https://github.com/elmsln/hax11ty), 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/](https://jfz5219.github.io/hax_11ty/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iskyimububskyoz55eur.png)
 

## **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](https://www.youtube.com/watch?v=R8_veQiYBjI)

## **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.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndo74dv4tb52jplz5r2k.png)

## Links to Repos
[Hello World Blog](https://github.com/jfz5219/11ty_hello_world)
[Eleventy Based Blog](https://github.com/jfz5219/eleventy-base-blog)
[Hax11ty](https://github.com/jfz5219/hax_11ty)