Cloudflare Pages Deployment Guide

Cloudflare Pages is one of the best static website hosting services available. It integrates deeply with GitHub, enabling GitOps: you only need to write code and push to GitHub, and Cloudflare Pages will automatically pull, build, and publish to global CDN nodes.

Static Deployment

Why Choose Pages + GitHub?

• Completely Free: The free plan provides unlimited bandwidth and requests.
• Automation: Say goodbye to manual FTP uploads, git push ensures go-live.
• Preview Environment: Each Pull Request generates an independent preview link for convenient testing.

Integration Steps

1. Prepare Code Repository

Ensure your website code is uploaded to GitHub. Whether it's pure HTML/CSS or a Vue/React/VitePress project, ensure there's an index.html in the root directory or a correct build command in package.json.

2. Connect Cloudflare

1. Log in to Cloudflare Dashboard.
2. Select Workers & Pages in the left menu.
3. Click Create Application -> Pages tab -> Connect to Git.

3. Authorization and Repository Selection

1. Select GitHub option.
2. If using for the first time, you will be redirected to GitHub for authorization. You can choose to authorize All repositories or Only select repositories (recommended to select specific repositories to minimize permissions).
3. Select the project repository you want to deploy from the list and click Begin setup.

4. Build Settings Configuration

This step is crucial; Cloudflare needs to know how to build your code.

• Project name: Your default subdomain (e.g., my-site.pages.dev).
• Production branch: Production branch (usually main or master).
• Framework preset:
  • Cloudflare has built-in configurations for almost all mainstream frameworks.
  • VitePress: Select VitePress. Build command automatically becomes npm run docs:build, Output directory becomes .vitepress/dist.
  • Vue/React (create-vite): Select Vite. Output directory is usually dist.
  • Next.js (Static Export): Select Next.js (Static HTML Export). Output directory becomes out.
  • Pure HTML: Select None. Leave Build command blank, enter . for Output directory (or public if you placed it in a public folder).

5. Complete Deployment

Click Save and Deploy. Cloudflare will now start a build server, pull your code, install dependencies (npm install), and run the build command.

You can see the build logs in real-time in the console. After a few minutes, when Success! appears, your site is live!

Advanced Configuration

Updating the Site

No extra operations required. Every time you push code to the main branch, Cloudflare Pages will automatically trigger a new build.

Custom Domain

By default, you get a *.pages.dev domain. In the Pages project details page -> Custom domains, you can bind your own domain. If your domain DNS is also hosted on Cloudflare, this process is one-click and automatically includes an SSL certificate.

Environment Variables

If your build process requires API Keys (e.g., VITE_API_URL), please set them in Settings -> Environment variables. Do not hardcode them in the code.