DEV Community

Cover image for First steps using Cloudflare Pages
jldec
jldec

Posted on • Updated on • Originally published at jldec.me

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.

Cloudflare Pages Beta button on dashboard

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

Pages - 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.)

Authorize Cloudflare Pages app on GitHub

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.

Select repo for the Cloudflare Pages project

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

The project name defaults to the repo name.

Configure the build command and output directory

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

First build and deploy showing 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.

Cloudflare Pages custom domain

You can visit the deployed site at jldec.eu. πŸ‡ͺπŸ‡Ί

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

More deployments

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.

GitHub Pages repo

Next I configured GitHub Pages in the repo settings (...looks familiar πŸ˜ƒ)

GitHub Pages settings

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 "jldec@ciaosoft.com"
        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
Enter fullscreen mode Exit fullscreen mode

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

GitHub Pages builds using GitHub Actions

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.

GitHub Pages diff

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

πŸƒβ€β™€οΈ

Top comments (0)