Deploying a website with Cloudflare & Hugo

Deploy Early, Deploy Often

#

There are a lot of things I want to document on this website, like my Arch setup, how I work with WSL, maybe even some fun stuff with how I work with the terminal and NeoVim for coding. But unfortunately, a lot of this was going on when I was still figuring things out so there is little to no documentation on any of that (pro tip: document as early as possible. Even if you don’t know what you’re doing). So while I rectify that lapse in judgement, I would like to focus on the platform you are reading this on, my website. Specifically, how it’s being hosted (we will tackle the tools I used to build the site another time). So… As you can tell by the title, I use Cloudflare . Why? Because I got my domain on Cloudflare. Oh, and also, it’s free. Free is good. Also, why am I covering deployment before even talking about how I built it? Well, I shall refer you to this post by Matt Rickard . So let’s get into it.

Now, I assume you already have the following:

1. A domain name (if you don’t, you can get one from Cloudflare)
2. An account on Cloudflare (it’s free real estate)
3. A Hugo website hosted on Github (any basic webpage will do. HTML’s good. The repo can also be private)

So, for deploying a website on Cloudflare, you can use either pages or workers . We will cover both of them today as using Pages is easier (imo), but Workers is the recommended way to go for new projects (says Cloudflare).

Yellow Pages

#

1. Navigate to the Cloudflare dashboard and find Compute (Workers) on the sidebar.

2. Select Create, then Pages, then Import an existing Git repository.

3. Follow the instructions to connect your Github account to Cloudflare, and select the repository you want to deploy.
4. After that, in the build settings, you can select the build tool or static site generator that you used to build your site (this is a good opportunity to take a look at the more widely supported list of tools you can use. I used Hugo ). If you’re lost, Cloudflare has some docs on how to get the supported frameworks set up.

5. You’re good to go. It should be deployed, you should be able to see the build process. Then go to the Custom domains tab, and add your domain by following the instructions.

The 9-5 Way

#

Now, onto the recommended way. This is a bit more involved, and unfortunately, a bit more specific as well. So for this part, I will just be going through how I got it set up for my Hugo site (It’s honestly pretty great, give it a shot). Okay now.

1. Same as before.
2. Select Create, but this time select Workers, then Import a repository.
3. Same as before.
4. Set the project name, leave the rest at the default. DO NOT hit Create and deploy yet.
5. Create the wrangler.toml file.
6. Create the build.sh script. Make sure it is executable (chmod +x build.sh).
7. Add these files to the repo.
8. Now hit Create and deploy.

The wrangler.toml File

#

name = "cloudflare-worker-name" # Name of the worker
compatibility_date = "date_of_config" # Change the date whenever you change the config

[build]
command = "./build.sh" # build command (we will use script)

[assets]
directory = "./public" # directory to serve site
not_found_handling = "404-page" # return 404 page when file not found

The build.sh Script

#

#!/usr/bin/env bash
main() {
	HUGO_VERSION={SOME_VERSION}

	export TZ={timezone}

	# Install Hugo
	echo "Installing Hugo v${HUGO_VERSION}..."
	curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz
	tar -xf "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
	cp hugo /opt/buildhome
	rm LICENSE README.md hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz

	# Verify Dependencies
	echo "Verifying dependencies..."
	echo Go: "$(go version)"
	echo Hugo: "$(hugo version)"
	echo Node.js: "$(node --version)"

	# Clone themes repository
	echo "Cloning submodules..."
	git submodule update --init --recursive
	git config core.quotepath false

	# Build site
	echo "Building static site..."
	hugo --gc --minify
}

set -euo pipefail
main "$@"

Congrats! You are done. BTW, the Workers setup I have here is referenced from the Hugo repo on Github here .

It’s 1 AM, time to wrap up

#

So here’s the basics of how I got it running. I currently have both deployed (unsure for how long), but you can check them out below:

• Pages Deployment
• Worker Deployment

And as you can see, they are both exactly the same. So pick your poison, and stick with it. I think I will be sticking with the Workers way, there are more steps involved, and I will have to maintain the build script, and wrangler configuration, which means more liability on my part, but it’s the recommended way to go. And Cloudflare made this, so I will follow their recommendations on this. That’s it for now. I will cover Hugo another time, and maybe make this a series of posts so that it would be easier to follow along (Hopefully I remember to do it).