I recently learned about Static Site Generation (SSG) via Eleventy (11ty), and wanted to use this post to talk about how it went when I tried to use it to make a blog. 11ty is a Static Site Generator that simplifies this workflow by providing tons of plugins and a clean, intuitive developer experience. As 11ty already has a basic Getting Started Guide, this is going to read more like a review than a tutorial.
In this review, we'll be talking about three Eleventy-based templates that I tried out:
- 11ty's Getting Started Guide
- 11ty's Base Blog
- Malte Ubl's Google-co-signed "Eleventy High Performance Blog"
I'll compare the three as I experienced them, and briefly comment on what it took to get them up and running.
1. 11ty: Getting Started Guide
The most basic of the three options I'll be discussing, this was was essentially a "Hello World" boilerplate of 11ty. As I knew very little about 11ty going into messing around with it, its lack of templating had me confused ~pretty~ quickly. However, I recognize that this was meant to be a clean slate for someone looking to have a no-frills experience with 11ty, and that's exactly what it was. I didn't feel like I was dealing with a bunch of unnecessary code, and it was very simple to work with once I did some googling.
As the two templates I worked with (see options 2 and 3) had a blog-like setup, I modelled this in the same way. As you can see above, I was able to pretty quickly get some HTML up with 11ty and link to some static sites written in markdown, such as a previous blog post I had created and placed in this project:
Yes, it looks like unformatted HTML--because it is. I put a markdown file in my directory, and out came a really clean HTML file in its own directory. Pretty cool.
If you'd like to see how I did this, here's the GitHub repo and the site I have my project hosted on.
2. 11ty: Base Blog
This was the first template I tried, also created by 11ty. Out of the three options I'm discussing, I liked this one the most for learning 11ty's features without feeling in over my head. I was able to quickly understand the logic behind the project's organization and how the components fit together, and the README that came with it was simple without being ambiguous.
My favorite aspect of this one is that it included a lot of stylistic touches, such as having preset CSS and out-of-the-box components like a navigation bar. It made the experience of building a blog site really fast and accessible, while giving me a hint at what was possible with 11ty. Here's the home page I was able to create within ten minutes of running npm install for the first time:
As is the case with 11ty in general, all it took was me putting some formatted markdown in a file in the directory to produce this:
If you'd like to see my attempt at this, here's the GitHub repo and the site I have my project hosted on. If the site shows the page without rendered CSS, yeah that confused me too--I've had a great time with GitHub Actions lately.
3. Malte Ubl x Google: Eleventy High Performance Blog
The third option I'll be discussing was also a template, created by Google's Malte Ubl. I stumbled across this while looking at 11ty templates, and was really impressed by how verbose this option was. Where the 11ty Base Blog provided a strong framework from which to build, this provided a fully-functioning, highly-stylized website that only needed to be filled in.
Despite this being the case, I felt this template was more advanced than needed for my intent and purpose--which was actually harmful when I went to deploy it with GitHub actions. That said, it shares a lot of the benefits of 11ty's Base Blog while also including some really cool advanced features, such as support for Google Analytics and out-of-the-box testing. Plus, the pre-loaded CSS, built-in progress bar, and automatically-estimated reading times made the site look incredibly professional from the first time I built it. I was in over my head fast, but I was learning the entire time and quickly found myself looking at a high-quality product. Here's what I came up with using this template:
And a sample post:
The one problem I ran into with this one was when it came to CI/CD. I got the project's built-in CI to work, but for the life of me couldn't get GitHub Actions to let me build this project for deployment. The project has built-in support for Netlify, I just didn't feel like venturing down that rabbit hole.
So, thank GitHub Actions for this meme.
If you'd like to see my code, here's the GitHub repo and here's where I would have put my site (ya know, if I had one).
Top comments (0)