零基础用 Cloudflare Pages 免费部署你的个人网站
565 字
3 分钟
零基础用 Cloudflare Pages 免费部署你的个人网站
想做个个人网站,又不想买服务器?Cloudflare Pages 是我目前用过最省心的方案:免费、全球 CDN 加速、支持自定义域名,个人博客和作品集完全够用。
这篇教程按我实际部署的流程来写,你照着做就能上线。
为什么选 Cloudflare Pages
- 免费:无限流量、每天 10 万次请求,个人网站用不完
- 快:全球 CDN 节点,国内外访问都还行
- 省心:不需要服务器、不需要 Nginx、不需要备案
- 灵活:支持纯静态网站,也支持 Astro、Next.js 等框架
第一步:准备静态文件
不管网站是用什么写的,最后都要生成一个静态文件目录(通常是 dist/ 或 public/)。
以 Astro 为例:
npm run build# 生成 dist/ 目录如果你只有几个 HTML 文件,直接把文件夹整理好就行,不需要任何构建工具。
第二步:安装 wrangler CLI
wrangler 是 Cloudflare 官方的命令行工具:
npm install -g wrangler第三步:登录并创建项目
# 登录(会打开浏览器授权)wrangler login
# 创建 Pages 项目(项目名自己取)wrangler pages project create my-site --production-branch main第四步:部署
wrangler pages deploy dist --project-name my-site --branch main看到 ✨ Deployment complete! 就成功了,会给你一个 https://my-site.pages.dev 的地址,直接访问。
注意:
--branch main要带上,否则会部署到 Preview 环境,主域名打不开。
第五步:绑定自定义域名
- 进入 Cloudflare 控制台 → Workers 和 Pages → 你的项目
- 点「自定义域」→ 添加你的域名
- 按提示把域名 NS 指到 Cloudflare(或 CNAME 验证)
绑定成功后,你的域名和 pages.dev 地址都可以访问。
几个实用建议
- 先本地预览再部署:部署前用
npm run preview之类命令本地跑一遍,避免把坏页面发上去 - 记得提交 sitemap:部署完成后去必应站长工具提交
https://你的域名/sitemap-index.xml,让搜索引擎收录 - 用 IndexNow 加速收录:发布新内容后通过 IndexNow API 通知必应,几小时内就能被抓取
本站就是用这套流程部署的,从零到上线花了不到半小时。如果你有自己的域名,绑定之后网站会显得更专业。
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!
零基础用 Cloudflare Pages 免费部署你的个人网站
https://xmu.p8.ink/posts/cloudflare-pages-guide/相关文章智能推荐
1
Markdown 写作入门:常用语法一篇文章学会
教程面向写作场景的 Markdown 语法速查:标题、列表、表格、代码块、引用、图片链接,看完就能上手写博客。
2
5 款提升效率的 Windows 软件,每一款都值得装
教程推荐 5 款实用且免费的 Windows 效率软件:文件搜索、截图、快速预览、窗口管理、剪贴板增强。
3
用 XingBili 在电视和手机上畅刷 B 站
软件推荐介绍一款清爽无广告的哔哩哔哩第三方客户端 XingBili,支持 Android 手机和电视大屏,附安装下载方式。
4
欢迎来到星慕小栈
随笔星慕小栈正式开张啦!这里是我的个人博客,记录技术、生活与思考。欢迎常来坐坐。
随机文章随机推荐













