Hello Hugo - a new webpage in the works

Sat May 29, 2021 - 622 Words

I’ve been rebuilding my webpage using the static page generator Hugo. My aim is to make a lightning fast webpage that only loads the bare essentials. This naturally relying on a lot of css being supported by the different browser, but by using HTML5 i hope to end up with at site that’s readable even if the css fails to load.

Hugo comes with alot of help builtin, it creates sitemaps, headers, footers and the like out of the box. Changing the name of a post, HUGO will handle the internal route and change the link all the places it need to be changed. I have a super simple site, so I was just coding everything directly into HTML. This rarely caused me to have problems with links or the like, but I’ve been thinking about adding a blog to my homepage. Mostly I wan’t a bit of an technical blog where I can make mental notes of how/why I implemented different solutions. Often I come back months/years later and I cannot understand why I made a specific implementations and I’ll be afraid to change when, if I don’t fully understand the implications. Having a blog add new complexity if just writing directly to HTML, I need to link all the posts, have navigation back and forth between the posts, sorting and such.

I’ve worked with many different CMS system over the years, mostly in PHP. But for at relatively simple site it seams like major overkill needing to spin up a server processing script language, not to mention a database. So I searched abit around and found Hugo being praised alot and seamed like a perfect fit. It’s a static site builder, that generates a /public folder from Markdown files. The Public folder is your entire site laid out in folders and HTMLfiles. For me this means I can keep my draft homepage in my Nextcloud, this way I can work on the site both being online and offline and have version control of the files. As Hugo is open-source you can built it yourself from scratch, use a system build (debian: sudo apt install hugo) or download as a complete prebuild binary. I use the last version, as this allow me to keep a single file binary also in my nextcloud and i can build my site on any computer that are syncing my nextcloud folder with ./hugo --minify.

I started by looking a the many themes for Hugo on their themestore. There are some truly stunning themes, but they all fail in terms of what I’m searching for. I find that using bootstrap for instance solves many problem when making a large site, but for small local sites it ends up been a design restriction, where you end up using alot of css !important to negate some unwanted behavior. Also why spend time loading alot of javascript, jsquery or the like on a super simple site. This makes no sense to me, you can use CSS for at lot of the nice smooth scrooling. If a specific browser don’t support a specific CSStag, no worries, that browser will still work, the site just might not look a spectacular. For my purpose this tradeoff is ideal, no need to use a jquery script that ensures smooth scrolling on every browser known to humanity. Therefor I’m going with a simpler solution; I will not be using any prebuilt libraries, either in themes, javascript or layout.

So I’ve spend some time looking at the documentation of building a theme from the bottom and I’m really falling in love with this way of building a site. I would highly recommend you give it a try if you are looking to rebuild your site.