Cloudflare Pages搭建个人网站指南

在静态个人网站搭建领域,GitHub Pages 是入门首选,而 Cloudflare Pages 则是进阶最优解。相较于传统静态托管服务,Cloudflare Pages 拥有全球极速 CDN、无流量限制、自动 HTTPS、智能缓存、跨平台部署等更强能力。本文将讲述使用 Cloudflare Pages 建站的详细教程,几分钟即可上线属于自己的高速个人网站、技术博客、作品展示站。

一、前期准备

注册 Cloudflare 账号:访问 Cloudflare 官网,使用常用邮箱注册登录,默认开通免费个人版权益。

注册 GitHub 账号:前往 GitHub 官网完成注册,注册的用户名就是子域名的名称。

使用这个  GitHub 账号,参考前文《GitHub Pages搭建个人网站指南》,搭建好一个基于GitHub Pages的网站。

二、部署流程

Cloudflare Pages 提供文件直传部署(纯新手、快速上线)、客户端工具部署和Github关联自动部署(长期更新、博主首选)等多种模式,第一种方案非常简单,就不详述了,这里就详细介绍一下Github关联自动部署的方案。

登录 Cloudflare 控制台,点击左侧菜单栏,选择“构建”-“计算”- “Workers 和 Pages”,点击右上角 创建应用程序,选择 Connect with GitHub,连接 Git 仓库,授权绑定个人 GitHub 账号,选择需要部署的公开仓库,进入构建设置页面,按默认的参数构建,点击 保存并部署,系统自动拉取GitHub仓库代码并安装部署。

后续更新就非常简单了,只需本地更新内容、推送代码到远程GitHub仓库,Cloudflare 会自动完成重新部署,全程自动化无需人工干预。

除了上门两种方法之外,还可以通过Cloudflare自己的工具软件上传文件,网页面板拖拽上传最多1000个文件,大量文件不能用拖拽,可以使用 Wrangler CLI 来构建部署Cloudflare,免费版上限为20000个文件。

部署方法是:

先安装Node.js,之后执行以下命令安装Wrangler:

npm install -g wrangler

安装完成后,使用你的Cloudflare账号登录:

wrangler login

按照提示在浏览器中完成授权。

将你的所有文件整理到一个文件夹中(例如名为 my-site 的文件夹),然后在该文件夹的父目录下运行创建和部署命令:

wrangler pages deploy my-site --project-name=<你的项目名称>

运行此命令后,系统会引导你完成项目创建,之后,上传过程就会开始。

三、自定义域名

Cloudflare默认的免费子域名辨识度低,绑定自定义域名可提升网站专业性。

提前在Cloudflare注册一个域名,进入 Pages 项目详情,找到 “域” 功能,点击“添加域名”,即可添加自己的域名,系统自动生成 DNS 解析记录,一键确认生效。

开启 始终使用 HTTPS、自动重定向 HTTP 请求,全站加密访问,Cloudflare 免费自动配置 SSL 证书,永久有效。

DNS 解析缓存一般10分钟内生效,生效后即可通过专属自定义域名访问网站。