First steps using Cloudflare Pages

jldec.me

My personal blog, jldec.me, is hosted on Netlify. Whenever I push markdown to GitHub, Netlify runs a build and publishes the HTML.

Cloudflare recently announced a similar offering called Cloudflare Pages. I was lucky enough to be given access to the Beta.

Unlike Netlify, Cloudflare Pages does not meter request traffic. This opens the door for use-cases like CDN hosting of open source ESM modules 🤔.

Cloudflare Pages (Beta)

This is a walkthrough of setting up jldec.eu, a copy of jldec.me, on Cloudflare Pages.

If you have access to Cloudflare Pages, you will see this button when you login to Cloudflare.

The Pages button opens your Pages projects -- of which there are none at first -- and a button to Create a project.

This opens the GitHub form for granting repo access to the 'Cloudflare Pages' GitHub app. (Look for it later in your GitHub Settings to add more repos, or to revoke access.)

Back on Cloudflare, you can choose the repo for your new Cloudflare Pages project.

cloudflare-pages-test is a copy of my markdown source repo from jldec.me.

In the configuratiom form, I provided branch name, build command, and output directory.

The project name defaults to the repo name.

Submitting the form, triggers the first build and shows the log.

The project page also has a section for configuring custom domains. I used my own cloudflare-hosted domain jldec.eu. The docs can be a little confusing here. My CNAME points to cloudflare-pages-test.pages.dev not custom.pages.dev.

You can visit the deployed site at jldec.eu. 🇪🇺

Subsequent commits to this GitHub repo will trigger a fresh build and re-deploy.

GitHub Pages

For comparison, I set up jldec.uk, another copy of jldec.me using GitHub Pages.

First I created a new jldec.uk repo to host the GitHub Pages site. Since the output includes javascript bundles, fonts, etc., I prefer to keep it separate from the source.

I pushed the first generated website to this repo manually, using the output of a local build. The empty .nojekyll file is important to avoid a Jekyll build on GitHub.

Next I configured GitHub Pages in the repo settings (...looks familiar 😃)

You can visit the deployed site at jldec.uk. 🇬🇧

Finally I set up GitHub Actions to auto-build and auto-deploy the website when the source changes. This is triggered on push, does a checkout of both repos, and commits the new generated output, only when there are actual changes.

on:
  push:
    branches: [ main ]
  workflow_dispatch:
jobs:
  generate:
    runs-on: ubuntu-latest
    env:
      JLDEC_UK: TRUE

    steps:
    - name: checkout source repo
      uses: actions/checkout@v2

    - name: checkout destination repo under ./out
      uses: actions/checkout@v2
      with:
        repository: jldec/jldec.uk
        token: ${{ secrets.GH_TOKEN }}
        path: out

    - name: generate output
      run: |
        npm ci
        rm -r out/*
        npm run generate
        cd out
        git config user.email "[e-mail]"
        git config user.name "cloudflare-pages-test generate action"
        git status
        git add -A
        if ! git diff-index --quiet HEAD ; then git commit -m 'https://github.com/jldec/cloudflare-pages-test/actions/runs/${{ github.run_id }}' && git push ; fi
        echo done

Now every push triggers a new build and re-deploy.

Preserving the HTML site in git is useful for all kinds of reasons. E.g. here is part of a diff from a recent commit.

Conclusions

The developer experience of hosting a site with CloudFlare Pages is very similar to Netlify.

The Cloudflare Pages Beta does not yet support redirects and functions, but those are expected with the integration of Cloudflare Workers.

Automating builds and deploys onto GitHub Pages is more work, and requires knowledge of GitHub Actions if you're not using Jekyll. There are other gotchas with GitHub Actions if you want to support concurrent builds or preview builds.

The performance of all 3 platforms is excellent since they all serve static files from a CDN

🏃‍♀️