New Blog
EleventyBackground #
Once every couple of years, I get the urge to start blogging again. Before I can begin writing, I need to figure out what blogging software the cool kids are using these days. This usually means that I spend several days figuring out how to blog, writing one blog post, then never blogging again for another couple of years, and then repeat.
I am always excited to start blogging. I like to learn and teach. I feel like a blog is a good way of doing both. I am not a very good writer. I want to get better. I see blogging as a way of practicing my writing skills.
So... Which static site generator should I use? #
Part of the ritual of starting a new blog is figuring out what blogging software to use. In this attempt to start a blog, I looked into many static site generators to find the one that seemed like the best fit for me. I came across Jekyll vs Hugo vs Gatsby vs Next vs Zola vs Eleventy. I felt like this article was a good overview of some of the current popular options.
I ultimately chose 11ty after strongly considering Zola. The decision, for me, basically came down to the toolchain. During the normal course of my workday, I am work with Javascript ecosystem. Eleventy is built on the Javascript ecosystem, so I thought using 11ty would be easier for me. I guess only time will tell.
Setup #
I chose not to start from scratch using the documentation for 11ty. I started from eleventy-base-blog. eleventy-base-blog is an example personal blog project that has sane defaults. Following the README, I was able to get a skeleton of the new blog up and running in minutes.
I ported over an old blog post I had, and everything just worked, mostly. I ran into one issue with syntax highlighting. Or at least I thought it was a syntax highlighting issue. The blog post I had ported over did not specify a layout for the page, so that meant none of the CSS defined in the base layout was getting applied. There are a couple of different ways to solve this issue.
Add the layout to the post's Front Matter.
---
title: "Example Blog"
draft: false
tags: ["Eleventy"]
layout: "layouts/post.njk"
---
## Blog goes here
Or add the layout as the default in the directory data file. In eleventy-base-blog, the directory data file, for posts, is located at posts/posts.json
{
"tags": ["posts"],
"layout": "layouts/post.njk"
}
I chose to go with adding layout
to posts/posts.json
.
Deployment #
With the blog working locally, I wanted to have an easy way for it to deploy. I chose Github Pages. Github pages fit in nicely if you are already using git/Github, and it is free. I mostly followed How to Deploy Eleventy to GitHub Pages With GitHub Actions as a guide on how to deploy an 11ty blog to Github pages. I ran into a couple of issues along the way.
- I ran into a weird unknown variable error when trying to deploy the first time. It turns out that Github Pages always tries to use Jekyll to process your site unless you tell it not to. The solution was adding a
.nojekyll
file at the root of the project. - Make sure you add your
build.yml
to the.github/workflows/
directory. This took me at least 45 minutes to figure out that I had put thebuild.yml
in the wrong directory. - If you are using a custom domain, you will need to add
cname: <domain-name>
to your actions-gh-pages configuration.
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
publish_dir: ./_site
cname: adamesterline.com
...
So far, I am happy with the blogging workflow that 11ty provides. I guess only time will tell if I can keep up the blogging habit.
References #
- Jekyll vs Hugo vs Gatsby vs Next vs Zola vs Eleventy
- Zola
- 11ty
- Eleventy docs
- eleventy-base-blog
- How to Deploy Eleventy to GitHub Pages With GitHub Actions
- actions-gh-pages
- .nojekyll
- Previous: Functional Programming with Type Guards