Sliding to 11ty from Hugo With Gemini Help

Page content

I currently use Hugo as a static blog. Before using Hugo I had tried with 11ty and failed because I couldn’t find documentation that suited my contextual understanding. It’s after a lot of trial and error that I eventually chose to experiment with, and then stick with Hugo since 2024 or earlier.

The reason for this is that once I found the tools to migrate from Wordpress to markdown, suited to Hugo, and found a theme that worked, I could blog with relative ease.

Click and Play WordPress

With Wordpress things are easy. With hosted solutions you just create your account and start creating content. You can play with layout and add plugins, but for the most part it’s click and play. Even self-hosting is pretty close to click and play, once you get wordpress to connect to the database. That’s where I used to get stuck, upgrading from one version to another.

Bloated

Recently I have felt that Wordpress is getting bloated and slow so that’s why I have experimented with static sites. Static sites are light and updating via rsync takes milliseconds, rather than minutes via FTP, and without needing to navigate to the “post” page.

The Migration process

The key three elements for my migration are the following:

  • Hugo Markdown documents for posts and Archives
  • Wordpress to Ghost JSON Export for photos and their path
  • Gemini help to add functionality one step at a time

The Tutorial Approach to Getting Gemini’s Help

If you want to learn to use Laravel you can go to the Laravel site and there is a tutorial telling you how to make a Twitter clone called chirp, step by step. I use the same philosophy when asking Gemini for help with migrating Mardown that was optimised to work with Hugo to work with 11ty.

Displaying the posts

The first thing to do is to see how to organise the “posts” and the “archives”. Gemini suggested to organise them into folders, one for posts, and the second for archives. In so doing we have already cleared the first hurdle.

With Hugo, with a 2016 mac I found that when I generated the blog, with too many posts it would slow down, so I moved older posts to the archive. In so doing Hugo sped up the static site generation process.

As you can imagine all the posts loaded under one heading and all the archives were meant to load under the second subheading. The result was two long lists of posts. that’s the first success.

Sorting Them by Reverse Chronological Order

A blog, by definition goes from the newest to the oldest post so that logic had to be added. Hugo sorts dates for posts, and archives differently so it required some fine tuning to get logic a for post dates and logic b for archive post dates.

Posts by Default With a Separate Archives Page

The next step was to split posts and archives. For this Gemini helped create a second template for the archives page to display archive posts.

Pagination

Once posts and archives pages were behaving as desired the next step was to add pagination so that we have 10 posts at a time, rather than several hundred. Gemini was happy to help with the writing of that functionality.

Post Extracts

Most blogs allow you to read an extract of a blog post, and then click “read more” to read the rest. That’s what I asked Gemini to help me with next. Once this step was working correctly the blog looked more and more convincing.

The featured image step was complex. With Hugo, I didn’t add a featured image to my posts. I had to rely on my Wordpress blog for that step. Recently I was experimenting with exporting my Wordpress to Ghost. That was a success but due to hosting issues I mothballed moving forward.

In the process of moving from Wordpress to Ghost I exported a JSON file, as well as all the images. I asked Gemini whether we could match the blog post titles with the json blog titles, and following that, match the image path, to get it to load with each post with the 11ty blog.

This step took trial and error. First we had to make sure that post titles could be case insensitive for matching. Then we had to determine whether a post had a url, and display it on the page. Once this was done I checked to see whether the images did exist and that’s when I found that entire folders of images were missing.

I went back to photos I had on a local drive and moved them to the 11ty project folder. Once this was done I ran npx and the blog really looked like a blog. Gemini and I had success. I’m writing that for humour, not because I personify AI as a person.

Human Patience and AI Coldness

The process I describe above is not a straight line. It’s an itterative process where a step might take three to ten attempts before something works. Often I found that Gemini would suggest something, without giving me the context of where to add it, so I had to ask “Where do I place this” and sometimes it would give me the entire html document or njk document, and other times it would provide the name of the function. You need to be attentive, and understand what you’re doing.

In one case it assumed I was using njk rather than html. In another case I used fr-CH and noticed that while the blog content was in English the date was in french so I changed to en-GB. The default it had suggested was en-US or just en.

When you’re working with javascript you often get long error messages. When you’re working without AI you need to decipher what the error message is telling you. With AI it will understand instantly and suggest the fix.

Keep Watching for Hallucinations

When learning about AI behaviour always be attentive to signs that it is beginning to hallucinate, and when it does, either be more specific with context, or start a new chat with the bare minimum from the last chat to keep moving forward. If you’re not careful Artificial Intelligence, like artificial grass, will burn you.

And Finally

If you’re new to 11ty, I’d suggest looking at the docs and following their tutorials. I’d suggest gemini, or whichever solution you prefer, if you get stuck.

You could also follow this tutorial.

And finally, on a whim I decided to see if I could get 11ty to work, with the help of AI, and I could. Now I’m tempted to switch from Hugo to Eleventy (11ty). I appreciate having this level of control.