Alpha Theme
From Zero with Zero
Cloudflare Pages

Deploy to Cloudflare Pages

Written by oxypteros

At the end of this part, we’re about to reach one of the biggest milestones for any web page or app: the moment it becomes public.

But before we get there, let’s take one last short detour and get to know the Hugo server a bit better.

Hugo Server Errors

If you’ve been following along with the guide, your setup should now look like this:

  • The Hugo server is running
  • VS Code is open, with the hugo.toml file in view

Earlier, we changed the title in hugo.toml to something more personal. The instructions were to only change the value between the quotes. Let’s now intentionally create a small mistake to see how Hugo handles errors.

Try deleting the closing quote in the title line like this:

 title = "My Blog

Save the file (Ctrl+S) and check your browser.
You’ll now see an error message and your site won’t load.
Back in the terminal, you’ll also see a Hugo error, something like: unmarshal failed: toml: basic strings cannot have new lines
This is Hugo telling you:

“I can’t build the site because something’s wrong with the .toml file. Specifically, your string is broken.”

And it’s right! In our case, the issue is clear: the missing quote. Once you fix it and save the file again, Hugo will rebuild your site automatically, and everything will be back to normal.

Resolve errors

No matter how careful you are, you’ll definitely run into errors while working with Hugo. It’s part of the process and totally normal.

The good news?

If you’re just working on your site’s content (and not editing the Alpha theme files), most errors will be simple and easy to fix, like a missing quote or comma.

With a bit of practice, you’ll reach a point where you can spot and fix mistakes instinctively, sometimes even before they happen.

Until then, here are a few things to keep in mind:

  • In 99.9% of cases, we caused the error, it’s not Hugo’s fault. And that’s good news, because if we caused it, we can fix it.
  • Use Undo (Ctrl+Z) in VS Code to roll back your last change, that alone often fixes things, if not try to restart the hugo server (sometimes it can stuck).
  • If you’re stuck, don’t stress! You can always: Ask me for help from my contact page or turn to the awesome Hugo Community

You’ve got this. Errors are just little lessons in disguise.

Deploy to Cloudflare Pages

Make sure the error we just created is resolved, stop the Hugo server, and let’s move on to the main course, putting your site on the web!

Steps to Deploy

  1. Log in to Cloudflare Pages, you should land on the Get started with Workers & Pages screen.
  2. Click the Pages tab.
  3. Under Create by importing an existing Git repository, click Connect to Git.
  4. On the Deploy a site from your account screen, click Connect GitHub.
  5. Give the necessary permissions (Install & Authorize).
  6. You’ll be redirected back. Now select the repository we created earlier: alpha-starter.
  7. Click Begin Setup.

Change the values:

  • Project name: enter your desired project name, ideally it should match your site’s name.
    Note: The project name must be unique because it becomes the first part of your site’s URL. Use only lowercase letters (a–z), numbers (0–9), and dashes (-).
  • Framework preset, choose Hugo from the list.
  • Build command, enter: hugo --gc --minify

Scroll down to Environment variables (advanced) and click Add Variable.

  • Set VARIABLE_NAME to: HUGO_VERSION
  • Set Value to: 0.147.8

Take a deep breath and finally click Save and Deploy.

Sit back and wait until Cloudflare:

  • Clone your GitHub repository
  • Build your site using the instructions you provided
  • Deploy it to the web

Once you see the message: Success! Your project is deployed to Region: Earth click Continue to Project.

On the Production card, press Visit to open your live site.

If you see “This site can’t be reached,” give it a minute or two, then hit reload. Your site should appear shortly.

Now anyone from the link https://[your-project-name].pages.dev can view your site.

Congratulation, you did it!

But before we celebrate, there’s one last step:
Copy the URL of your site (https://[your-project-name].pages.dev),
and in VS Code, update the baseURL in your hugo.toml file.

baseURL = "https://[your-project-name].pages.dev"

Save the file (Ctrl+S).

At the very beginning of the Get Started: From zero with zero, I promised this guide would help you build a personal website.
And we did it. You now have a live website.

But… is it personal yet?
Not quite.

Right now, it’s just a blank Alpha theme, clean, fast, but soulless.

In the next part we will start fixing that.
It’s time to give your site essence, a story, a soul.
It’s time to create your first piece of content!
Let’s go…