How I built this site with Hugo (gohugo.io)
...and why you may want to consider it for your next blog.
So you’ve read the post about why I switched from YiddishNinja to LetMyPeopleCode as my social media handle and you might be curious about this new site.
Leaving behind the old and familiar
I’d been using Wordpress since the mid-aughts. I could go into a bunch of details, but…
In short, I was feeling it had grown too large, represented too much of a security risk, and I’d basically grown too comfortable with it.
I asked my friends on various social media sites what they recommended and the overwhelming leader was Hugo. Even if I didn’t use it, I had to try it. The sites some of my friends showed me were really rudimentary, but Hugo had a solid theme gallery and there were a couple of good candidates.
I started with the Hugo quick start tutorial. I’d like to say I had a demo page up and running in 5 minutes, but I actually ran into an issue at the very start. See, I was using it on Windows, so the
echo command in step 3 inserted a Windows style line ending instead of Unix style, which broke the config parser when I tried
hugo new in step 4.
I’ve navigated enough Windows-to-Linux text issues that the LF vs. CRLF was the first thing I suspected (yeah, smarty, the
\r sort of gave it away). I confirmed it, fixed it, and was back on track.
I created a sample post, started the server, and loved that as I edited it, the post updated with each save to a config file or the post. Added
enableEmoji = true to the config and got 😄 working.
What I liked about Hugo
A number of other generators either made me install a new programming language with which I wasn’t familiar (like Ruby) or relied a lot on Vue or React. I have nothing against Vue or React, but I didn’t need more of a learning curve. I basically ran Chocolatey to install Hugo Extended, and then just needed to use a couple of CLI commands to test and build the site.
The rest was mostly HTML, CSS, templating, and config files. I figured I could wrap my head around this in a weekend and have something nice to show for it. Plus I have written a lot of Github README files using Typora and I was comfortable with blogging in Markdown.
Additionally, it was easy to host on Github pages, connect my new domain to the site, keep the site in a private repo, have the pages be public, and adding a secondary backup was as simple as a
git remote add and another line in the deploy script.
I checked out some hosted solutions, but in general they were either too one-note or made me feel like they were owning too much of the relationship with my readers.
Hugo it was.
Really getting started with Hugo
I ended up choosing the LoveIt theme for Hugo. I liked the clean, simple design, I liked the library of built in shortcodes, it’s responsive, and it gives my readers a choice of light or dark themes.
The first tip: Copy the files you’re going to edit from your theme folder up into the corresponding folders in your main Hugo directory. They’ll act as overrides. You can edit them, and when the theme updates, you can test the merge and troubleshoot.
I had to learn where to stash my images, the correlation between the parameters in the templating and setting them in the config, and a few other customizations which I might detail in another post.
If you’re using LoveIt, go to the Hugo LoveIt documentation site. IT’S INVALUABLE. Especially go to the LoveIt “Theme Documentation - Basics” page. In section 3.1 expand the full TOML file and copy it into a text file for reference. It’s not ALL the configuration options, but almost so. Here are all the bits I was able to copy from that file to my
config.toml and simply fill in blanks.
- Adding my social links to the home page.
- Adding some social share links to the bottom of each post.
- Adding Google Analytics
- Adding Disqus for comments.
The second tip: Disqus will not render in preview unless you do some gymnastics.
1: Go to https://[your shortcode].disqus.com/admin/settings/advanced/ and add localtest.me to the approved domains.
2: Run your demo server as “hugo serve -e production”
3: Access your site via “http://localtest.me:1313” or whatever port you’re running on.
What I recommend is doing this just to make sure Disqus is working and then deauthorize localtest.me just to close that opening.
I tweaked a few other settings with the templates and CSS. If there’s enough demand, I can go into that, but what you see before you hopefully looks like it took longer than it actually did.
There are a few tweaks I’d like to make still, but this came out better than my spec for a MLP (minimum loveable product) even without them.
Thanks for reading
I’ll be moving some of the better posts from my old blog over here. To paraphrase the old NBC summer re-runs ad campaign: “If you haven’t seen them, they’re new to you.” 😉 If you want to subscribe to new posts, here’s my RSS.