A few months ago, I got tired of dealing with my Jekyll site. That site was hosted on GitHub pages and used the Minimal Mistakes theme, which I continue to love. My issue, though, was that using a remote theme that I didn’t quite understand led to ongoing difficulties with deployment. These, of course, all stemmed from user error.
Frustrated again by a site that wouldn’t build or deploy, I said: “Screw it. I’m going to a readymade option.” I chose Ghost.
This platform seemed to have a lot of value:
It seemed oriented toward writing and content over anything else.
There are a lot of cool analytics features within the platform.
I was unable to stick with Ghost.
The site worked, for sure. But it didn’t give me the kind of granular control over content that I wanted. Worse, it didn’t let me tinker, which is the most important feature of technology, to me.
So, I decided to learn how to create a Hugo site, from scratch.
I went into this project knowing essentially nothing about Hugo except its branded tagline: “A content manager’s dream.” That was enough to hook me in. Sure, I’ve had tons of experience with HTML, CSS/SCSS, and the relevant languages and markup syntax involved in Jekyll, like Liquid and Ruby. But I had no experience with Go, the language on which Hugo is based, or any of the other relevant aspects of the Hugo framework.
I’ve taught myself… a lot. Over the past several weeks, I’ve gone from knowing nothing to having built a pretty much fully functional Hugo site. It may not look like much, currently being pretty “Bootstrap-y,” but there’s plenty of time to figure that out on a rolling basis.
Here is a list of things I’ve learned and / or built into this site during this process:
Pretty much all of the methods of image processing available in Hugo. I put this first because it was probably the most difficult aspect of the project, requiring the most head-scratching and figuring out how Go works as a language. All of the images across the site are sized automatically to increase the page-load time. That’s pretty cool.
Lots (lots!) about SEO and what to include as far as metadata goes. I knew a fair amount about this, but Minimal Mistakes did a lot of things automatically that I didn’t understand and had to learn.
Foregrounding site and page parameters to follow DRY principles as much as I possibly could. I plan to release the final version of this theme as a project on GitHub, so I’ve designed this version to be as modular, customizable, and user-oriented as possible. More can and will be done here, but I’m happy with it so far.
Lots about Hugo shortcodes. One of my bugbears is writing accessible-first markup, as it should be for everyone. It was harder than I thought to create the ability to auto-resize images–which requires accessing them as global or page resources–and also pass in things like alt-text and, as necessary, captions. So, I wrote some shortcodes that do just that. Others are less impressive but still useful. I’ll detail those at a later time.
While I’ve used Bootstrap many times in the past, I’ve never done so using NPM. I wanted a deeper level of customizability (you probably can’t currently tell, to be fair), so I learned how to use the NPM version of Bootstrap.
Finally, I’ve just spent a lot of time messing around with the Hugo way of managing content. There’s a lot more to come in that regard (see below), but I’ve learned a lot and am loving it so far.
While I’m happy with all the work I’ve done here, there are quite a few things I want to get squared away. Here’s a list of what’s to come.
The visual design. I know it, you know it; this site looks very boring. My next move will be focusing on a visual redesign of some of what I have here so far.
Bringing in more content. I’m planning to bring in old posts and resources, but relatively slowly. The reason is that I want to be exactingly intentional about how I create the content structure for what I have here.
Release the theme. The nice thing is that I’m not all that far away from this. I’ll probably send something up to GitHub once I figure out the visual redesign.
Fun stuff! I’ve learned so much by building this site and developed a lot of useful new skills.