Cloudflare Pages 零成本搭建个人博客网站教程
本教程使用Mizuki作为网站模板，面向零基础小白，步骤尽可能详细和通俗易懂。文末附带参考源码和模板相关信息。
准备阶段
本项目所需：
- 一个Github账号
- 一个Cloudflare账号
- 一个DNSHE账号（可选）
本项目要求：
具体步骤（已完成配置请无视）：
Github注册：
单击Github打开注册页面
（若加载失败请使用网络加速器，已Watt Toolkit为例，单击此处打开下载页，输入提取码1234，下载后缀为.exe的文件，跟随引导完成安装并启动，在侧边栏找到“网络加速”，勾选“Github”一键加速）
点击Create an account注册一个账号
在本页由上至下依次输入：
- 你的邮箱
- 密码
- 用户名
最后点击Create account并完成邮箱验证
注册成功！
Cloudflare注册：
单击Cloudflare打开注册页面
在本页由上至下依次输入：
- 你的邮箱
- 密码
最后点击注册并完成邮箱验证
注册成功！
DNSHE注册（可选）：
注意：cloudflare提供的pages.dev域名在中国大陆地区可能无法正常访问，DNSHE提供了免费的三级域名，如果有自己的域名或者可以正常访问的可以不予理会
方式一：
单击DNSHE打开注册页面
在本页由上至下依次输入：
- 用户名
- 你的邮箱
- 邮箱收到的验证码
- 密码 重复密码
最后点击创建账户
注册成功！
方式二（需要Github账号）：
单击DNSHE打开登录页面
点击本页右下角的“使用Github登录”，在跳转页面中用Github授权登录
登录成功！
Node.js安装：
单击Node.js打开下载页面
下滑找到“Windows安装程序(.msi)”
点击“Windows安装程序(.msi)”下载安装包
下载完成后运行安装包，跟随指引完成安装
pnpm安装：
按下键盘上的 Windows徽标键（Win键）和 R 键 调出运行窗口
在搜索框中输入 cmd 并回车打开Windows系统命令行窗口
在弹出的窗口中输入
npm install -g pnpm
回车，等待安装完成
命令运行完成后可继续输入
pnpm -v
回车来查看pnpm版本（确保返回的数字 >= 9）
如果返回了
'pnpm' 不是内部或外部命令，也不是可运行的程序或批处理文件。
或返回值不为数字，说明pnpm安装失败，请重复安装步骤
Git安装：
单击Git打开下载页面
点击“Git for Windows/x64 Setup”下载安装包
下载完成后运行安装包，跟随指引完成安装
部署阶段
部署到本地：
打开文件资源管理器，新建一个放置网站源码的文件夹，重命名为自己能记住的名字
在当前路径下，鼠标左键单击路径栏，输入cmd并回车，调出命令行。
在命令行中输入
git clone https://github.com/LyraVoid/Mizuki.git
将模板部署到本地
如果Git提示克隆失败，请切换网络或使用加速器重试
命令完成后，继续输入
cd Mizuki
如果修改了文件夹名称，请输入cd "你的文件夹名"
实在不行也可以在输入cd 后，按一下键盘上的TAB键，Windows会自动补全路径
回车后继续输入
pnpm dev
来初始化和运行项目
完成运行后可以在命令行中找到浏览页地址http://localhost:3000/
在浏览器中输入命令行中的网址，可以浏览当前的网站
此时本地的部署已经完成，可以返回命令行，按下键盘上的CTRL键加C键结束运行。
部署到Cloudflare Pages：
上传源码至Github仓库：
打开Github，点击左上角的“New”按钮新建一个仓库
在跳转的页面中，由上至下依次输入：
- 你的仓库名
- 你的仓库描述（可选）
余下的四个设置框分别是 - 仓库公开性（默认公开）
- 是否加入README文件（默认不加入）
- 是否加入.gitignore文件（默认不加入）
- 是否添加许可证（默认不添加）
比如我设置仓库名为“tutorialExample”，仓库描述为“搭建博客网站教程的源码示例”，其余保持不变。
确认设置完毕后点击右下角绿色按钮“Create repository”创建仓库。
在此页面点击链接右侧的复制图标，复制仓库链接
打开源码所在文件夹，右键空白处并在弹出的右击菜单中选择“Open Git Bash here”打开Git命令行
在弹出的命令行中输入以下内容进行Git的基本配置
git config --global user.name "你的GitHub用户名" && git config --global user.email "你注册GitHub时用到的邮箱"
随后依次输入
git remote remove origin（删除原有的git配置）
git init（初始化仓库）
git remote add origin 在此粘贴你刚刚复制的仓库链接（向git添加仓库地址）
git pull origin main（拉取仓库内容）
git add .（将此页所有文件加入暂存区）
git commit -m "在此处写推送的描述语"
git branch -M main（切换分支到main）git push origin main（推送到仓库）
全部输入完成后，Git会要求我们登录
点击“Sign in with your browser”按钮，Git会打开一个网站并自动完成登录
看到此页说明登录成功，可以安全关闭此网页
此时再打开Github仓库页面，就可以看到我们刚刚上传的文件了
链接Github仓库至Cloudflare Pages：
首先打开Cloudflare
在此页唤出左侧侧边栏，在“构建（build）”标题下，找到“计算”下拉栏，点击Workers 和 Pages
(或者可以直接按下键盘上的CTRL键加K键，搜索Workers 和 Pages)
在跳转的页面下，点击右上角的蓝色按钮“创建应用程序”
继续点击下方“想要部署 Pages？开始使用”中的“开始使用”链接
(如果你的页面内没有“想要部署 Pages？开始使用”，请按下键盘上的CTRL键加鼠标滚轮缩放页面)
点击导入现有Git存储库右侧的“开始使用”按钮
点击蓝色链接“+添加账户”添加我们的Github账户，然后在下方选择我们存放源码的仓库，最后点击右下角的蓝色按钮“开始设置”
在跳转的页面中，由上至下依次设置：
- 项目名称
- 生产分支（填源码存放的分支，一般为main）
- 框架预设（在下拉框选择Astro）
- 构建命令
pnpm i && pnpm build - 构建输出目录（填dist）
- 根目录（留空）
最后点击右下角蓝色按钮“保存并部署”
看到此页说明部署完成，可以点击小标题处的蓝色链接进行浏览
确认无误后可点击右下角蓝色按钮“继续处理项目”
自定义域名解析（可选）
考虑到Cloudflare提供的域名在中国大陆地区可能无法正常使用，我们继续域名解析的教程。
首先准备一条无任何解析的新域名，没有域名的可以自己买一条，也可以通过以下方法免费注册一条。
注册方法
打开DNSHE
点击蓝色按钮“注册新域名”
继续点击蓝色按钮“+注册新域名”
在上方下拉栏选择一个喜欢的根域名，然后再下方输入框填写你的域名前缀，确认无误后点击右下角蓝色按钮“确认注册”
在获取到域名后我们回到Cloudflare页面，在刚刚创建的项目页面下，点击自定义域 -> 设置自定义域，输入获取到的域名，点击“继续”
如果使用的域名购买自cloudflare，此时已经配置完毕，点击“激活域”即可
如果域名购买自其他运营商，则需要将其托管到cloudflare名下，下面进行域名迁移的教程
迁移方法
点击“开始DNS转移”，选择“转移域名”
输入获取到的域名，点击下方“继续按钮”
选择免费计划
在此页下滑，点击“+添加记录”，类型选择“CNAME”，名称填“@”，目标填先前构建完成时Cloudflare提供的蓝色链接中的域名
点击“保存”->“继续前往激活”
在跳转的页面中下滑，复制Cloudflare提供的DNS服务器，登录你购买域名的运营商
以DNSHE为例
点击管理DNS解析，在注册的域名右侧点击管理域名，
点击DNS服务器 -> 修改DNS服务器
将DNS服务器替换为Cloudflare提供的DNS服务器，勾选强制替换冲突记录，保存设置
完成后回到Cloudflare，点击我已更新名称服务器，完成域名迁移。
在迁移完毕后我们回到Cloudflare页面，在刚刚创建的项目页面下，点击自定义域 -> 设置自定义域，输入迁移完毕的域名，点击“继续”-> 激活域
到这里，一切的配置已经完成，只需等待Cloudflare完成验证与解析，这个过程通常在30分钟 ~ 48小时。
完成解析后，我们就可以使用自定义的域名来访问网站啦。
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时