How to deploy Jekyll + al-folio to Cloudflare Pages with GitHub Actions
I wanted to host my al-folio site on Cloudflare Pages, but most guides I found were based on an older GitHub Action that has since been deprecated. This post shows how to do it with Cloudflare’s wrangler which is the actively supported flow.
Why Cloudflare pages over GitHub pages
- I liked having branch specific previews, you can see what changes a PR would make though a web url
- The domain support is easier since my DNS is already Cloudflare
- Easier integration with cloudflares secuirty features
Cloudflare setup
This workflow does not rely on Cloudflare Pages to build the site from your repository. Instead, GitHub Actions builds the Jekyll site and uploads the generated _site directory to Cloudflare Pages.
The Cloudflare side is:
- Create a Cloudflare Pages project, import it from GitHub.
- Pause automatic deployments in Cloudflare Pages, since GitHub Actions is the build system here. (Settings -> Branch Control)
- Create an API token that can deploy to Pages.
- Copy your Cloudflare account ID.
- Add these as GitHub repository secrets:
CLOUDFLARE_API_TOKEN
CLOUDFLARE_ACCOUNT_ID
The project name in Cloudflare must match the name used in the workflow.
GitHub Actions workflow
The deployment workflow can be seen in .github/workflows/deploy.yml. It does four things:
- checks out the repository
- installs the Ruby and Python dependencies needed for
al-folio - builds the site with Jekyll into
_site - deploys
_siteto Cloudflare Pages using Wrangler
The key step is:
- name: Deploy
uses: cloudflare/wrangler-action@v3
with:
apiToken: $
accountId: $
command: pages deploy _site --project-name=jasonmishi --branch=$ --commit-hash=$
The important part is the command:
-
_siteis the built Jekyll output -
--project-name=jasonmishimust match your Cloudflare Pages project -
--branchmakes branch deployments traceable -
--commit-hashmakes the deployment map cleanly back to GitHub
Conclusion
Now when you trigger the workflow your al-folio site would automatically be deployed through CloudFlare Pages. In summary: pause Cloudflare’s automatic deployment, let GitHub Actions build the site, and have Wrangler push the final _site artifact to Cloudflare Pages.