Hosting Our Jekyll Site on Cloudflare Pages

Once we have a couple of posts ready, we should publish our blog. This post describes how to host a blog for free on Cloudflare Pages.

Cloudflare Pages is a JAMstack platform to deploy websites quickly from a Git repository. Our site will be hosted for free on Cloudflare’s network, which is one of the fastest of the world. There are many alternatives though, among them Github Pages. One advantage of Cloudflare against Github is that with Cloudflare, we can use any plugins we need, whereas, with Github, we can only use a select few. The documentation is quite detailed, the Jekyll-specific guide is here.

There are three ways to set up a project:

Connect a git provider (Github or Gitlab) to Cloudflare Pages

Advantages:

Since the source of the site is stored online, we can edit it from anywhere: add new posts, edit or delete them, fix typos, etc.
The site is rebuilt/redeployed automatically after every push to the git provider

Disadvantages:

Might be a bit more work to set up initially

Build the site locally, then deploy the assets to Pages manually

Advantages:

We can inspect the built assets locally before uploading them

Disadvantages:

After the build step, there is a separate upload step in the workflow

Build the site locally, then deploy the assets to Pages with Wrangler

It has the same advantages/disadvantages as the manual upload, but this one can be scripted.

Setup

I’ll use the first method (connecting a git provider), since in exchange of a bit more setup, I can initiate the build/deploy with a single push to the git provider.

For this method to work, we’ll need a Github or Gitlab account and a repository with our site’s data. There are detailed instructions on both providers’ sites about this step.

Once our repository is ready, we can connect it to Cloudflare Pages, and then set the build options. Here I had to deviate a bit from the Cloudflare docs: my site uses postcss, for it to work, I had to add an environment variable to the Pages project’s settings:

JEKYLL_ENV=production

The rest of the options are the same as in the docs:

production branch: main
build command: jekyll build
build output directory: /_site

Now we can begin the first deployment. Cloudflare will install Jekyll and the dependencies, build the site and then deploy it to its edge network, we can follow every step of the process on the dashboard. Once deployed, we get a unique URL for this specific deployment, and we’ll also have a URL for the project which will always point to the current deployment. These are all *.pages.dev URLs.

Custom domain

We can also add a custom domain for our site. Since I host my DNS for this site on Cloudflare as well, it’s as easy as adding the domain name to the Pages site’s settings. I also added a page rule to redirect the www subdomain to the apex domain, and with this, setting up the Cloudflare Pages site is complete.

Thanks for reading! If you have any comments, additions, or corrections, feel free to reach me via e-mail.