Switching from Jekyll to Hugo
This is the transcription from the video above explaining why and how I switched from Jekyll to Hugo to generate my website.
I want to walk through why I made this switch, some details about how I made this switch, and if it was worth it.
Jekyll is a static site generator built in the programming language Ruby. It’s pretty straightforward to use. A big reason why I chose to use Jekyll in the first place was it had free hosting with GitHub Pages. That was a big selling point for me. I host most of my projects on GitHub Pages, so that integration was a big reason why I chose to use Jekyll.
I have some teammates at Highrise.
I’m going to walk you through this on a side project on mine. It’s a subdomain, people.hotdogsandeggs.com.
First, this project is whenever I hear an interesting interview/talk/podcast, every once in awhile I transcribe it. It’s a pretty weird habit, however, it helps me retain information and learn new things. I would much rather listen to something and type it up rather than read 40 pages on a subject.
I’ve done about 50 transcriptions. Here is one I did from Merlin Mann. It’s pretty long, a talk he gave at a conference. I type of things from the talk that I find interesting and can take away from. It’s my internal notes, but I just publish them.
Again, done about 50 of these. I want to show you how I made the switch from Jekyll to Hugo with this particular project because I found Hugo to be a little easier to put this site together. And then main reason why was because of these categories. I have four categories, philosophy, for example.
So, to get started with Hugo, you have to install it on your machine. The Hugo site and docs are really well done. If you’re familiar with Jekyll, you’ll have a big advantage because installing Hugo is similar. You can install it quickly and create a new site fast.
There are tons of themes with Hugo. I think it’s really important when you’re trying to learn something new to start with a finished product example. I think it’s a great way to learn to see it done the right way. The themes are a really good way to do that.
The flip side to that is if you start with a complex theme, you find you really don’t need half of what’s there. So it’s kind of a catch-22.
I’ll show you both sites locally on my machine. The structure is similar. Both have a config file. There is a layouts folder in both. Posts exist in Jekyll in the
_posts folder. In Hugo, posts exist in the
content folder and there is a
posts folder there.
So one thing I did have to do with this transition that was tedious was I had to reformat the front matter. It was somewhat tedious, but everything else was pretty straightforward.
A big advantage with Hugo, this is my index page. It’s really bare bones. In Jekyll my index page is in HTML. A big advantage in Hugo was the layouts folder. You can do a lot with it, and it was probably the toughest thing to grasp for me. But it’s super powerful.
It’s how I created categories pages, and the index layout. I can just have a markdown file, use a layout, and create a page super fast.
There are some similarities. Partials in Hugo are very similar to the includes folder in Jekyll. This is where you would put things like a footer, or something that is going to be used over and over again.
Shortcodes are a useful perk of Hugo. There are a lot of built in ones. Think if you need to create a Twitter post, there is a shortcode for that. You can create custom short codes, which I did with a highlight on the home page.
The big advantage of this switch. First, I’ll serve both of these sites locally on my machine. I want to illustrate how much faster Hugo is on my machine.
In Hugo, I don’t have any of those pages. I’m using the front matter and a layout in the default folder, the list template. It calls on the categories and generates the page. All these are built using the list template.
It took me quite awhile to figure this out. A really good resource that I’ll share is bookdown.org. They walk through how to build these minimal examples. This is the exact template info or code that I needed.
Here are the two sites. Both similar, structure is different and I found Hugo to be easier for it.
One big pitfall was hosting on GitHub. When you’re ready to publish with Hugo, you run a command and everything gets put out in the public folder. With Jekyll, you can upload what you have to GitHub Pages and it’s just going to work.
But with Hugo, you really need to upload the public folder. I made that mistake and found out the public folder is what you really need. So that’s a little bit of a drawback with Hugo, not a huge one though.
If you go to GitHub, in the people repo, you can see it’s hosted through the GitHub Pages branch. In the Hugo source branch, you can see what I’ve used to generate the site.
So was it worth it to make this switch? For me, 100% yes. I learned something new. I was pleased with myself to make this transition, and plus, I just have a better understanding of how things work. I’m really pleased with how it turned it out with my home page, the blog, and this project.
It was tough. Static site generators there are a lot of them. If you want to go with Ruby, probably go with Jekyll. If you’re familiar with Go, Hugo is a good option. There is Middleman out there. When it comes to static site generators out there, you have a lot of tools. It’s not really about the tool, it’s your personal preference.
That being said, switching is a pain in the ass. There are no bones about. There are pros and cons to everything, so figure out what you want.
I thought I’d end this on a useful piece of advice from Gordon. If you want to learn to code, that’s not a really good goal. Because there is always going to be more to learn. Focus on improving your understanding in manageable ways a bit every day.
I think that kind of advice is critical for anything. I wouldn’t go out and try to master Hugo. It’s about what Hugo can enable me to do, which is put together a personal site quickly and be proud of how it looks.
I hope this gives you a glimpse on how it was to switch and maybe it changes your perspective on creating a static site and what generator to use.