How to automate deploying of static site to Cloudflare pages with GitHub actions
Hey everyone! 🤗 We chose Rust and static site generation to meet the needs of the Muvon blog. We faced the challenge of automatically deploying sites not created by NPM to Cloudflare Pages and wanted to share our experience in solving it.
A little bit of history
We decided to create a blog some time ago, where we could publish helpful articles and tech tricks. We chose Substack, but they blocked us from publishing right after we posted the tech article. That's crazy and indicative of a centralized system. We couldn't do anything about it.
We looked for solutions, but it was clear none would provide the quality performance and SEO we wanted. So we created a Markdown file generator using Rust (we're still learning it, hah) and compiled JS/CSS for it.
When we finished the first version to launch, we asked ourselves: how can we deploy it with minimal time and money spent?
Deploy how and where?
We chose Cloudflare Pages to deploy. It was clear to us that Cloudflare provides an automated integration with GitHub for NPM generated tasks. But since we had a static generated site with no JS or NPM, we researched further and found that Cloudflare has a tool called Wrangler and GitHub Actions to run it.
When making decisions about whether to choose something new or stick with something you're familiar with, it's wise to consider the time and effort it will take. Sticking with something you know well will help you ship faster.
Automate it with Wrangler and GitHub actions
We have our articles in Markdown files which need to be parsed and compiled into static files using Rust. Output should be placed in the public directory, which should be exposed as a website.
First, we create our workflow for GitHub actions by creating the file .github/workflows/deploy.yaml and placing the code below:
name: deploy
on: [push]
jobs:
deploy:
runs-on: ubuntu-latest
name: Deploy
steps:
- uses: actions/checkout@v3
- name: Build
run: cargo run -r
- name: Publish
uses: cloudflare/[email protected]
with:
accountId: ${{ secrets.CF_ACCOUNT_ID }}
apiToken: ${{ secrets.CF_API_TOKEN }}
command: pages publish --project-name=muvon-blog ./public
Create your site at Cloudflare Pages and name it (we named it muvon-blog). To get your API token, follow these steps:
- Click the user icon in the top right corner and select My profile.
- Select API Tokens from the left side bar.
- Click Create Token and choose Get started near Create Custom Token.
- In the Permissions section, choose Cloudflare Pages and add the Edit policy.
- Name your token and save it for use in GitHub settings.
Next, go to the settings of your GitHub repository and create secrets with the names CF_ACCOUNT_ID and CF_API_TOKEN.
- Go to your repository and click Settings.
- Select Secrets and variables from the left side bar and choose Actions.
- Add variables with the names you used in your GitHub workflow.
You're all set!
On each push, your main branch will be deployed to production on Cloudflare Pages. Non-main branches will be deployed as a preview on your custom domain.
So, what's next?
We are still working on the tool and plan to release it as open source and easy to use for everyone. It will take some time, as we want to ensure we cover all the necessary cases to make it valuable.
Cloudflare Pages is an excellent choice for quickly deploying sites, and we highly recommend giving it a try.
Automate your processes and don't waste time on manual actions. Until next time!