Cheapskate Driven Development: Build a Site For Free

This site cost me nothing. And I’m going to keep it that way.

You may think you need serious infrastructure to build a website: an EC2, RDS instance and route53 at minimum. Not to mention a bespoke UI designed to be accessible to those who can only see three different RGB values.

But you’d be wrong. Chances are, the site you envision can most likely be simplified down to a set of static assets. Which means you can throw it on a CDN for free, without AWS burning a hole in your bank account.

A good website should have:

• A Cool User Interface
• Quick Loading Times
• SSL
• Automated Deployments
• Domain-based email

And if you’re running a blog, you’ll also need:

• A Content Management System
• A Newsletter
• Quality Content (Optional)

So I’m going to teach you how to get everything aside from the quality content. That’s still on you.

Let’s get it.

Powered By Hugo

At the core of this project is Hugo, a static site generator written in Go. It’s fast — like, absurdly fast. It compiles your entire site into plain HTML, CSS, and JS in milliseconds. There’s no runtime, no servers, no additional nonsense.

You write content in Markdown, customize your theme, and Hugo handles the build step. The output is a folder of static assets that you can deploy just about anywhere — a CDN, AWS, Cloudflare, or a Raspberry Pi glued to a power outlet. The possibilities are endless.

It’s great for blogs, docs, portfolios, and just about anything that doesn’t require a database. And if you need one later, well, that’s a problem for Future You to solve.

Full documentation here. But since you’re reading an online tutorial, it’s safe to say you’ll be skipping that.

Alternatives to Hugo (If You’re Feeling Rebellious)

If Hugo isn’t your style, there are other static site generators you can check out:

• Jekyll — Ruby-based and well-supported by GitHub Pages. Slower than Hugo, but beginner-friendly.
• Eleventy — Flexible and JavaScript-friendly. Ideal if you want to write everything from scratch.
• Astro — Combines static output with component-based frameworks. Lots of bells and whistles.
• Next.js (Static Export) — Using Next.js to build a static blog is like buying an F-22 for home security.

I’m sticking with Hugo because I like things that are fast, simple, and don’t talk back.

You may choose something else because you don’t like golang or you can’t find a Hugo theme you like. And that’s fine.

Install Hugo

I’ll be running this on Windows Subsystem for Linux (WSL). Which is just Ubuntu in a docker container, and Microsoft somehow tricked me into believing that’s a legitimate dev environment.

To install Hugo on Debian-based Linux distros:

sudo apt install hugo

On MacOS:

brew install hugo

Version Check

For rapid development, we’re going to use a template.

Many Hugo templates require Hugo extended.

So check your version, and verify that it has the word ’extended':

austin@MSI:~/PersonalSite$ hugo version
> hugo v0.135.0-f30603c47f5205e30ef83c70419f57d7eb7175ab+extended linux/amd64 BuildDate=2024-09-27T13:17:08Z VendorInfo=gohugoio

if you don’t see “+extended” in the output, or if the version your package manager provides is not supported by your theme, then congratulations, you get to install it manually.

That should look something like this:

cd /tmp
wget https://github.com/gohugoio/hugo/releases/download/v0.146.0/hugo_extended_0.146.0_Linux-64bit.tar.gz
tar -xzf hugo_extended_0.146.0_Linux-64bit.tar.gz
sudo mv hugo /usr/local/bin/hugo
sudo chmod +x /usr/local/bin/hugo

Make sure to download the right version.

Init

Now to build the scaffolding of your site.

Hugo has a convenient command to do this:

hugo new site quickstart

Run it to scaffold your project:

austin@MSI:~$ hugo new site quickstart
Congratulations! Your new Hugo site was created in /home/austin/quickstart.

Just a few more steps...

1. Change the current directory to /home/austin/quickstart.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

This will create a directory called quickstart, containing everything you need. Change the name to something relevant.

Something that doesn’t look like you followed an online blog post of suspicious origin.

Read more about Hugo’s directory structure here

Choose A Template (Optional)

Hugo is great. You can build a static site extremely easily with near unlimited flexibility.

But unless you’re a UI guru, you probably won’t want to build the entire user interface from scratch. Templating is an easy alternative. Chances are, someone has created something similar to what you need, and with a little bit of hacking and configuration, you can make it your own.

To find a template, navigate to Hugo Themes and pick one that suits your purpose.

For the rest of this article, I’ll be using stack, but the advice is general enough for most themes you’ll find.

Try to find which versions of Hugo are supported; different templates have different requirements.

Git Management

cd into the project folder and initialize a git repo:

git init

Now to pull the theme as a git submodule:

austin@MSI:~/newsite$ git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/stack
Cloning into '/home/austin/newsite/themes/stack'...
remote: Enumerating objects: 5302, done.
remote: Counting objects: 100% (24/24), done.
remote: Compressing objects: 100% (21/21), done.
remote: Total 5302 (delta 14), reused 3 (delta 3), pack-reused 5278 (from 2)
Receiving objects: 100% (5302/5302), 1.27 MiB | 5.93 MiB/s, done.
Resolving deltas: 100% (3417/3417), done.

Specify the theme in hugo.toml:

echo "theme = 'stack'" >> hugo.toml

and run your site locally:

hugo server

Visit localhost:1313 to see the result.

Configure

As you can see, it’s a bit… je ne sais quoi.

Bland.

So we’re going to make it pop. Assuming you’re using a theme, you’ll be able to change how it is configured through the hugo.toml file in your project. And this will have major repercussions on how your site gets rendered.

I recommend changing your config to use YAML by renaming it to hugo.yaml and modifying the config values.

It should be easy. You’ll end up with something like:

baseURL: https://example.org/
languageCode: en-us
title: My Cool Site
theme: My Cool Theme

Now to customize your site to your heart’s content. You can add custom pages, layouts, widgets, a logo, a favicon, and everything else a legitimate website needs.

This will be left as an exercise to the reader. You don’t want to copy me, you want to make something that’s at least a little bit unique right?

Last but not least, add some low-quality slop content. I did that like so:

cp -r PersonalSite/content/posts/ newsite/content/

The Result

After configuring, hacking some custom markup and styles, and dropping some content in, you’ll reach something like this:

This is nice… too nice.

Okay, what the hell, this is better than my current website.

I’m kinda mad about this. I spent a bunch of time and effort customizing my site until it was truly mine, and then I download a random theme that’s better after an hour of hacking. While writing a shitpost.

In unrelated news, you may see a major UI overhaul on my site soon.

A Work In Progress

Ok, I’m exaggerating. In fact, there are a lot of issues: the search doesn’t work, there’s no about page, and clicking on a tag or category somehow caused the server to crash.

But we’ve proven it’s possible. And with a little more trial-and-error, this could be a full-fledged, high-quality static site.

Next Steps: Deployment

We now have a working website that compiles to static assets. No servers. No hosting fees. No problem.

But now we need to host these assets somewhere, and preferably somewhere that can automate some of the trivial tasks, like building the assets and deploying them.

Next we’ll be discussing various free-tier services that can get the job done.