My First Hugo Post

If you can read this it means my first hugo post was successful! This article marks the point in time my website transitioned to using Hugo. Prior to this, I modified a template from html5up working directly with html/css/js. Take a step back in time and see what the site used to look like below.

It is sad to see the old site go, but I am hoping to incorporate the best of it into this website as it grows into something new and improved.

Why Hugo #

Hugo is a static site generator that can build lots of static sites using Go on the backend. This offers users of Hugo the ability to easily build and manage more of a blog style website. This aligns better with my goals for this website as I am aiming to use this as the stomping ground for my thoughts and experiences. I had considered using substack to host this form of content, however, after discovering Hugo I knew I just had to get my hands dirty and figure out how I can build a site for this myself.

Minimal web development knowledge #

Hugo also seemed to require the least amount of prior web development knowledge. All content pages are written in Markdown and most basic customizations can be made using existing Hugo commands. Reducing the amount of html/css/javascript needed to almost zero allowed for me to quickly spin this website up within a couple days of tinkering around.

How to Hugo #

I can now say that building the website was pretty straightforward, however, Hugo is not the most intuitive for new users. Combining my spotty background in the very basics of web development causes me to stumble quite often when working on my website.

To start developing a website in Hugo, you often will start with a template, in this case I choose Congo. You can browse updated templates on Hugo’s website or by searching on Github.

With a template chosen, the sky is the limit for how much you would like to modify it. You can simply throw in your details and start blogging or you can add all sorts of customization to it. I chose to keep things pretty simple given my lack of significant web development skills. The template I chose even had some instructions on how to get started.

To view changes as I made edits I ran the command hugo server --noHTTPCache in the background. Most of the content I added and modified (blog posts, about page, etc) was made within the /content directory. You can either manually make these files or run commands such as hugo new content example.md to generate this content. When using the hugo command it will follow what has been outlined within an /archetypes directory.

Hosting and Deploying #

After building the site locally it was time to get it out on the world wide web!

There are all sorts of hosting and deploying options out there today. Some of the more popular ones include Github Pages, Cloudflare Pages, and netlify.

In light of seeking to better myself, I opted to find a service that I could generally stand proudly behind. Render appears to be a company that I can stand behind. Many of their core values align with my own, such as

• high integrity: “We do the right thing even when it’s the harder option, and especially when no one’s looking.”
• low ego: “Improving global outcomes is our top priority at work, and it is also the foundation for individual success.”
• ownership: “We take full ownership and accountability for our work, but we’re never too proud to ask for help or additional context when needed.”

Render’s focus appears to be on the success of their product rather than virtue signaling social or political movements. The same cannot be said about many of the other popular options..

Github: “We set and track ambitious goals for women, racial and ethnic minorities, hiring, retention, and other diversity metrics. All our hires also go through a DI&B conversation during the interview process.”

To get things started, I used Render’s GUI to configure a connection to my hugo repository on Github and configured what command I wanted to run upon deployment. The command is simply the hugo step that builds the /public folder, i.e., the website’s html. All of this was documented on Render’s website and it actually shocked me how easy it was to setup things. Finally, I changed some of my DNS configurations to point my domain name to this new website (also nicely documented by Render).

Pricing for the use of Render’s services is highly competitive for my use case. I do not expect to incure any costs associated with hosting this website. I already had a fairly low cost solution using AWS Amplify (~$.10 per month), however, as they say a penny saved is a penny earned! As the website gains more use or capabilities cost do pile up, but for now I’m extremely pleased with this solution.