Motivation #
I switched from writing HTML/CSS/JS by hand to Hugo today. There were a couple simple reasons for doing so:
- I felt like I was being demotivated to write blog posts due to the tedium of writing HTML directly into VScode. I know that static site generators like Hugo allowed you to just write Markdown and it automatically prettifies it and converts it into a blog post on a web page. This is the main motivation.
- I wanted my website to be able to reflect well for mobile phone support.
Actually Doing It #
Prior to moving to Hugo, I used Cloudflare pages with a GitHub repository. I used this tutorial to learn how to set up the build for it, i.e. running hugo --minify https://s3gfault.dev as well as running it locally, i.e. hugo --minify --bind {ip} --baseURL {ip:port}. The original Cloudflare x Hugo docs are also very helpful.
Customization #
Hugo has a very big community centered around creating themes for the application. Here’s their full list. I wanted to use one that was light and minimal. Before deciding on Typo by Francesco Tomaselli, I also saw some cool ones that I’ll link below:
- TeXify3 by Michael Neuper: “A latex-style hugo theme with the gruvbox color scheme for personal blogging”
- Whiteplain by taikii: “Simple and functional theme for hugo” – blog posts look like Wikipedia articles!
While setting up this page, I realized that Hugo is fairly limiting in terms of customization. In order to move custom HTML snippets, I learned that I needed to make a layouts/ folder with partials/ and shortcodes/ subfolders within. The partials/ folder houses custom HTML to replace the footer – aptly named footer.html which is automatically recognized by Hugo. shortcodes/ stores HTML snippets that you can embed into Markdown files that you write. I have a custom HTML snippet that allows me to embed HTML code for 88x31 badges into my about page with the use of {{﹤ shortcode_file_name ﹥}}.
Note that the less-than and greater-than symbols are special characters and you would need to type in their regular counterparts, i.e. > or <.
Although a longer process than what I’m used to, this modularity is nice and allows for separation of snippets that could be used elsewhere.
Conclusion #
Hugo seems cool! I will be slowly moving over my blog posts from my previous blog into this format. Let’s see if I continue using Hugo!