保姆级教程 · 基于 fangeai.com 真实搭建

零代码搭个人主页 · 保姆级全指南

一行代码不用写，一个下午搞定。总成本：域名 $10/年（可选），其余全部免费。本指南每一步都踩过坑验证过。

前置准备：你需要注册 3 个账号

为什么选这套组合？
GitHub = 免费代码仓库，Cloudflare 自动从 GitHub 拉取代码部署；Cloudflare Pages = 境外托管，不用 ICP 备案，国内可访问；AI 对话工具 = 你不需要会写代码，只需要会用对话框。

第 1 步：让 AI 生成你的网站代码

1.1 准备一段 Prompt

打开你选的 AI 对话工具，把下面这段话发给它（括号里的内容改成你自己的）：

请帮我用 Astro v5 框架生成一个个人主页静态网站。

要求：
- 风格：暖色衬线风，类似一本精致的杂志
- 配色：暖白底 #f5f0e8 + 深红强调色 #b84a3c
- 字体：标题用 Vollkorn（衬线），正文用 Gentium Book Basic（衬线）
- 页面包含：首页（自我介绍 + 文章列表）、关于页（详细简介）、博客文章页
- 导航栏：全宽毛玻璃效果，滚动时加阴影
- 页面最大宽度 1080px，居中显示
- 响应式适配手机端

我的信息：
- 名字：（你的名字）
- 一句话介绍：（例如：不会写代码的互联网科技人，在 B2B SaaS 行业摸爬滚打十几年）
- 自我介绍段落：（写 2-3 句话介绍你自己）

请输出完整的文件结构和每个文件的代码。

1.2 拿到代码后做什么

AI 会给你一堆文件。把它们保存到本地一个文件夹里，结构大概是这样：

my-website/
├── astro.config.mjs          ← 项目配置
├── package.json              ← 依赖声明
├── src/
│   ├── layouts/BaseLayout.astro  ← 全局布局（导航栏 + 页脚）
│   ├── pages/
│   │   ├── index.astro       ← 首页
│   │   ├── about.astro       ← 关于页
│   │   └── blog/
│   │       ├── index.astro   ← 文章列表页
│   │       └── [...slug].astro ← 文章详情页
│   └── content/blog/         ← 在这里放 .md 文章
└── public/images/            ← 图片放这里

1.3 本地预览（确认长什么样）

# 安装依赖（只需第一次）
npm install

# 启动本地预览服务器
npm run dev

然后浏览器打开 http://localhost:4321 就能看到你的网站了。

如果 npm install 报错？
确保你电脑装了 Node.js（去 nodejs.org 下载安装版，一路下一步就行），版本要求 Node.js 18 或以上；Mac 用户也可以用 brew install node。

第 2 步：把代码上传到 GitHub

方式 A：网页拖拽上传（最简单，推荐新手）

1. 在仓库页面找到 "uploading an existing file" 链接
2. 把你本地项目文件夹里的所有文件拖进去（除了 node_modules/ 文件夹和 package-lock.json）
3. 底部填 commit message：init: 个人主页初始版本
4. 点击 Commit changes

方式 B：用 Git 命令行

cd my-website
git init
git add .
git commit -m "init: 个人主页初始版本"
git branch -M main
git remote add origin https://github.com/你的用户名/my-website.git
git push -u origin main

在 GitHub 仓库页面应该能看到所有文件（如 src/pages/index.astro），说明上传成功。

第 3 步：Cloudflare Pages 一键部署

这是最关键的一步，也是最容易踩坑的地方。

⚠️ 大坑：一定要选对类型！
选 Pages（连接 Git 仓库），不要选 Worker（跑代码的，不是托管网站的），也不要选 Functions 类型。

点击 Save and Deploy，等 1-2 分钟，你会看到一个类似 my-homepage.pages.dev 的临时域名，点开它，网站就上线了！

第 4 步：绑定自己的域名（可选，推荐）

买域名：Cloudflare 左侧菜单 → Registrar → 搜索你想买的域名（如 yourname.com 或 .ai / .dev / .me）→ 价格一般 $9-11/年（Cloudflare 按成本价卖，不加价）→ 结账。

域名挑选建议：.com 最经典但好名字贵；.ai 适合科技/AI 个人品牌；.dev/.me 便宜有个性；避免太长，好记最重要。

绑定到 Pages 项目：回到 Workers & Pages → 点击你的项目 → Custom domains → 输入域名 → Activate domain。DNS 自动配置，等几分钟生效。

第 5 步：以后怎么更新内容

写新文章

在项目的 src/content/blog/ 目录下新建一个 .md 文件：

---
title: 你的文章标题
date: 2026-07-24
draft: false
---

这里是文章正文，用 Markdown 写就行了。支持 **加粗**、*斜体*、列表、图片等。

保存后，推送到 GitHub（方式同第 2 步），Cloudflare 会自动重新部署。

更新的完整流程

改文件 → 推送到 GitHub main 分支 → 等 1-2 分钟 → 浏览器 Cmd+Shift+R 硬刷新

硬刷新很重要！浏览器会缓存旧版本，普通刷新（F5）可能看到的还是旧的。Mac 用 Cmd+Shift+R，Windows 用 Ctrl+Shift+R。

🚨 避坑指南（每一条都是真金白银换来的教训）

坑 1：误建成 Worker 而不是 Pages

现象：部署成功但访问报错，或控制台全是 Worker 相关选项。解决：删掉重来，确保选的是 Pages → Connect to Git。

坑 2：生产分支设成 master 而不是 main

现象：GitHub 上代码是最新的，但线上一直是旧版或空白。解决：Cloudflare → 项目 → Settings → Builds & deployments，把 Production branch 改成 main，改完后再推送一次 commit 触发构建。

坑 3：HTML 标签没闭合导致整页样式崩掉

现象：网站突然变成裸奔状态——没有排版、没有颜色。预防：编辑后用 VS Code 标签配对高亮检查；每次改动后本地 npm run build 确认不报错再推送。

坑 4：浏览器缓存让你以为没更新

解决：Cmd+Shift+R（Mac）/ Ctrl+Shift+R（Windows）强制刷新；还不行就开无痕模式。

坑 5：simpleicons 的图标 URL 返回 404

解决：先去 simpleicons.org 搜索确认 slug 是否存在；找不到的图标改用自定义文字 logo（CSS 渐变背景 + 白色文字）。

坑 6：沙箱环境 git push 失败

现象：某些网络环境下 git push 报 502 CONNECT tunnel failed。解决：改用 GitHub CLI（gh）通过 API 推送，绕过 git push。

💰 免费额度与成本明细

结论：个人站可以做到 接近零成本运行。唯一的花销是域名，一年不到一杯咖啡钱。

📁 完整文件清单参考

project-root/
├── astro.config.mjs           # Astro 配置（站点URL、sitemap）
├── package.json               # 依赖列表
├── public/
│   ├── favicon.svg            # 网站图标
│   └── images/                # 图片资源
├── src/
│   ├── components/            # 可复用组件
│   ├── layouts/BaseLayout.astro
│   ├── pages/
│   │   ├── index.astro        # 首页
│   │   ├── about.astro        # 关于页
│   │   └── blog/              # 博客列表 + 详情
│   └── content/blog/          # Markdown 文章
└── README.md

延伸阅读： 关于帆哥 · 博客文章 · 本指南对应项目（GitHub，可 fork 当模板）