前言
很多朋友都想拥有一个属于自己的个人网站，放作品集、写博客、展示项目都很方便。今天就带大家从零开始，用 **Cloudflare Pages** 部署一个开源项目，并绑定上自己的独立域名。全程免费，域名也只要几块钱一年，非常适合个人开发者。
一、准备工作
-
下载开源项目
先到项目项目主页，点击 Download 下载源码包。
Github开源项目： https://github.com/imsyy/home
开源项目下载页面
- 解压并打开项目下载完成后解压，用 VS Code 打开项目文件夹。
二、环境配置与项目构建
- 安装 Node.js 环境在运行项目前，需要提前到Node官网安装好 Node.js 并配置环境变量。
-
修改.env文件后缀，避免运行时报错。
- 打开终端进行构建在 VS Code 中新建一个终端，依次执行以下步骤：
# 安装 pnpm
npm install -g pnpm
# 安装依赖
pnpm install
# 本地运行预览
pnpm run dev
# 构建项目
pnpm run build构建完成后，会生成一个 dist 文件夹，里面就是最终的静态资源。
终端运行命令
生成dist静态资源文件
三、Cloudflare Pages 部署
1.进入 Cloudflare 控制台登录 Cloudflare，点击 Pages 新建项目。Cloudflare官网： https://dash.cloudflare.com/
Cloudflare Pages 新建项目
- 直接关联 GitHub 仓库
- 手动上传本地的静态资源
2.上传项目Pages 支持两种方式上传：
这里选择上传刚刚生成的 dist 文件夹。
上传 dist 文件夹
3.获取默认域名上传完成后，Cloudflare 会分配一个免费的默认域名，网站就能直接访问了。
Cloudflare 默认域名访问截图
四、绑定自定义域名
如果想要更个性化的地址，可以绑定自己的域名。
1.购买域名在 阿里云、腾讯云 等平台购买即可。
2.绑定到 Cloudflare在 Pages 项目设置里，选择 自定义域名，输入你购买的域名并点击 激活域。
3.等待验证系统会自动进行解析和验证，几分钟后就能通过自己的独立域名访问网站了。
五、总结
到这里，我们就完成了一个完整流程：
- 下载并构建开源项目
- 上传到 Cloudflare Pages
- 绑定自定义域名，拥有属于自己的网站
刚部署完成时，访问可能会稍微慢一点，等缓存和验证完成后就会正常。
这样，一个完全属于自己的个人网站就搭建好了！是不是很简单？
发表评论