I've been thinking about starting a self-hosted blog for a while. This summer I decided to do it. The first step was to decide what tech to use to build it. I wanted to use it as a project with which to learn something new. I started using Gatsby and went through some tutorials and built most of the site, then decided last week to switch to 11ty and Liquid.
Having spent a while building a Gatsby site I then discarded, I wanted to get something up and running quickly once I'd decided on 11ty/Liquid. I also had other things on, so I gave some thought to what the MVP (Minimum Viable Product) would be.
Determining the MVP
Firstly, the bare minimum required to make a functioning blog. I decided I needed:
- A system that turns markdown into an HTML page for each post.
- A home page that displays recent posts in descending order.
- A system to display some basic data about/with each post, such as date, title and some social media links.
Secondly, I wanted to get the aesthetic right from the beginning. It might not be perfect, but I wanted the design to be something I felt comfortable sharing with the world.
Thirdly, I wanted to have the metadata and graphics for icons and social media ready from the beginning. This meant:
- Favicons
- Open Graph and Twitter metadata for each post
Building the MVP
Turning markdown posts into blog pages turns out to be very easy with 11ty: it does it out of the box. Using a Liquid for loop to display a collection of posts on the home page was straightforward, but it took me a while to figure out reversing the order of the collection (it was very simple once I found the correct method). I had already worked out a frontmatter system for the Gatsby site, which could be adapted to suit the new 11ty site. This made the third bare minimum task easier because I already had a structure in mind, and I could adapt the markdown I'd already written to work with the new site.
Similarly, I was able to reuse a lot of the CSS I'd written for the Gatsby site, with just a few changes to element names and such like. The design therefore came together quickly, with just a few tweaks to suit the new architecture.
After that came the favicons and social metadata. I designed an icon and found a favicon generator that could generate all the necessary formats. I added all the metadata to the Liquid templates and designed a template cover image that I can adapt for each post.
I consciously decided not to include social sharing buttons as I don't want to expose all my readers to the tracking technology that is often included with these buttons. Instead, I have placed a link at the bottom of each post that can be copy-pasted. It remains to be seen whether this will be effective, but I hope so.
Issues that arose during development
To begin with I was running the 11ty compiler and then pushing the _site directory to the remote repo along with everything else. I soon realised I should add _site to the gitignore to stop this, but I then had to get the _site directory out of the remote. After puzzling over this for a while, I figured I would remove _site from the gitignore temporarily, delete it, push to the remote, then restore _site to the gitignore and push again. This worked.
Going forward
Building an MVP means leaving out desirable, but not critical, features, and there are things I want to add in the future.
At the moment, the excerpts on the home page are added manually to each post's frontmatter. I'd like to add a system that generates these automatically from the page content. I'd also like to add an about page, which will act as an alternative to the initial 'about' post when that is buried under newer posts.
In the future, I'd like to be able publish guest posts, and build out a profile page on the site for each author.
Once these things are in place, a navigation bar will also be needed to enable readers to access everything.
I did take some of these ambitions into account when building the MVP, so as to ease future work. For example, post frontmatter includes the author name, even though for now all posts are by me. Nevertheless, it is inevitable that parts of the MVP will need to be reworked as I add new features.
Some resources I found useful
Let's Learn Eleventy!, by Jason Lengstorf on the Netlfiy blog www.netlify.com/blog/2020/04/09/lets-learn-eleventy-boost-your-jamstack-skills-with-11ty/
11ty docs www.11ty.dev/docs/
Liquid docs shopify.github.io/liquid/
How many favicons should you have in your site?, by Jecelyn Yeen jec.fyi/blog/favicons-manifest
Conclusion
I was pleasantly surprised by how easy I found it to get into 11ty and Liquid, with the bulk of it being intuitively similar to standard HTML and Markdown. I am also pleased with how little code is required to build a functioning MVP. Building with 11ty and Liquid was altogether a good experience.
Finally
If you want to check out what I built, it can be found at sparksandvertices.uk
Top comments (2)
Good start, thanks for sharing! I can not recommend 11ty enough (I also use it for my personal website), it's just so easy yet so powerful at the same time.
I can see that you're planning to build up some data (author profiles, metadata ...) that will need to be managed over time. In that case, you might want to check out how you can consume data from a headless CMS. You can find a good article using DatoCMS (although there are plenty of other options) on that here: webstoemp.com/blog/headless-cms-gr...
And even if you don't want to be dependent on an outside service, trying it out will surely make you get to know 11ty a bit better.
Thank you, that is helpful! Ideally I'd like to avoid being dependent on outside services too much, but there are trade-offs to be made, and as you say, it all helps to get to know the tech better!