Build an Automated Personal Blog with Hugo + Cloudflare Pages

Want to create a lightning-fast website that automatically updates every time you git push? This article will guide you through building a personal blog using the Hugo static site generator combined with Cloudflare Pages automated deployment service.

🛠 Why This Combination?

Originally, I used GitHub Pages for hosting, but since the repository must be public, I decided to switch to Cloudflare Pages connected to my GitHub repo. The setup was simpler than expected, and after each git push, GitHub Actions automatically runs and updates the website, ensuring everything works properly.

Step 1: Set Up Hugo Locally

First, we need to create the website skeleton on your computer and choose a theme.

1. Install Hugo

Run the installation command based on your operating system:

• macOS (Homebrew): brew install hugo
• Windows (PowerShell): winget install Hugo.Hugo.Extended
• Verify installation: Open terminal and type hugo version to confirm you see the version number.

2. Create a New Project

Open your terminal and enter the following commands to create your site folder:

hugo new site my-blog
cd my-blog

3. Add a Theme

Go to Hugo Themes to browse themes. Here we’ll use the Clean White theme as an example:

git init
git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite

Tip: It’s recommended to fork the theme to your own GitHub, then add submodule with your forked repo. This makes modifications easier.

At this point, your my-blog folder should contain a themes folder with the hugo-theme-cleanwhite folder inside.

4. Basic Configuration and Preview

I recommend directly referencing the content folder structure in /themes/hugo-theme-cleanwhite/exampleSite, and copying hugo.toml to overwrite the one in /my-blog before editing the content.

Run hugo server -D, then visit http://localhost:1313 to preview your site.

Step 2: Push Your Project to GitHub

1. Create a new Repository on GitHub.
2. Create a .gitignore file with /public as its content.
3. Run Git commands to push your code to the cloud:

git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin [your repository URL]
git push -u origin main

Step 3: Connect Cloudflare Pages for Deployment

1. Create a Pages Project: Log in to Cloudflare, go to Workers & Pages > Create application > Pages, and select Connect to Git.
2. Select Repository: Connect your GitHub account and select the project you just created.
3. Build Settings:
   • Framework preset: Select Hugo
   • Build command: hugo --gc --minify
   • Build output directory: public
4. Complete Deployment: Click Save and Deploy, and your site is now live! After deployment, you can preview it using the default domain.

💡 Summary

You’ve now created your personal website. After purchasing a domain, simply add your domain in the Custom domains tab of Cloudflare Pages, and Cloudflare will automatically handle all DNS and SSL settings for you.

• Next Post →