Hosting hugo blog on cloudfare for free

recently I had tested to deploy Hugo site on cloudfare pages,
the process is much like hugo netlify deplyment,
the web page speed is pretty good,
the build process is straighforward, and it’s free?:

cloudfare page is:

Developer-focused with effortless Git integration. you can write/update your blogs locally, and then git push to github, the rest actions(fetch the update, recompile the project, deploy)is automatically done by cloudfare page.
Advanced collaboration built-in with unlimited seats. you can invite your teams/friends/family to cooperate on on your projects
Unmatched performance on Cloudflare’s edge network. This is what cloudfare is for–CDN acceleration. The hosted hugo project is static, it is prefect condidate for cdn acceleration.
Dynamic functionality with Cloudflare Workers. You can utilize Cloudfare’s workers to do some dynamic jobs or tasks to build a dynamic site.

to register an account, please visit cloudfare pages. After registration, visit your email to finish the email verification.

create a new hugo project on GitHub

Hugo quick start

please follow instruction on Hugo Quick Start Guide

and this time, I created a new hugo project repo on Github at https://github.com/guanyc/hugo-one-click

it is a hugo project with ananke theme and one page.

create cloudfare page

link github

let’s create cloudfare page, now the cloudfare Page looks like this

click the Pages link on the right,

click the Create a Project Button

connect your github connet

authorize your github repo to cloudfare

select “only select repositories”, and here choose your hugo repo to be connected with cloudfare, then clikc “install and Authorize”

github will ask your password if necessary

verify your github account and repo is correct again, then click “Begin Setep”

cloudfare hugo settings

build settings,

select “Hugo” for framework preset, “hugo” for build command

click “Add variable” below Environment variables(advanced), and add “HUGO_VERSION” with value 0.81.0（or your version, should be recent hugo + extended version, im using 0.83.1）, then start build.

build process

you can see the build logs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
10:26:05.838	Initializing build environment. This may take up to a few minutes to complete
10:26:45.184	Success: Finished initializing build environment
10:26:45.184	Cloning repository...
10:26:47.785	Success: Finished cloning repository files
10:26:48.064	Installing dependencies
10:26:48.087	Python version set to 2.7
10:26:51.727	v12.18.0 is already installed.
10:26:52.115	Now using node v12.18.0 (npm v6.14.4)
10:26:52.137	Started restoring cached build plugins
10:26:52.151	Finished restoring cached build plugins
10:26:52.545	Attempting ruby version 2.7.1, read from environment
10:26:53.948	Using ruby version 2.7.1
10:26:54.291	Using PHP version 5.6
10:26:54.321	5.2 is already installed.
10:26:54.324	Using Swift version 5.2
10:26:54.324	Installing Hugo v0.83.1
10:26:55.701	hugo v0.83.1-5AFE0A57+extended linux/amd64 BuildDate=2021-05-02T14:38:05Z VendorInfo=gohugoio
10:26:55.702	Started restoring cached go cache
10:26:55.704	Finished restoring cached go cache
10:26:56.231	go version go1.14.4 linux/amd64
10:26:56.235	go version go1.14.4 linux/amd64
10:26:56.245	Installing missing commands
10:26:56.245	Verify run directory
10:26:56.245	Executing user command: hugo
10:26:56.282	Start building sites …
10:26:56.357
10:26:56.357	                   | EN  
10:26:56.357	-------------------+-----
10:26:56.357	  Pages            | 10  
10:26:56.357	  Paginator pages  |  0  
10:26:56.357	  Non-page files   |  0  
10:26:56.357	  Static files     |  1  
10:26:56.357	  Processed images |  0  
10:26:56.357	  Aliases          |  1  
10:26:56.357	  Sitemaps         |  1  
10:26:56.357	  Cleaned          |  0  
10:26:56.357
10:26:56.357	Total in 91 ms
10:26:56.360	Finished
10:26:56.360	Validating asset output directory
10:26:56.750	Deploying your site to Cloudflare's global network...
10:26:59.817	Success: Your site was deployed!

build logs, now click “Continue to project”

your pages landing page, click the sub domain link to visit your pages

your pages

try to add another post

git push your second second post and see the pages.

sum up

In all, Cloudfare is great for hosting static pages, git integration for automatic deploy actions, the speed is really good. and it is free(500 build a month is enough for normal users). Please add the HUGO_VERSION to you local dev version, otherwise couldfare will fetch hugo 0.54.0 version, which would probably cause build failure.

I suggest Hugo static generator framework, you can write your post use Markdown, and manage versions with GIT, leaving the rest to Github and Cloudfare/Netlify/Others, all are free, which are sufficitent for beginning blogs/resume/small websites.

Contents