This post describes how I got this website up and running using Hugo, on cloudflare pages.
Install Hugo
To install hugo, follow the instructions on the hugo website. If you’re on a mac (and have homebrew installed) the simplest way is:
brew install hugo
With hugo installed the next stage is to create the new site, which is done locally. The following commands will create the framework for the new website.
mkdir newsite
cd newsite
hugo new site .
Initialise Git Repos
The next stage is to initialise the directory containing the site framework as a git repository:
git init
Create a first post
With the site framework created, a first post can be created like this:
cd newsite
hugo new posts/first-post.md
This will create a new file at newsite/posts/first-post.md which looks like this:
---
title: "First Post"
date: 2023-01-30T21:52:51Z
draft: true
---
Hugo Themes
Hugo uses themes. There are plenty to choose from and a complete list can be found here
One of the easiest ways to install a theme is by downloading it as a git submodule:
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)
The hugo configuration will need to be updated to included the name of the selected theme.
echo "theme = 'hugo-profile'" >> config.toml
Run a local hugo test server
You can run a local server which is really useful for previewing posts or making other site changes, as they are relfected immediately.
hugo server -D
The server will be available at http://localhost:1313 and will display the hugo site.
Add remote GitHub Repository
This step assumes you’ve created a new (public) repository on github which will be used to host the site. The remote repository will need to be configured, and the contents pushed.
git remote add origin [email protected]:edrandall-dev/www-edrandall-uk.git
git push --set-upstream origin main
Configure Cloudflare Pages
Create a cloudflare pages account. Go to “pages” and click “create a project”
Follow the steps on the cloudflare site to connect to the github repo which you created earlier. The site will then be built and hosted on cloudflare pages.
Using a specific Hugo version
To use a specific version of Hugo, create the HUGO_VERSION environment variable in your Pages project > Settings > Environment variables. Set the value as the Hugo version you want to specify.
For example, HUGO_VERSION: 0.106.0.