Building and Hosting a Hexo Site with Cloudflare Pages
Since applying for Cloudflare Pages testing qualification on 2021.02.09, there has been no news. Today, on 2021.03.06 in the early morning, I finally received the notification that the application has been approved.
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 experienced it. Conclusion of the experience: simple and convenient.
For well-known reasons, website speed is still not friendly to users in mainland China 😔.
What is Cloudflare Pages?
Cloudflare Pages is a JAMstack website deployment platform, 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.
Cloudflare Pages Official Website
What is JAMstack?
JAMstack was originally an abbreviation for JavaScript, API, Markup technology stack, proposed by Mathias Biilmann (seems to be for promoting Netlify services 🤔), but now it has expanded beyond 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 a new generation website architecture that combines the advantages of both static and dynamic sites through pre-rendering 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
After the approval, you can see the Cloudflare Pages entry on the homepage after logging in to Cloudflare.
Create a new project, the project name defaults to your subdomain. If there is a conflict, the domain will automatically generate some suffixes for you. So if you like a domain, you have to grab it early. But I don’t care about these, as I will do CNAME redirection anyway 😂.
For example, my project name is: chengxiaobai, the subdomain default is: chengxiaobai.pages.dev. If chengxiaobai is taken, the subdomain might be: chengxiaobai-xxx.pages.dev.
PS: Following the convention, here pages.dev is treated as the top-level domain
Then you will be asked to associate your GitHub account, and you can choose to grant permissions: all repositories or specific repositories. This can be changed on GitHub, and it is recommended to grant project permissions according to the principle of least privilege. Changes can be made later in Personal Center Applications.
After authorization, you can choose the corresponding repository on Cloudflare Pages, the default is the main branch, and you can customize the branch selection.
The next step is to choose the specific build tool or framework. Click here to see the current support list, common ones like Hugo, Jekyll, Next.js, Vue, etc., are supported. The configuration options also support custom build commands, so you can directly configure different build commands for custom builds.
Then you can start the build, the process is similar to GitHub Actions, with the addition of deploying to Cloudflare CDN.
The overall build speed is similar to GitHub Actions because my blog has few articles, so the difference is not significant.
Also, each successful build corresponds to a temporary third-level domain for viewing the current build results, which is very useful during development testing.
Because it is deployed to Cloudflare CDN, it comes with an SSL certificate.
Next is the speed test. According to the previous description, since it is deployed to Cloudflare CDN, the speed in mainland China can be expected.
Cloudflare Pages Speed Test:
My Blog Speed Test:
According to the speed test results, Cloudflare Pages’ speed is the same as Cloudflare CDN. It is not satisfactory in
mainland China, but it performs well overseas.
The reason my blog has decent speed both domestically and internationally is that I use Cloudflare Partner, which routes traffic separately: domestic traffic goes through domestic CDN (Tencent), and overseas traffic goes through overseas CDN (Cloudflare). This routing requires CNAME access.
But Cloudflare Pages natively supports CNAME access, which means we can use CNAME access without going through Cloudflare Partner, achieving global differentiated acceleration.
Now there is an even better solution. Let me first explain 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: all services are provided by major companies, stable, reliable, and both domestic and international speeds are fast. Moreover, all services are free or have low costs.
However, there are two key issues: GitHub Page must be a public repository, meaning my site can be forked as a mirror by anyone. This is not a big problem, although similar situations have occurred, the impact is not significant, just a potential security risk.
The second issue is that using Cloudflare Partner access also has security risks. Security and stability depend entirely on the integrity of the access provider, so finding a reliable access provider is crucial.
If you use Cloudflare Pages, you can completely avoid this issue. Because Cloudflare Pages supports deploying from private repositories and also supports CNAME access. 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 advantage is that it removes GitHub Page and Cloudflare Partner, avoiding potential security risks. At the same time, overseas requests are directly handled by Cloudflare Pages, theoretically achieving faster speeds. Of course, the choice of access providers for Cloudflare Partner’s CNAME access is flexible, and I only use it to route my blog. This choice varies from person to person.
That’s my first experience with Cloudflare Pages. Since it’s still in beta, the functionality is not extensive, but having another choice for a JAMstack platform is great. Feel free to leave comments for other ways to explore 🤟.