Introduction

I’m excited to announce that I’ve added Cloudflare Pages as another blog hosting provider! As a blogger, I know how important it is to have a reliable and fast website. In the past, I’ve used GitHub Pages as my hosting provider, but I ran into some issues with GitHub Pages not working well in China where I live. After doing some research, I decided to give Cloudflare Pages a try.

Background

What is Cloudflare Pages

Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. — Cloudflare Official Website

Cloudflare Pages is a platform for building, deploying, and hosting websites. It offers modern features for developing static or JAMstack websites, global CDN caching, advanced security features, and scalability for handling high traffic.

Cloudflare Pages vs GitHub Pages

GitHub Pages and Cloudflare Pages are two popular website hosting platforms, but there are some key differences between them. In terms of functionality, GitHub Pages is primarily designed to host static websites or web pages, while Cloudflare Pages is a cloud-based hosting platform that can be used to deploy and host both static and dynamic websites, including serverless functions.

Another key difference is the underlying infrastructure used by each platform. GitHub Pages uses GitHub’s own servers to host websites. Access to GitHub is often restricted or limited in China due to the country’s internet censorship policies, which can result in slow loading times or even complete inaccessibility for users located in China. In some cases, access to GitHub Pages may be blocked altogether, making it difficult or impossible to use the platform to host a website or web pages in China.

In comparison, Cloudflare has multiple data centers located within China, which allows for faster and more reliable content delivery to users within the country. The platform provides built-in security features and optimization tools that can further improve performance and reliability, which can be particularly important in China where internet restrictions and congestion can impact website performance.

Publish and Deploy

There are three ways to set up a Cloudflare Pages project:

  1. Connecting your Git provider to Cloudflare Pages.
  2. Deploying your prebuilt assets right to Pages with Direct Uploads.
  3. Using Wrangler from the command line.

Out of these three methods, only Wrangler is suitable for use in a CI/CD pipeline.

Wrangler

To run Wrangler in a continuous integration/continuous deployment (CI/CD) environment, you must provide a Cloudflare API token and account ID. The following example utilizes Azure DevOps as the CI/CD provider.

  1. In order to utilize Wrangler in a CI/CD pipeline, it is necessary to install it within the pipeline first.
  2. Before proceeding, make sure you have your Cloudflare API token and Account ID ready.
  3. In the CI/CD pipeline, configure the environment variables CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID.
  4. Edit azure-pipelines.yml. (Hexo only)
1
2
3
4
5
6
7
8
9
10
steps:
    - script: |
          npm install -g wrangler
      displayName: "Install wrangler"

    - script: |
          hexo clean
          hexo d
          CLOUDFLARE_API_TOKEN=$(CLOUDFLARE_API_TOKEN) CLOUDFLARE_ACCOUNT_ID=$(CLOUDFLARE_ACCOUNT_ID) npx wrangler pages publish public --project-name=hexo-pages --branch=main
      displayName: "Deploy to Cloudflare Pages"

Conclusion

In conclusion, deploying your Hexo blog to Cloudflare Pages with Wrangler and CI/CD is a simple and efficient way to ensure that your blog is available to your audience at all times. By automating the deployment process, you can save time and reduce the risk of errors that may occur during manual deployments. With the help of the detailed steps provided in this guide, you can easily set up your own CI/CD pipeline using Azure DevOps and Wrangler, and take advantage of Cloudflare Pages’ powerful features to improve the speed, security, and reliability of your website.