Deploying a Qwik City application to Cloudflare Pages from GitHub Actions
5 min readA quick guide on how to deploy a Qwik-City project to Cloudflare Pages from GitHub Actions.
![An image of the Qwik, GitHub Actions, and Cloudflare logos.](/_astro/hero.nqyY-d9k_Z14h2Dl.webp)
Introduction
There are times when we want to be able to not think about deploying our applications and services like Cloudflare Pages have direct integrations with GitHub to automagically deploy our applications when we push to a specific branch. That is great and all but what if we want more fine grained control over that process? What if we only want a deployment to happen if other steps in our CI succeed (i.e. linting, test, etc)? In this post we will look at how to deploy a Qwik-City project to Cloudflare Pages via our own workflow on GitHub Actions.
Getting what we need from Cloudflare
If you do not have a Cloudflare account you can sign up for one here. Once you have an account we can create our API token. Find the "My Profile"
tab in the top right corner of the dashboard and click on it. Then click on "API Tokens"
in the left column. Then click on "Create Token"
in the right column.
![Screenshot of the Cloudflare API Tokens Dashboard.](/_astro/cloudflare-api-tokens.hB0bTUaP_1Op51R.webp)
At the bottom of the "Create Token"
page you will find a "Custom Token"
option. That is what we will need to choose to programmatically deploy to Cloudflare Pages from GitHub Actions.
![Screenshot of the Cloudflare API Tokens Dashboard for creating a custom token.](/_astro/cloudflare-custom-token.OjZ9JWyg_Z2d1NJM.webp)
Name your token and give it the following permissions:
- Account
- Cloudflare Pages
- Edit
If you have multiple accounts and want to scope this token to a specific account you can do that here as well. Select the account you want to scope the token too in the
"Account Resources"
section.
![Screenshot of creating a custom token.](/_astro/cloudflare-create-custom-token.Tb_t8R1u_1LUUzb.webp)
After you have your API token we need to setup a Direct Upload project via the Cloudflare Pages Dashboard. Whatever you name your project will be what we use for the projectName
in the GitHub Actions workflow.
![Screenshot of the Cloudflare Workers & Pages Overview Dashboard.](/_astro/cloudflare-begin-direct-upload.9Xq4Lu5a_ZIAE9L.webp)
![Screenshot of creating a new Direct Upload project with Cloudflare Pages.](/_astro/cloudflare-project-name.JtfNR2au_Z2ogDzz.webp)
Once the project has been created we can now navigate back to the Cloudflare Workers & Pages Overview Dashboard and retrieve our Cloudflare Account ID. You will find it in the right hand column of the overview dashboard. This will be used in the GitHub Actions workflow.
We should now have the three things we need from Cloudflare:
- Cloudflare Account ID
- Cloudflare API Token
- Cloudflare Pages Project Name
Setting up GitHub
If you do not have a GitHub account you can sign up for one here. We can now create a new repository here. It should be an empty repository with no README, .gitignore, or license. You will be dropped off at a screen like the one below. Make sure you copy the following commands to use locally:
git remote add origin [email protected]:<username>/<repository-name>.git
git push -u origin production # this will be "main"
![Screenshot of empty GitHub repository page with commands.](/_astro/github-new-repo-created.9RPjnFlo_Z68mu1.webp)
Once the repository has been created we can add the following secrets to the repository:
CLOUDFLARE_ACCOUNT_ID
CLOUDFLARE_API_TOKEN
To do that we will need to go to:
Settings > Secrets & Variables > Actions > New repository secret
![Screenshot of the GitHub repository settings page for adding new repository secrets.](/_astro/github-add-secrets.-zPzzp5t_Z1FdvNA.webp)
Setting up Qwik City
We can now create a new qwik-city
project:
pnpm create qwik@latest
Select the basic app option that will give us a wokring template with qwik-city
integrated into it. Once the project has been created we can add the Cloudflare Pages integration:
pnpm run qwik add cloudflare-pages
Setting up GitHub Actions
To add GitHub Actions to our repository we will need to create a new file in the .github/workflows
directory called publish.yml
. We can then add the following workflow to the file:
mkdir -p .github/workflows
touch .github/workflows/publish.yml
Cloudflare actually has and maintains there own GitHub Action for deploying to Cloudflare Pages. We will be using that in our workflow. You can find the GitHub Action here.
name: Publish
on:
push:
branches:
- production # this will be "main"
- staging # development branch
pull_request:
branches:
- staging
types:
- edited
- opened
- synchronize
jobs:
publish:
name: Publish to Cloudflare Pages
# This is very important don't miss it!
permissions:
contents: read
deployments: write
runs-on: ubuntu-latest
strategy:
fail-fast: true
matrix:
node-version: [18.x]
pnpm-version: [8.x]
timeout-minutes: 10
steps:
- uses: styfle/[email protected]
with:
access_token: ${{ github.token }}
- uses: actions/checkout@v3
with:
fetch-depth: 2
- uses: pnpm/[email protected]
with:
version: ${{ matrix.pnpm-version }}
- uses: actions/setup-node@v3
with:
cache: 'pnpm'
node-version: ${{ matrix.node-version }}
- run: pnpm install --frozen-lockfile
- run: pnpm run build
env:
NODE_ENV: production
- uses: cloudflare/[email protected]
with:
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
directory: dist
gitHubToken: ${{ github.token }}
projectName: qwik-blog-test # your project name
Pushing to GitHub
We can now add the GitHub remotes and push to GitHub:
git remote add origin [email protected]:<username>/<repository-name>.git
git push -u origin production # this will be "main"
After pushing to GitHub we can either navigate to the repository on GitHub and click on the "Actions"
tab or we can navigate to our Cloudflare Pages Dashboard and see the deployment in progress. Once the deployment has finished we can click on the "Visit Site"
button in the Cloudflare Pages Dashboard to see our application live.
![Screenshot of the detailed deployment view in Cloudflare Pages.](/_astro/cloudflare-detailed-deployment-view.PjzEpkxu_2gaxng.webp)
![Application deployed to Cloudflare Pages.](/_astro/app-deployed.GSCGOmXt_1T4sXq.webp)
Wrap Up
We have now successfully deployed a Qwik-City application to Cloudflare Pages via GitHub Actions. You can find the repository for this blog post here.
Cody is a Christian, USN Veteran, Jayhawk, and an American expat living outside of Bogotá, Colombia. He is currently looking for new opportunities in the tech industry.