【搭建个人网站教程】通过Cloudflare Pages 部署个人网站 + 独立域名绑定 - 实践

前言

很多朋友都想拥有一个属于自己的个人网站，放作品集、写博客、展示计划都很方便。今天就带大家从零开始，用Cloudflare Pages部署一个开源项目，并绑定上自己的独立域名。全程免费，域名也只要几块钱一年，非常适合个人开发者。

视频教程：零成本保姆级教程：通过Cloudflare Pages 部署个人网站 + 独立域名绑定

---

一、准备工作

1. 下载开源项目

   先到项目项目主页，点击Download下载源码包。

   

   开源项目下载页面

2. 解压并打开项目下载做完后解压，用VS Code打开计划文件夹。

二、环境配置与项目构建

1. 安装 Node.js 环境在运行项目前，要求提前到Node官网安装好 Node.js 并安装环境变量。

2. 修改.env文件后缀，避免运行时报错。

   

3. 打开终端进行构建在 VS Code 中新建一个终端，依次执行以下步骤：

# 安装 pnpm
npm install -g pnpm
# 安装依赖
pnpm install
# 本地运行预览
pnpm run dev
# 构建项目
pnpm run build

构建完毕后，会生成一个dist 文件夹最终的静态资源。就是，里面就

终端运行命令

生成dist静态资源文件

三、Cloudflare Pages 部署

1.进入 Cloudflare 控制台登录 Cloudflare，点击Pages 新建项目。

Cloudflare Pages 新建项目

• 直接关联 GitHub 仓库

• 手动上传本地的静态资源

2.上传项目Pages 拥护两种方式上传：

这里选择上传刚刚生成的dist 文件夹。

上传 dist 文件夹3.获取默认域名上传达成后，Cloudflare 会分配一个免费的默认域名，网站就能直接访问了。

Cloudflare 默认域名访问截图

四、绑定自定义域名

如果想要更个性化的地址，行绑定自己的域名。

1.购买域名在 阿里云、腾讯云等平台购买即可。

2.绑定到 Cloudflare在 Pages 项目设置里，选择自定义域名，输入你购买的域名并点击激活域。

3.等待验证系统会自动进行解析和验证，几分钟后就能通过自己的独立域名访问网站了。

五、总结

到这里，我们就完毕了一个完整流程：

• 下载并构建开源项目

• 上传到 Cloudflare Pages

• 绑定自定义域名，拥有属于自己的网站

刚部署达成时，访问可能会稍微慢一点，等缓存和验证完成后就会正常。

这样，一个完全属于自己的个人网站就搭建好了！是不是很容易？

如果你也想要尝试建站，不妨动手实践一下。后面我还会分享如何购买域名并配置解析的详细教程，敬请期待。