【搭建个人网站教程】通过Cloudflare Pages 部署个人网站 + 独立域名绑定 - 实践
<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style>
<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }
code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style><div class="htmledit_views atom-one-dark" id="content_views"><h2>前言</h2><p>很多朋友都想拥有一个属于自己的个人网站，放作品集、写博客、展示计划都很方便。今天就带大家从零开始，用<strong>Cloudflare Pages</strong>部署一个开源项目，并绑定上自己的独立域名。全程免费，域名也只要几块钱一年，非常适合个人开发者。</p><p>视频教程：零成本保姆级教程：通过Cloudflare Pages 部署个人网站 + 独立域名绑定</p><p></p><p class="img-center"><img alt="图片" height="570" src="https://i-blog.csdnimg.cn/img_convert/5f5c03949db975be4e5ebff02fd3a8a9.png" width="1080"></p><hr><h3>一、准备工作</h3><ol><li><p><strong>下载开源项目</strong></p><p>先到项目项目主页，点击<strong>Download</strong>下载源码包。</p><p></p><p></p><p class="img-center"><img alt="图片" height="897" src="https://i-blog.csdnimg.cn/img_convert/a33950d51db6827464f384fd88cf06e0.png" width="1080"></p><p>开源项目下载页面</p></li><li><p><strong>解压并打开项目</strong>下载做完后解压，用<strong>VS Code</strong>打开计划文件夹。</p><p></p></li></ol><p></p><h3>二、环境配置与项目构建</h3><ol><li><p><strong>安装 Node.js 环境</strong>在运行项目前，要求提前到Node官网安装好 Node.js 并安装环境变量。</p></li><li><p><strong>修改.env文件后缀</strong>，避免运行时报错。</p><p></p><p class="img-center"><img alt="图片" height="950" src="https://i-blog.csdnimg.cn/img_convert/bb7d57e25e5607cf21862522c0e286d7.png" width="516"></p><p></p></li><li><p><strong>打开终端进行构建</strong>在 VS Code 中新建一个终端，依次执行以下步骤：</p></li></ol>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code># 安装 pnpm
npm install -g pnpm
# 安装依赖
pnpm install
# 本地运行预览
pnpm run dev
# 构建项目
pnpm run build</code></pre>
<p>构建完毕后，会生成一个<strong>dist 文件夹</strong>最终的静态资源。就是，里面就</p><p></p><p class="img-center"><img alt="图片" height="644" src="https://i-blog.csdnimg.cn/img_convert/4d16de21927568e3fe4b4ccc6a4bc8eb.png" width="1080"></p><p>终端运行命令</p><p></p><p></p><p class="img-center"><img alt="图片" height="756" src="https://i-blog.csdnimg.cn/img_convert/360197c632002a2bc7131a463c6ebecb.png" width="485"></p><p></p><p>生成dist静态资源文件<br></p><p></p><h3>三、Cloudflare Pages 部署</h3><p><strong>1.进入 Cloudflare 控制台</strong>登录 Cloudflare，点击<strong>Pages</strong> 新建项目。</p><p></p><p></p><p class="img-center"><img alt="图片" height="601" src="https://i-blog.csdnimg.cn/img_convert/62987b342552004f3d7de49c1117480e.png" width="1080"></p><p>Cloudflare Pages 新建项目</p><ul><li><p>直接关联 GitHub 仓库</p></li><li><p>手动上传本地的静态资源</p></li></ul><p></p><p class="img-center"><img alt="图片" height="597" src="https://i-blog.csdnimg.cn/img_convert/333c6cb96152ec197109826d65267669.png" width="1080"></p><p></p><p></p><p><strong>2.上传项目</strong>Pages 拥护两种方式上传：</p><p></p><p>这里选择上传刚刚生成的<strong>dist 文件夹</strong>。</p><p></p><p></p><p class="img-center"><img alt="图片" height="609" src="https://i-blog.csdnimg.cn/img_convert/3e1d80224f2de213dca050a2ac4cc573.png" width="1080"></p><p></p><p>上传 dist 文件夹<strong>3.获取默认域名</strong>上传达成后，Cloudflare 会分配一个免费的默认域名，网站就能直接访问了。</p><p></p><p class="img-center"><img alt="图片" height="536" src="https://i-blog.csdnimg.cn/img_convert/ff4b55cf695239926731585a50ae3fbe.png" width="1080"></p><p></p><p>Cloudflare 默认域名访问截图</p><p></p><p></p><h3>四、绑定自定义域名</h3><p>如果想要更个性化的地址，行绑定自己的域名。</p><p><strong>1.购买域名</strong>在 <strong>阿里云</strong>、<strong>腾讯云</strong>等平台购买即可。</p><p><strong>2.绑定到 Cloudflare</strong>在 Pages 项目设置里，选择<strong>自定义域名</strong>，输入你购买的域名并点击<strong>激活域</strong>。</p><p></p><p class="img-center"><img alt="图片" height="613" src="https://i-blog.csdnimg.cn/img_convert/fa7b1d2fe336a2b775c3a07ecc12ce9f.png" width="1080"></p><p></p><p></p><p class="img-center"><img alt="图片" height="803" src="https://i-blog.csdnimg.cn/img_convert/0f326f020046496508ec4390fbb518ab.png" width="1080"></p><p></p><p><strong>3.等待验证</strong>系统会自动进行解析和验证，几分钟后就能通过自己的独立域名访问网站了。</p><p></p><p class="img-center"><img alt="图片" height="418" src="https://i-blog.csdnimg.cn/img_convert/d51a0f88789892f3af1bd5165879b8ca.png" width="1080"></p><p></p><p></p><p class="img-center"><img alt="图片" height="520" src="https://i-blog.csdnimg.cn/img_convert/04026e3e2ad3389262da62ab19ba7b3e.png" width="1080"></p><p></p><h3>五、总结</h3><p>到这里，我们就完毕了一个完整流程：</p><ul><li><p>下载并构建开源项目</p></li><li><p>上传到 <strong>Cloudflare Pages</strong></p></li><li><p>绑定自定义域名，拥有属于自己的网站</p></li></ul><p>刚部署达成时，访问可能会稍微慢一点，等缓存和验证完成后就会正常。</p><p>这样，一个完全属于自己的个人网站就搭建好了！是不是很容易？</p><p>如果你也想要尝试建站，不妨动手实践一下。后面我还会分享<strong>如何购买域名并配置解析</strong>的详细教程，敬请期待。</p></div>
---
<div style="background: rgba(255, 247, 237, 1); padding: 16px 20px; border-left: 4px solid rgba(249, 115, 22, 1); margin-top: 30px">
<h3 style="color: rgba(194, 65, 12, 1); margin-top: 0; font-size: 16px"> 相关课程</h3>
<ul style="line-height: 2; font-size: 14px; padding-left: 20px">
<li><strong>趣谈网络协议</strong><br>
<span style="color: rgba(136, 136, 136, 1); font-size: 13px"> 刘超 | 轻松掌握网络协议核心原理</span></li>
</ul>
<hr style="border-top: 1px solid rgba(225, 228, 232, 1); border-right: none; border-bottom: none; border-left: none; margin: 15px 0">
<p style="font-size: 14px; color: rgba(51, 51, 51, 1); margin-bottom: 5px"> 开发环境</p>
<ul style="line-height: 2; font-size: 14px; padding-left: 20px">
<li>【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中</li>
</ul>
</div><br><br>
来源：https://www.cnblogs.com/ycfenxi/p/19105808
頁:
[1]