I just completely redesigned the Upward Gaze website. When I initially created it, I just bought a hosting plan, slapped a Wordpress theme onto it, made some minor changes, and just started posting my articles. I wanted something working fast, and wordpress makes that possible.
But there are some flaws with that.
For a start, Wordpress creates what is known as a dynamic site. If you are unfamiliar with how websites work, they are usually created with three types of files: HTML, CSS, and Javascript. The HTML gives you the content and the layout, the CSS tells the browser how it should look, and the Javascript codes in any extra functionality.
With a dynamic site, these files are assembled when you visit the site. This is very useful if you have a website such as YouTube, where new videos are always being uploaded, users are adding comments and likes, and every user has a different set of recommendations. A dynamic site allows a user to visit a website and see unique content tailored to them.
The downside to this is the extra processing power. A dynamic site must search through a database to find the content it should display, build the website, and then send the data to the user, resulting in much longer load times.
For my little blog, this is completely unnecessary. Every user that visits Upward Gaze is going to have the same experience. This is where static sites come in.
Instead of building the website when the user tries to visit, static sites are built ahead of time. Then, when a user visits the site, the server only needs to send a few files. Even for my small website, I have already noticed a major increase in speed.
Another reason I wanted to move away from wordpress was all the bloated, privacy-invasive scripts and plugins. By default, my web host added an analytics plugin that utilized Google analytics. So any time a user visited my site, Google’s trackers were injected onto their browser. I hate Google (that’s an article for another day), so I wanted to move away from that as quickly as possible.
This is another problem solved by a static site; I can build my site with pure HTML and CSS (I don’t even need Javascript for my purposes), which means there is nothing for the user to worry about when it comes to privacy.
There is, however, a major problem with static sites. If I want to add new content, I have to modify the HTML of every affected page. For example, if I want to post a new article, I have to build the page for that article in HTML, edit the home page to link to that article, possibly edit other articles to include the new article in a “read more” section, and so on. You can see how this would become tedious.
This is where Hugo comes in. By adding Hugo code into your HTML, you can automate all of this. You can write the content of your website in Markdown and Hugo will automatically convert it to HTML (this is perfect for me considering the text editor I use for writing is the markdown-based Obsidian). You can create HTML templates for different pages (for example, the home page, an article page, etc.), and Hugo will apply that template to all the content.
This is extremely powerful; you get a static site with many of the conveniences of a dynamic site. This is why Upward Gaze, as well as this site, were both built with Hugo.
To give you an idea of how Hugo works, this is how I implemented the “recent articles” section on the homepage of Upward Gaze. The code looks like this:
<ul>
{{ range ( where .Site.RegularPages "Type" "articles" | first 4 ) }}
<li>
<a href="{{ .Permalink }}"><h3>{{ .Title }}</h3></a>
<p><b>{{ .Params.Author }}</b> • {{ .Date.Format "January 2, 2006" }}</p>
<p>{{ .Description }}</p>
</li>
{{ end }}
<ul>
Even if you are familiar with regular HTML, this might look confusing if you aren’t familiar with Hugo. Here is a breakdown of what this does.
Anything surrounded by {{ two braces }} indicates Hugo code. In the first block:
rangeis just a loop, the same as in every programming language.where .Site.RegularPagesmeans the loop will be iterating over the pages that exist on my site."Type" "articles"specifies that we will only be looking at the pages of type “article,” that way we don’t end up with the about page or another non-article page listed.first 4means only the 4 most recent articles will be displayed.
The rest of the code is fairly regular HTML. I wanted a heading with the title of the article, the name of the author, the date it was posted, and a description to appear. If I were trying to do this manually, I would have to write out the HTML for all 4 articles, then update this page any time I posted a new article, but because we are using Hugo, we have access to page variables.
With page variables, you can access attributes of the page, and when Hugo compiles the site, it will add the attribute into the HTML. For example, when Hugo compiles, it replaces .Params.Author with the text “David J. Pence.” With these variables, I am able to link to the page, add the title, show the author and publish date, and display the description.
Many of these variables are defined by me whenever I write an article. In every markdown file containing content, there is a section of front matter written in TOML defining these variables. Here is what that looks like in my article on Christian Nationalism
+++
title = 'On Christian Nationalism and the Great Commission'
author = 'David J. Pence'
date = 2024-04-23
description = "Christian Nationalism is a controversial topic...Earlier this year, a whole new outrage cycle began in response to Oklahoma state senator Dusty Deevers...By examining this criticism, I believe we can get a good idea of what the \"Christian Nationalism\" debate is really about."
MetaDescription = "By examining the criticism of Dusty Deevers, I believe we can get a good idea of what the \"Christian Nationalism\" debate is really about."
+++
Most of these variables are pretty self explanatory. The reason I use two different descriptions is so I can provide a longer snippet of the article on the home and articles pages of the website while also having a short version that works better for search engine optimization.
If you’re not particularly tech-savvy, you might have absolutely no idea what I’m talking about. If you want to start a website, Hugo probably looks kind of intimidating. However, Hugo also has a huge library of themes to use. I chose not to use one for the Upward Gaze website because I wanted it to look more unique, but for this site where that doesn’t matter to me as much, I used a theme called Poison.
I modified the theme slightly, which requires some knowledge of HTML and CSS, but if you don’t plan to make any modifications, you never have to touch code. You can install hugo, install the theme, and start writing. You will have to understand markdown for your content, but that isn’t programming, and it’s honestly something everyone should know how to use. It is very useful for writing documents without having them tied to proprietary formats. You may also need to configure the theme with TOML, but it is extremely simple and the documentation for the themes usually tell you exactly what to write.
When it comes to hosting, I have simply deployed my site on a VPS. It’s cheaper than a regular web host and you have more control, but because you are essentially just renting a linux computer on the internet, it takes more work to set up. That is beyond the scope of this article, but if you want to know how to do it, I would recommend following the guide on landchad.net. It’s written by Luke Smith and it is very easy to follow. Setting up a VPS really isn’t that hard, so I would recommend it.
I hope I have succeeded in convincing you of why Hugo is such a great piece of software. I think it’s a shame that no one has their own website anymore. Everyone sticks to a few social media sites for absolutely everything.
It can be a hassle to set up a website, and social media certainly has its place in society (it’s probably the only way people will every discover your website if you do create one), but there is a lot of freedom that comes with owning digital real estate (as Luke Smith calls it). You can set it up however you want, you control everything, and you don’t have to worry about our big-tech overlords removing everything you write for a TOS violation.
So, consider starting your own website. Let’s decentralize the internet. And if you do, don’t install some bloated, privacy-invasive software like Wordpress; use Hugo.