How to deploy a website to Cloudflare Pages using codemagic.yaml
Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.
Configure Cloudflare access
Before getting started you will need to create a Cloudflare API token and get your Account ID.
Create a Cloudflare API token
To create a token:
- Log in to the Cloudflare dashboard.
- Select the user icon on the top right of your dashboard > My Profile.
- Select API Tokens > Create Token.
- Select Use template next to Edit Cloudflare Workers. All templates are prefilled with a token name and permissions. You also need to modify the account and zone resources you want assigned to the token.
- After editing your token, select Continue to summary and review the permissions before selecting create token.
- Save the generated token for later to store it in Codemagic.
Get the Account ID
From Cloudflare dashboard select your website and copy the
Account ID under the API section at the right section from the
See the official docs.
Configure environment variables
Open your Codemagic app settings, and go to the Environment variables tab.
Enter the desired Variable name, e.g.
Enter the desired variable value as Variable value.
Enter the variable group name, e.g. cloudflare_credentials. Click the button to create the group.
Make sure the Secure option is selected.
Click the Add button to add the variable.
Repeat the steps to add the
Add the variable group to your
environment: groups: - cloudflare_credentials # <-- (Includes CLOUDFLARE_API_TOKEN, CLOUDFLARE_ACCOUNT_ID)
Publish to Cloudflare Pages
After you have created your page from the Cloudflare dashboard and given it a name, you can configure automatic publishing in your
First, we need to install
wrangler, which is a command-line tool for building with Cloudflare developer products, and then publish our website.
Add the following script to your
publishing: scripts: - name: Install wrangler script: npm install -g wrangler - name: Deploy to Cloudflare Pages script: | wrangler pages publish <path/to/your/build/folder/> --project-name <your-project-name> --branch <branch-name>
--commit-message "Your commit message"
If the deployment is complete then you should be able to browse your website using the URL at the last line of the log.
Flutter web sample workflow
Here’s a workflow for building a Flutter web application and then publish it to Cloudflare Pages.
web-workflow: name: Web Workflow instance_type: linux_x2 environment: groups: - cloudflare # <-- (Includes CLOUDFLARE_API_TOKEN, CLOUDFLARE_ACCOUNT_ID) flutter: stable scripts: - name: Get Flutter packages script: flutter packages pub get - flutter config --enable-web - name: Build Web script: | flutter build web --release - name: Gather the web files script: | cd build/web 7z a -r ../web.zip ./* artifacts: - build/web.zip publishing: scripts: - name: Install wrangler script: npm install -g wrangler - name: Deploy to Cloudflare Pages script: | wrangler pages publish build/web/ --project-name my-flutter-pages --branch production slack: channel: "#builds" notify_on_build_start: true