利用Cloudflare低成本搭建属于你自己的博客
前言
很多人都有想要搭建属于自己的小站（包括我），在这个过程中前前后后走了很多弯路终于成功，于是有了写一篇文章帮助抱着同样愿望的人的想法，本文主要通过0成本（理论上只有域名需要付费）的静态站点的方式教你如何成功搭建网站，希望这篇文章对在屏幕前的你有帮助。(❁´◡`❁)
一、服务器选择说明
本站采用 Cloudflare Pages（现Cloudflare Workers） 进行静态站点托管。相较于传统云服务器和部署方式，它具备以下优势：
- 0成本：Cloudflare Pages是免费的，免费计划的每个请求最多占用 10 毫秒 CPU 时间，每天最多 100,000 (UTC+0)；如果有需求也可以购买付费计划，对比如下图；
- 部署方式多样：你可以在本地build后通过网页上传部署站点（本站采用），也可以将你的页面项目上传至GitHub，通过链接GitHub仓库部署；好处是可以直接在编辑器里上传仓库，Cloudflare会同步更新；
- 全球解析：Cloudflare在世界各国主要城市都有服务器，基本上不管在哪个国家均可正常解析且加载速度快；
- 安全性高：Cloudflare Page有免费的保护计划，同时证书和连接协议等问题均可通过自动化完成，避免了部署的繁琐。
二、详细操作步骤
1. 域名购买
想要搭建网站，我们得首先有个自己的域名。本站的域名购买自阿里云万网，新用户第一年1元，同时还有低价且不错的域名可以购买，根据你的喜好挑选域名即可。另外还有其他各种各样的域名提供商，哪个实惠服务好就选哪个。
如果你不想购买域名，也可以使用CloudFlare Pages提供的免费域名。
- 登录 阿里云万网，选择喜欢的域名前缀和域名；
- 配置购买年限，并提供域名持有者的实名信息以完成支付：
- 购买年限：选择注册时长，可选1-10年；
- 信息模板：须为电子邮箱已验证、模板状态实名成功，这里购买时会提示要实名，按照提示操作即可。
信息模板用于记录域名持有者（个人或组织）的身份信息。根据 ICANN 及各注册局要求，所有域名都必须关联一个通过实名认证的信息模板。
如果您尚未创建信息模板，可以在此步骤中点击新建信息模板，按照引导在线创建并提交实名认证资料。
来自万网官方Docs：支付成功不等于注册成功。
完成支付仅代表您的注册请求已成功提交至阿里云。系统将随后向顶级域名注册局发送指令。部分域名（特别是 .cn 等国家代码顶级域名）需要经过命名审核或资质审核，此过程可能需要1-3个工作日。只有当域名状态最终变为 “正常” 时，才代表注册彻底成功。
- 如果在你的阿里云域名控制台域名列表页面，域名状态显示为正常，则代表域名注册成功可正常使用，可进行下一步备案、域名解析等操作。
如下图所示：
注册成功后的关键后续步骤：
- 设置域名解析：域名注册后，需通过设置解析将域名指向服务器的 IP 地址，用户才能通过该域名访问网站或应用。请在域名列表中点击 解析，添加 A 记录或其他类型的解析记录，详情参见《添加网站解析》，但由于这里使用CloudFlare进行托管，所以此处跳过。
- 进行ICP备案：（这里仅限中国内地网站）完成 ICP 备案：根据中国内地法律法规，任何在中国内地提供服务的网站都必须先完成 ICP 备案才能上线。如果你的域名所连接的服务器地址包括公网地址在国内，则需要进行备案；反之，则此项可忽略，不过这里还是建议进行备案，即使CloudFlare的解析服务器在国外，如果觉得麻烦或者不想备案的（服务器在境外的情况下），也可以选择不备案。如果你想在阿里云OSS等国内的服务商进行托管，由于服务器在国内，请务必进行备案！！！
2. 选择合适的框架
现如今静态网页的框架已经百花齐放，有许多可以选择（如Hexo和Astro Paper），这里以本站使用的框架——Aero Paper演示。
Aero Paper是由Astro Paper进行定制而来的开源项目，添加了一些新的功能和特性，且对中文支持友好等。
3. 克隆仓库
- 要克隆仓库，首先需要安装Git，安装操作详见官方文档。
选择一个合适的位置新建文件夹，在新打开的文件夹中右键点击“在终端中打开”，输入以下指令：
克隆仓库指令：
git clone https://github.com/hazuki-keatsu/aero-paper.git
cd aero-paper
-
安装Node.js
根据官网下载对应系统的版本安装即可，安装过程所有配置选择默认配置。 -
安装依赖(pnpm和依赖)：
npm install -g pnpm
pnpm install
- 启动开发模式：
pnpm run dev在浏览器中打开 http://localhost:4321 查看实时页面结果。
如果执行pnpm run dev出现报错，请重新执行npm install -g pnpm和pnpm install。
4. 进行配置修改
框架结构大致如下：
├── public/ # 静态资源
│ ├── favicon.svg
│ ├── profile_picture.jpg
│ └── assets/ # 图片资源
├── src/
│ ├── assets/ # 项目资源
│ │ ├── fonts/ # 自定义字体 (Yozai)
│ │ ├── icons/ # SVG 图标
│ │ └── images/ # 图片资源
│ │ └── backgrounds/ # 背景图片
│ ├── components/ # 组件
│ │ ├── PageContainer.astro # 统一页面容器
│ │ ├── Header.astro
│ │ ├── Footer.astro
│ │ └── ...
│ ├── data/blog/ # 博客文章 (Markdown)
│ ├── layouts/ # 页面布局
│ ├── pages/ # 路由页面
│ ├── styles/ # 样式文件
│ │ ├── global.css # 全局样式 + 背景效果
│ │ └── typography.css # 排版样式
│ └── utils/ # 工具函数
├── astro.config.ts # Astro 配置
└── src/config.ts # 站点配置- public中，存放着网站图标、关于页的头像和音乐播放器的音乐文件等。
- src/assets中，你可以自定义字体、添加SVG图标（添加后如要使用需要在constants.ts中import），更改背景图片等。
- src/components中，是存放组件的位置，在此文件夹的Footer.astro中，可以更改页面的页脚信息部分。
- src/data/blog中，是存放文章的位置。
- src/pages中，有about.md，可以修改关于页。
- src/styles是存放各种效果配置的文件夹，可以通过修改css文件自定义页面效果。
更多配置请参考Astro Docs。
5.本地构建
博客文件需先在本地构建（如使用 Astro、Hexo 等框架生成 dist 目录），再上传到CloudFlare Page容器。
在框架页根目录，右键“在终端中打开”，输入以下命令：
pnpm run build等待一会后，如果显示[build] Complete!（如下图所示），代表已经构建完成，如果出现错误，请排查所有的配置文件是否出错。
构建完成后根目录会出现dist文件夹，这是构建完成的页面和资源，等一下要用到。
6. 创建CloudFlare账号和CloudFlare Pages容器
-
创建CloudFlare账号
访问CloudFlare账号注册页，进行注册。
注册完成后登录，进入Cloudflare仪表盘，
-
添加域：
如果选择使用CloudFlare Pages提供的免费域名，则跳过此步骤，直接到第3步。
在账户主页点击加入域，输入之前注册的域名，按下图配置：
随后选择免费计划，点击继续。
接下来在后续的页面会提示你添加Cloudflare 名称服务器，复制它提供的两个DNS地址：
回到阿里云域名控制台,点击管理，随后点击在左侧的DNS管理中的DNS修改，点击修改DNS服务器，将刚刚复制的CloudFlare名称服务器的地址粘贴修改到此处，修改完成后点击确定，随后在当前DNS服务器的上方点击同步。
修改完成后回到CloudFlare页面，点击继续，会到等待激活页面，直接点击继续概览即可。
随后你的域名会显示待处理的名称服务器更新，不用管它，在DNS解析修改正确情况下，一段时间过后会自动更新DNS配置。
更新DNS配置成功后，在DNS记录页中会显示代理状态为已代理，这个时候就说明修改成功了。
3. 创建CloudFlare Page容器
在账户主界面，点击左栏的计算（Workers），在Workers和Pages页面中，点击右上角的创建应用程序。
选择Pages或者Works，选择拖放文件，在随后的页面里输入你的项目名称。
此名称将用于在 pages.dev 上生成永久主机名。和最后生成的免费域名是有关联的，比如本站的免费域名是tothestars-dtm.pages.dev，通过这个域名也可以访问到博客页面。
随后将刚刚生成的dist文件夹拖放上传或选择上传，上传完成后点击部署站点即可。
在Workers和Pages页面中，点击到刚刚创建的项目，随后点击进入到自定义域二级页面中，在此输入设定购买的域名，随后按照提示配置DNS即可。随后设定的自定义域如果显示活动，则添加成功。
三、验证部署结果
完成以上所有步骤后，打开浏览器，输入你的自定义域名（如 https://tothestars.wang/），若能正常显示博客首页，且点击链接无 404 错误，则说明部署成功。
若遇到问题，可优先排查以下点：
- 阿里云域名控制台中的DNS是否修改成功；
- 自定义域名的 CNAME 解析是否生效/代理状态是否为已代理；
- 上传的文件是否完整。
