How I Made This Site

Table of Contents

This site is built with Hugo and served on Cloudflare pages.

I’ve tried other platforms like Wordpress and Ghost, but ultimately landed on the current iteration. Don’t get me wrong, Wordpress and Ghost are great for many types of content, Ghost being the better option of the two (in my opinion), but I just dont need all of the bloat that comes with either of those. Wordpress pagespeed scores are horrendus compared to a static site generator like Hugo. Google’s Pagespeed Insights give this site a 100 on performance, accessibility, best practices and SEO. Which is phenomenal for users and developers alike.

What about the admin panel? Do you need one? Well, that depends on what you need to do. If you just need a blog, a portfolio, links page, or any other site that doesnt require a ton of pages and integrations, you should use something like Hugo. On the other hand, if you plan on having an ecommerce website or business website, you should go with something more manageable like Wordpress. Though, thats not to say that it can’t be done on Hugo. It’s just a little more difficult to get things up and running.

Updates and maintenence is a whole different story. Hugo needs very little maintenence, if any at all. Wordpress however, requires tons of consistent updates (which could break your site) and lots of maintenence to keep everything running smoothly. Ghost is the same. Which is why you should only use those if you absolutely need to.

Now, onto how I actually built this site. I’ll take you step by step through how I installed, configured, and published the site.

Prerequisites

Some knowledge of Linux commands and CLI
A GitHub Account
A Cloudflare Account
git – sudo apt install git

Installing Hugo

You can install Hugo via your Linux distro’s package manager or Snap. For example:

Ubuntu/Debian – sudo apt install hugo
Arch Linux – sudo pacman -S hugo
Snap (any distro) – sudo snap install hugo
Homebrew (macOS/Linux) – brew install hugo

After installing, verify with:

hugo version

This should show the installed Hugo version (e.g. vX.Y.Z)

Creating a New Site

1. Open a terminal and run:

hugo new site mySiteName

You can replace mySiteName with whatever you want to call your site.

This creates a folder /mySiteName with the default Hugo directory structure (configuration files, /content, /themes, etc.) The new site will have the correct structure but no content or theme yet.

2. Change to your new sites directory

cd mySiteName

Now you have a fresh Hugo project ready for content and theming.

Installing a Theme

Check out the themes for Hugo here and find a theme you like or create one yourself. Once you pick one, add it to your site:

Clone the theme: for example, to use the “Ananke” theme, run:

git clone https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

(You can also use git submodule add) This downloads the theme into your site’s /themes folder.

Activate the theme: edit your config.toml (or config.yaml) and add the theme name, e.g.:

echo 'theme = "ananke"' >> config.toml

This tells Hugo to use that theme by writing theme = "ananke" in your config.toml with echo

Creating Content

Use Hugo’s CLI to create content pages and posts. For example:

For a new post:

hugo new posts/my-first-post.md

This generates a new markdown file at content/posts/my-first-post.md with front matter (title, date, draft status). Edit this file to write your post.

For a new page:

hugo new about.md

This creates content/about.md. You can similarly create other pages or sections by running hugo new with the desired path.

Serving the site locally

Run Hugo’s built-in server to preview your site locally:

hugo server -D

This starts a web server (by default at http://localhost:1313/) and watches for file changes. The -D flag includes any draft content, which is likely what your new post is. Open the shown URL in your browser to view your site. The server will automatically rebuild the site as you edit files. Press Ctrl+C in the terminal to stop the server.

Pushing to GitHub

With your site ready locally, push it to GitHub so Cloudflare Pages can build it. In your site directory:

Initialize and commit:

git init -b main
git add -A .
git commit -m "Initial commit"

Create a GitHub repo: On GitHub, make a new empty repository (e.g. your-username/your-repo). Back in your terminal, add it as the remote and push:

git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

This publishes your site’s files to GitHub. (Replace the URL with your repository’s URL.)

Make sure the repo’s default branch is main and that all your site files (including the theme in /themes) are pushed. This sets up GitHub as the “source of truth” for Cloudflare.

Deploying to Cloudflare Pages

Create a Pages project: Log in to the Cloudflare dashboard and create a new Pages project. Connect it to your GitHub account and select the repository you just pushed.
Configure the build: Choose Hugo as the framework. Cloudflare Pages will auto-fill the build settings: the Build command is hugo and the Build output directory is public. (These defaults work for most sites.)
Optional settings: If you need a specific Hugo version, set an environment variable HUGO_VERSION in the Pages project settings (e.g. 0.115.4). You can also configure other environment vars or build flags as needed.
Deploy: After saving the configuration, Cloudflare Pages will clone your GitHub repo and run the build. It will install Hugo, execute hugo, and then serve the generated /public directory. Every time you push new code to the main branch, Cloudflare Pages automatically rebuilds and deploys your site. Your site will be published to a your-project.pages.dev subdomain (and you’ll get preview URLs for pull requests, too). You can also set a custom domain in the pages settings.

🎉Congrats!🎉 You’re now live! Any future changes pushed to GitHub will trigger an automatic rebuild on Cloudflare Pages. I hope this guide helped you on getting everything setup and running. If you have any issues or concerns, please leave a comment below.