Building and Hosting a Hexo Site with Cloudflare Pages
Since I applied for Cloudflare Pages testing qualification on February 9, 2021, there has been a resounding silence. After nearly a month, on March 6, 2021, in the wee hours, I finally received the notification of my application’s approval.
Due to the time difference, I received the approval notification in the early morning Beijing time, so it wasn’t until the afternoon that I got to experience it. The verdict: simple and convenient.
As is well known for reasons we’re all aware of, website speed remains less than friendly for users in mainland China 😔.
What Is Cloudflare Pages?
Cloudflare Pages is a website deployment platform that uses JAMstack, similar to GitHub Pages. Both are static site deployment platforms.
Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.
Cloudflare Pages is currently in open beta.
Official Cloudflare Pages Website
What Is JAMstack?
JAMstack originally stood for JavaScript, API, Markup, a term coined by Mathias Biilmann (probably to promote Netlify services 🤔). But now, it encompasses more than that.
A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
Mathias Biilmann (CEO & Co-founder of Netlify)
According to the official website, JAMstack is now the new generation of website architecture. It combines the advantages of both static and dynamic sites through prerendering and reusable APIs.
Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.
Jamstack Official Website
Once approved, you can log in to Cloudflare and find the entrance to Cloudflare Pages on the homepage.
Creating a new project, the project’s name defaults to your subdomain. If there’s a conflict, it will automatically generate some suffixes for you, so if you have a favorite domain name, you’d better grab it early. But I don’t pay much attention to these, as they will all be redirected using CNAME anyway 😂.
For example, my project name is “chengxiaobai,” and the subdomain defaults to “chengxiaobai.pages.dev.” If “chengxiaobai” is already taken, the subdomain might become “chengxiaobai-xxx.pages.dev.”
PS: According to convention, here we treat pages.dev as a top-level domain.
Next, it will ask you to link your GitHub account, and you can choose to grant permissions for all repositories or specific ones. You can modify this on GitHub later. It’s recommended to follow the principle of least privilege when granting project permissions, and you can make changes later in the Applications section of your personal center.
Once authorized, you can select the corresponding repository on Cloudflare Pages. By default, it’s the main branch, but you can customize it.
The next step is to choose the specific build tool or framework. Click here to see the current supported list. Common ones like Hugo, Jekyll, Next.js, and Vue are all supported, and the configuration options support custom build commands, so you can configure different build commands to achieve custom builds.
Then you can start building. The process is similar to GitHub Actions, but with an additional step of deploying to the Cloudflare CDN.
Overall, the building speed is similar to GitHub Actions because my blog doesn’t have many articles, so the difference isn’t significant.
At the same time, each successful build corresponds to a temporary subdomain for viewing the current build result, which is very useful during development and testing.
Since it’s deployed to Cloudflare CDN, it comes with an SSL certificate.
Next is the speed test. As described earlier, since it’s deployed to Cloudflare CDN, the speed in mainland China is as expected.
Cloudflare Pages Speed Test:
My Blog Speed Test:
Based on the speed test results, Cloudflare Pages’ speed is on par with Cloudflare CDN, which is fast abroad but less than optimal in mainland China.
The reason my blog’s speed is decent both domestically and internationally is because I use Cloudflare Partner, which splits traffic for domestic and international users: domestic traffic goes through domestic CDN (Tencent), and international traffic goes through international CDN (Cloudflare). This split requires CNAME setup.
However, Cloudflare Pages natively supports CNAME setup, meaning we can use CNAME without needing Cloudflare Partner. This allows for differentiated global acceleration without the need for a third-party partner.
So now there’s an even better option. To summarize my current blog architecture:
graph LR
A["Client"] -->|Request| B("DNS")
B --> C{"dispatch"}
C -->D["Tencent"]
C -->E["Cloudflare"]
D -->|Source| G["GitHub Page"]
E -->|Source| G["GitHub Page"]
The advantages of this architecture are that it uses services from major companies, ensuring stability, and it has fast domestic and international speeds. Additionally, these services are either free or have low costs.
However, there are two key issues. First, GitHub Pages must be a public repository, which means my site can be forked by anyone, posing a potential security risk, though it hasn’t had a significant impact.
Second, using Cloudflare Partner for access also carries security risks. Security and stability rely on the access provider’s integrity, so finding a reliable access provider is crucial.
Using Cloudflare Pages can completely avoid these issues. Cloudflare Pages supports private repository deployment while also supporting CNAME setup. Therefore, the final architecture looks like this:
graph LR
A["Client"] -->|Request| B("DNS")
B --> C{"dispatch"}
C -->D["Tencent"]
C -->E["Cloudflare Page"]
D -->|Source| E["Cloudflare Page"]
The advantages are that it eliminates GitHub Page and Cloudflare Partner, avoiding potential security risks. Moreover, requests from abroad are directly served by Cloudflare Pages, theoretically resulting in faster speeds. Of course, the choice between Cloudflare Partner and Cloudflare Pages for CNAME access depends on individual preferences.
This concludes my initial experience with Cloudflare Pages. While it’s still in beta and has limited features, having another JAMstack platform to choose from is excellent. If you have other ways to experiment with it, feel free to share in the comments 🤟.