When I first started building my website, I hand-coded all my webpages (I still host some of pages here and here). Hand-coding gave me complete control over my site: the image placement, the custom divs, and how things linked together. Early on, this process was straightforward and even satisfying in a control-freak sort of way. But as the site grew, so did the headaches. Managing and maintaining everything by hand became tedious, inefficient, and very retarded. Looking back, I can see how switching to a tool like Hugo earlier would have saved me a lot of time and unnecessary frustration.
The Challenges of Hand-Coding a Website
Hand-coding worked fine when I only had a few pages on my site. My site was small, and updating each page when I wanted to edit the theme of the site was manageable by using the vim text editor to make changed quickly across pages. But vim is not powerful to automate everything, so with every new pages their would be several seven or so manual edits I had to do to (mostly having to do with linking) to implement the page into my site.
Automated RSS feeds were at the top of my list so readers could subscribe to updates, but managing an RSS feed manually for every post with vim isn’t realistic from a time perspective (I eventually cobbled together a bash script to generate a rss feed). I also wanted to organize content using tags, but creating tag-specific pages required more linking I would have to do per page; same with when adding Metadata descriptions and Open Graph tags. Instead of building new things I was stuck maintaining what I already had.
Making the Switch
A few months ago I started researching better ways to manage a site and eventually landed on Hugo. Hugo is a static site generator that is capable of automating everything that I was having issues maintaining. The idea of switching from hand-coding was intimidating at first. Migrating everything over sounded like a huge effort, and I wasn’t sure how much I’d need to learn.
For the last several weeks while being on holiday leave from my USMC unit, and then getting back with little assigned to me, I’ve been learning the basics on how to use Hugo based on Luke Smith’s Lugo theme (making a large amount of my own modifications). The theme that I’ve come up with has so far been able to automate all the tasks that I previously did by hand.
What Changed After Moving to Hugo
Switching to Hugo has solved a lot of the problems I’d been struggling with. I no longer have to worry about manually updating every page and linking everything together. Hugo uses templates for things like headers, footers, and navigation menus. If I want to make a change, I update the template, and it propagates across the entire site automatically. Everything is automated.
Hugo generates the feed dynamically whenever I add new content. Writing the webpages got a lot easier as it’s done in markdown not HTML. Hugo takes care of creating tagpages, which means I no longer have to code and update those myself.
Metadata, which used to be a repetitive chore, is now automated. Hugo generates titles, descriptions, publication date, and Open Graph tags for each page based on the content itself. Writing content has also become faster because I don’t have to code everything in raw HTML. Instead, I write in Markdown, which is simpler and cleaner (I still insert images as raw HTML as I like using certain custom divs). Hugo handles converting Markdown into HTML and applies the templates automatically.
Lessons Learned
Looking back, I wish I had made the switch sooner. Hand-coding taught me a lot about the basics of web development, but it wasn’t a sustainable way to manage a growing site. Moving to Hugo made everything easier and freed up my time to focus on things that actually matter—like creating new content and improving my site.