Last updated: 2025.12.04

Motivation #

I switched from writing HTML/CSS/JS by hand to Hugo today. There were a couple simple reasons for doing so:

1. 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.
2. 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. If someone were to start from the same tech stack and wanted to migrate their site to Hugo for their static-site generator, they can do the following steps (and relevant tutorials credited below):

1. Install Chocolatey, a package manager for Windows.
2. Follow the Cloudflare x Hugo Framework Guide tutorial to install Hugo, make a Hugo project, and initialize it as a git repository.
3. Ensure that you have VSCode autosave on so that you can Hugo can automatically recognize changes to files and re-render pages when you host your page locally.
4. Deploy the Hugo site locally by running the following command (from Setting up a Personal Webpage by Pablo Gonzalez tutorial):

hugo server --minify --bind {ip} --baseURL http://{ip}:{port}

Now, everytime you edit a file (i.e. post, homepage) in your Hugo project folder, it should re-render live locally at your http://{ip}:{port} of your choosing, i.e. http://127.0.0.1:1313.

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!