So you want to make a website?⌗

There’s a ton of reasons to make your own website, especially if you work in the software and tech industry. There’s also a ton of ways to get started with your website, whether using something that provides a lot of hand holding, like Wordpress, to creating your own from .html and .css files. For me, I am always on the look out to use a framework that abstracts away enough of something that I don’t need to be an expert on but still allows for some customization, and for me, that was Hugo.

What is Hugo?⌗

From the Hugo site:

“Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.”

So, Hugo is for static site generation, which is what you would want to use to just serve up content like a blog, resume, or any other general information you want to get out to the inter-webs. Static sites are not applications and don’t dynamically interact with backend databases or other server-side services. So as long as you are looking to build your own blog or portfolio, then Hugo might be a great place to start.

Another reason to use Hugo is that most content in it can be generated using Markdown, which is a simplified way of rendering HTML. It has become the defacto for READMEs and other web documentation for a while now, and is how I am writing this post right now.

Beyond just static site generation and using Markdown as a default method for creating content, Hugo provides a rich ecosystem for Content Management in general which allows its use for simple websites like this one while also allowing multiple teams collaborate on Enterprise-grade content!

The Hugo Basics⌗

Hugo is based on Go and creates a basic skeleton format for you to start building your site. I am not going to go into all of that here, because it’s well documented, but once you get Hugo installed on your machine, creating a simple website is as easy as running:

hugo new content posts/first-post.md

add some content to that new first-post.md file, and then compile and check out your site locally with:

hugo server

After checking if everything looks good locally, you can compile the full static site by just running:

hugo

which will compile the final site into the /public directory.

Themes⌗

The Hugo community has provided a rich set of themes to use so it’s not required for the developer to have to build that up from scratch. For this project, I opted to use the Terminal Theme as I found it smart looking and to fit well with the overall asthetic I was going for with my own site.

Installing themes usually is done by one of three ways:

  1. as Hugo Module
  2. as a standalone local directory
  3. as a git submodule

Depending on how whether you want to customize the theme or just use it “as is” will direct how you want to install the theme. Using it as a Hugo Module is basically just pointing Hugo to the Git repo in the hugo.toml file and using the theme as the author intends it (which could just be you as well). Local install or as a git submodule, both require putting the theme code in the the /theme directory and then setting that as the theme in the hugo.toml file. Either way, it is easy to get started with themes in Hugo.

Great, now how do I get it onto the web?⌗

The next step is to actually get your site onto the web, so here are some options:

1. GitHub Pages⌗

Probably the most straigt-forward way of getting your static site to the web today is GitHub Pages. GitHub Pages uses your existing GitHub repository to host the content that is found within the same repository. Again, I won’t go into the step-by-step with this, because Hugo has already documented this process.

2. Netlify⌗

A popular option for Hugo site hosting is using Netlify for a full Enterprise-grade offering that provides a lot of simple “click-button” features that minimizes the ops required to manage a company’s web architecture. Hugo’s guide for Netlify can be found here.

3. Firebase⌗

This was my choice. Firebase is similar to Netlfiy, in that it provides Enterprise-grade feautures, while also providing a free tier for hosting your site. It allows for getting started quickly, while providing a lot of room to expand. Firebase is built on top of the Google Cloud Platform, and has access to all the rich managed options that come with that vendor’s offering. Hugo’s quickstart guide for Firebase can be found here.

4. Many more!⌗

There’s a rich set of hosting options that the Hugo team has already documented and I encourage the reader to check out all the options here.