Making a HUGO Website The Full Stack Way - Intro

Making a personal website or blog in 2022 can seem like an arduous task. There is a veritable zoo of options ranging from old-school WordPress to self-hosting your own servers and writing in raw HTML/CSS and javascript. Modern tools such as HUGO, Jekyll, GatsbyJS abstract out much of the difficulty of making the actual site. The user (you) can simply write some Markdown and boom, out comes a nice fully functional blazingly fast static “Jamstack” website.

What’s a static Jamstack website?

A static website (as opposed to a dynamic website) is simply a website that only consists of data files. Unlike Facebook which shows you a customized feed and also stores your photos, for example, a static page shows the same content to everyone. This makes static pages blazing fast and secure since the static content only needs to be served as static files with no need to run a server’s CPU 24/7. “Jamstack” is a web architecture built around the idea of static sites that can have some dynamic content via plugins. For example, the Disqus comment section at the bottom of this static blog site you are currently reading is a third party plugin managed by the Disqus company!

What Is HUGO?

HUGO is a popular and fast tool used for generating static websites such as blogs, technical documentation, or personal landing pages. It allows folks to write content for their websites using Markdown rather than HTML and has a huge library of themes which can save you the trouble of designing your blog or personal site! Unlike other options such as GatsbyJS or Jekyll, HUGO is written using the Go Programming language on the backend, making it blazingly fast. HUGO can generate thousands of webpages from your Markdown code in mere milliseconds where other options may take many minutes.

Who is this tutorial series for?

I started this tutorial series mainly to document my own process in learning how to build this very blog using HUGO and Google Cloud from the ground up. This tutorial series is for folks similarly interested in making their personal sites using HUGO and deploying their site on Google Cloud using modern Infrastructure-As-Code (IaC) tools such as Terraform using DevOps best practices. Self-managing infrastructure and deployment is purely optional (and educational) as well as fairly inexpensive, costing less than $1/month.

Easier alternatives

If you are simply interested in getting your site on the web ASAP, there are much more user-friendly services such as Netlify which can greatly reduce the hassle of managing your own deployment with far less work while also handling things like HTTPS and CDN (which are not covered in this tutorial series).

If you are not comfortable with handling the details of building a static site using Markdown, you may want to stop reading and try out Forestry.IO as a good alternative before proceeding (costs money after the first 3 sites).

Full Series

• Part 1 - Making a Hugo Site
• Part 2 - Manual Deployment to Google Cloud
• Part 3 - Infrastructure as Code (IaC) with Terraform
• Part 4 - Automating deployments with Github Actions
• Optional - Using Cloudflare for (free) HTTPs

Example Template on Github

Read the Next Post -> Getting Started