adamesterline.com

New Blog

Eleventy

Background #

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.

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