Building my Blog with 11ty.

Insert TAB "A" into SLOT "B" fold at "C" and then open ...

The search for a blogging tool

I had tried blogging multiple times, and if I didn't just stop posting because I ran out of ideas then it was a hosted blog service, or I hosted it and because of security problems with plugins that I wanted that ended up getting my site hacked. It was a nightmare, and became too much to deal with. I even tried using these sites for devs to make posts and using their API to show posts on my home page. Yet I wasn't satisified.

I sat down and I thought it over, what is I really wanted and here some things I came up with:

1. Self Hosted on my personal web server
2. Static based pages, where I didn't need a database
3. A way to write a file without worrying about formatting and uploading it but not writing full HTML for each page
4. It needed to be implemented within my existing static website without hassle.

I looked but hadn't really found what I was looking for, and was considering writing my own thing. While discussing this on Mastodon (a great place to follow other tech people), at the beginning of the year, it was suggested that I give eleventy a try.

First Thoughts

At first I was a bit skeptical that it would do what I wanted, but after playing with it for a short bit I realized that it was pretty simple. It wasn't exactly what I was looking for as I'm still writing HTML, but I'm not writing the boilerplate for each page. I also realized that I could simply generate my entire website, which was already static. Seeing this my mind began to think what all I could do with this tool. The best part for me is I'm still uploading a simple static website, the only code that might be exploitable is my own javascript that I use for dealing with navigation. Nothing that can affect my server.

What I Like About 11ty

First was the quick setup. Installing Node.js on my computer, and then installing the package. I'm not going to go into details here since it is really well covered in their documentation, but it was super simple. I had a bit of a struggle with how to configure it so that it matched my needs for deployments, which I'll describe more below, once I understood what it wanted and how I could work with it, the problem was quickly passed. The next thing was defining the template, since I really wasn't interested in changing my existing layout I use in my website, I just integrated it into 11ty using Nunjucks and HTML. It was amazing how fast that worked.

Problems Encountered and Solved

Although there is a lot to like I did run into some issues. These were mostly because I am unexperienced but there are a couple of gotcha things too.

Deployment

My first issue had to do with my deployment handling. One of the things I wanted to move away from was simply pulling all the files from my git repository onto the web server. There's a lot of stuff that just doesn't need to be there, and I felt it was bad form. So I figured if 11ty "compiles" the pages to simple static web pages, that it could put the files where I wanted them. However, that didn't work out exactly the way I wanted. In the end I allowed 11ty to place the files where it wanted them, and I would then pull them into a final "dist" folder. I do this with an ANT script, which not only moves the files I want, but also updates any variables in the pages for like Copywrite date, or page versioning (useful for ensure changes in Javascript are recognized). I even have the ANT script call the 11ty build process, so when I'm ready to build the page I just type ant in my terminal and boom everything is ready for upload.

RSS Feed

I find RSS feeds are very important for blogs. So of course I wanted one, and there's a plugin/extension for it. It set up pretty easily and handled well.

Tags!

I had more problems with tags. Not tagging itself as that part is easy, but showing the tags on the individual posts. There weren't many good examples of how to do it, and I had a difficult time finding documentation. Eventually I was successful, but I'm not completely sure I understand why. If you are curious how I solved it you can look at my source code on Codeberg to see what I did. It's in the _includes/layouts/post.njk file.

Using MD Files? Then all MD Files will be Processed

When I first started working on this I tried using Markdown pages for the main content files, but I then found out that the README.md file in my repository would also generate a web page, which was NOT something I wanted. This went along with dealing with how 11ty wants to build the site. So in the end I decided that writing a little HTML can't hurt, and then I keep a separation from the README page, and the actual website that I'm building.

What's in the Future

Well now I have a blog, and I'm pretty happy with it. I'm continuing to tweak it and adding new features. The latest was adding a tag cloud and pages for tags, which worked out quite nicely and wasn't hard to implement. Again, I found a plugin for generating the tag cloud. Other than posts I'm not sure what I will include. I did have a request to post some of my paintings online, and honestly that should't be too difficult with 11ty. In any case I'm glad I found a useful tool to build a blog which allows me to share my thoughts.

Final Thoughts

If you are thinking of starting a blog, and you have your own web server, or have purchased hosting, take a look at 11ty. You may find that something better than those large enterprise softwares out there that either want you to pay them to host on their servers, or if you host their software yourself, you have to deal with the constant security threats.

So until next post, take care.



Jason