I have a strong dislike for how JavaScript (JS) is used on the modern web, which is largely to invade privacy, serve ads, and track users. I personally block 3rd party scripts by default ( learn more about uBlock Origin Medium Mode ). Unfortunately, many websites today are bloated beyond belief, and rely on client side JS for purposes better suited to static HTML. Like serving blog content for example. Otherwise I would just block JS entirely, and enable it only for webapps that require it. This modern implementation of JS opens up a whole world of security and tracking issues on the modern web that need not exist.

So I knew I wanted to build projectProjects using plain HTML and CSS, without JS. I started out building projectProjects from scratch in VSCodium using plain HTML and CSS as a learning experience. I’ve done a few basic webdev video courses, built some small hobby sites before, but never really dove into responsive web design or a proper public facing project.

This approach was great to ensure I understood exactly how everything went together on the site; but, came with its own downsides. Namely, that it was immediately apparent that my desired workflow of writing a post in Markdown (including images) and getting that into HTML on the page in my desired format would become tedious to continue to do manually for every post.

Planning

From prior research, I knew what I needed to improve my workflow was called a Static Site Generator (SSG). When I looked into the FOSS options at the start of this saga I got a little overwhelmed by the variety available, and the fact that most platforms seemed to use some form of minified JS. I was worried I wouldn’t be able to understand the output at the end of it, and didn’t want to invest time to learn a theming format from scratch, so opted to manually code the site initially.

Upon revisiting now, I realize some of the SSG options are quite capable of only generating plain HTML and CSS depending on the theme and setup. Hugo is one such candidate. Enter hugo-bearcub theme. I still find the task of building a Hugo theme from scratch to be a bit much for me. But I had seen the bearblog (hosted) project before, and knew that would be a solid minimal base to build from. So when I found out there was a Hugo theme inspired by bearblog, I decided to jump in and rebuild the site using Hugo.

Getting Setup With Hugo

Hugo was easy enough to setup. I’m on LMDE7 on my laptop, so the native package was pretty out of date when I checked vs the github latest release. I opted to download the latest extended release from github and sudo apt install ’d that .deb file.

I knew I wanted to modify the theme for my own site, so I forked it to a gitlab repo of my own. After following the setup instructions for the theme, I set about doing the tweaks I wanted.

This mainly consisted of switching the theme to use variables for the colours instead of hard-coded as this is my preference for easy editing, tweaking the list layout, a few other layout tweaks, some RSS tweaks, and then implementing branding specific changes like my own colour scheme, manually loading the custom fonts I use, etc.

The hardest part by far for me was familiarizing myself with the Hugo directory structure. That is, where to put files to have them show up in the right spot after building (hint its probably static/), how to link images correctly in the posts (ended up doing page groups), etc.

Once I kind of found my footing it started to become more fluent to make the changes I wanted, refresh the server, and see them show up correctly. Hugo’s template structure is starting to make more sense the more I play around with it so I can see why its so highly recommended.

Deploy

Everything seems smooth so far on the live server.

I create a new post using hugo new content blog/postName/index.md assuming the post will have images. I plop my pre-formatted images in the same folder then type my post in Markdown using ghostwriter . I attach the images as I go right from ghostwriter and they show up in the preview. They seem to be linked and rendering correctly on the live server; I suppose we’ll know for sure once I go live.

I’m just going to ftp the public folder like a caveman. I’m aware there are fancier ways to deploy a Hugo site, but I’m enjoying FileZilla right now.

If you’re reading this, that means the projectHugo update is already live and you’re viewing the new format. In case anyone wants to compare to how the site looked before but didn’t get a chance to see it live, I snapped a quick archive of the site before I updated it to the new format.

Thanks For Stopping By