Website v5.0
Recently, I decided to add a blog to my website. I wanted something simple and straightforward to set up.
So of course I went the opposite route.
It was time to move on to a static site generator (SSG).
I’d first come across the concept of SSGs a few years ago when my website was a one-pager and didn’t require anything beyond simple HTML and CSS. Over the years, I added a few more pages to the website yet stuck to the original code foundation. But when I felt that familiar itch to start blogging, I knew that it was time to seriously consider SSGs.
The reaction I got from everyone who heard about my new project was unanimous confusion.
But... why? Why not just use WordPress or something, like a rational person?
Well. Yes. That would probably have been the sensible thing to do. But something about installing a CMS, faffing with its themes and shoehorning my code into its templates felt like shoving a square peg in a round hole.
More importantly, there’s much to like about an SSG:
- The elegance of not writing repetitive code and not making users process what they don’t need was immensely appealing. Sustainable code. 💚
- Not having to use a database
- Speedy page loads
- You can use a static web-hosting service like Netlify or GitHub Pages to host your site free of cost
I decided to use Eleventy, a popular SSG that’s based on JavaScript, because of the range of templating languages it allows you to use in a single project. Liquid? Sure. Nunjucks? Yup. JavaScript? Why not. HTML? Go for it. Markdown? The world is your oyster. (In fact, I’ve used nearly all of those to build this site depending on what I felt most comfortable manipulating at different points.)
With that in mind I set out to look for online resources to learn how to make the most of Eleventy and landed on this super friendly Eleventy From Scratch course by Andy Bell. It shows you clear step by clear step how to get a beautifully designed CMS-less blog up and running using Eleventy.
The course is definitely worth it if you’re interested in serving a bloat-free experience but can't be bothered rummaging through Stack Overflow for that error you have been trying to demystify for the last three hours. All the course requires is an intermediate knowledge of—or a bit patience to learn—HTML, CSS and JavaScript. Besides, I got to do the course at a steep discount thanks to a voucher Andy had made available right on the website. Happy days!
Finally, it’s only fair that I mention other sources of inspiration too:
- Cassie Evans’ website launch, which triggered my first foray into Eleventy
- Manuel Matuzovic's article on writing accessibility-centred CSS and Matthias Ott’s article on ensuring your website remains accessible to users who rely on keyboard navigation
- Philipp Rudloff’s and Ryan Feigenbaum’s articles on creating a dark mode toggle
The result?
Goodbye, ripped-out hair. Hello, Lighthouse score. 💃
Now on to actually writing something...
Filed under: