个人网站从 0 到上线：半天完成的完整操作手册（下）
上篇我们搞清楚了概念——代码仓库、托管平台、域名是怎么协作的。传送门https://blog.csdn.net/FILOMENA/article/details/159916350?spm=1011.2124.3001.6209
这篇直接上手操作，从 AI 生成网站框架，到绑定域名正式上线，6 个步骤，约半天完成。
全流程概览
准备环境（30 分钟）
↓
第一步：用 AI 生成网站框架（2～4 小时）
↓
第二步：注册个人域名（10 分钟）
↓
第三步：代码推送到 GitHub（10 分钟）
↓
第四步：部署到 Cloudflare Pages（5 分钟）
↓
第五步：绑定自定义域名（5 分钟）
↓
第六步：日常更新内容（每次 5 分钟）
合计：约半天
准备工作：安装必要工具
在开始之前，需要在电脑上安装 4 个工具（全部免费）：
① Node.js（网站运行环境）
前往 nodejs.org，下载 LTS 版本安装包，一路点下一步即可。
② Git（版本管理工具）
前往 git-scm.com，下载安装。安装完后在命令行输入 git --version，出现版本号说明安装成功。
③ VS Code（代码编辑器，类似 Word 但用来编辑代码文件）
前往 code.visualstudio.com 下载安装。
④ Claude Code（AI 编程工具）
前往 claude.ai/claude-code，按照指引安装。这是本教程使用的 AI 工具，也可以替换为 Cursor。
📸 图示说明：安装 Node.js 时，在命令行（Windows 搜索"cmd"，Mac 搜索"终端"）输入
node -v，出现版本号如v20.x.x即为安装成功。
第一步：用 AI 生成网站框架
1.1 打开 Claude Code，描述你的需求
关键：把需求一次性写清楚，不要边做边加。
以下是一个可以直接使用的提示词模板（根据自己需求修改）：
帮我用 Next.js + Tailwind CSS 搭建一个个人网站，要求：
网站定位：个人技术作品集 + 博客
视觉风格：深色主题，紫色/蓝色点缀色，简洁专业
包含模块：
- 首页（个人介绍 + 各模块精选展示）
- 项目页（展示个人项目，含技术标签和链接）
- 博客页（文章列表 + 详情页）
- 工具合集页（展示常用在线工具）
其他要求：
- 支持中英双语切换
- 静态导出模式，用于部署到 Cloudflare Pages
- 内容用 TypeScript 数据文件管理，博客用 MDX 格式
💡 提示：越具体越好。如果有参考网站，可以附上链接说"风格参考这个网站"。
1.2 跟着 AI 完成搭建
Claude Code 会逐步生成文件、安装依赖、配置项目。期间如果出现报错，直接把完整报错信息粘贴给它，它会自动排查修复。
1.3 本地验证两个关键命令
网站生成后，在命令行（cd 到项目目录后）运行：
# 命令 1：本地预览
npm run dev
# 成功后访问 http://localhost:3000，能看到网站页面即可
# 命令 2：打包验证
npm run build
# 成功后出现 "✓ Generating static pages" 字样，无红色报错即可
📸 图示说明：
npm run dev成功后，浏览器打开 http://localhost:3000 可以看到你的网站预览效果。这只是本地预览，别人暂时还看不到。
第二步：注册个人域名
推荐在 Cloudflare 注册（原因：无续费溢价，与后续托管同平台）
操作步骤：
- 访问 dash.cloudflare.com，注册账号（免费）
- 左侧菜单 → Domain Registration → Register Domains
- 在搜索框输入你想要的域名，如
yourname.com - 选择可用的域名，点击购买（年费约 $8～$15 不等）
📸 图示说明：搜索域名后会看到可用性列表，绿色对勾表示可以购买，红色叉号表示已被注册。
域名命名建议：
- 首选
.com，其次.dev（技术人员常用）、.ai（AI 方向） - 用你的名字、昵称或品牌词，简短好记
- 避免数字和连字符（不易口头传播）
- 示例：
zhangsan.dev、myportfolio.com、yourname.ai
第三步：将代码推送到 GitHub
GitHub 是代码的存放仓库，也是 Cloudflare Pages 自动部署的来源。
3.1 注册 GitHub 账号
访问 github.com，注册一个免费账号。
3.2 创建代码仓库
- 登录后点击右上角 + → New repository
- Repository name 填写：
my-personal-website（或任意英文名） - 选择 Public（公开，Cloudflare 需要读取）
- 不要勾选 “Add a README file”
- 点击 Create repository
📸 图示说明：创建成功后，页面会显示一段 git 命令，复制其中的仓库地址备用，格式参考：
https://github.com/你的用户名/my-personal-website.git
3.3 从本地推送代码
在命令行中，进入你的项目目录，依次运行：
git init # 初始化 Git（只需第一次）
git add . # 标记所有文件为待提交
git commit -m "init: 初始提交" # 保存这次快照
git branch -M main # 设置主分支名为 main
git remote add origin https://github.com/你的用户名/my-personal-website.git
git push -u origin main # 推送到 GitHub
📸 图示说明：推送成功后，刷新 GitHub 仓库页面，可以看到你的项目文件已经出现在仓库里。
后续每次更新，只需运行这 3 条：
git add .
git commit -m "简单描述本次改动"
git push origin main
第四步：部署到 Cloudflare Pages
这一步把 GitHub 仓库连接到 Cloudflare Pages，实现每次推送代码自动更新网站。
操作步骤
- Cloudflare Dashboard → 左侧菜单 Workers & Pages
- 点击 Create application → Pages → Connect to Git
- 授权连接 GitHub，选择
my-personal-website仓库 - 填写构建配置（这步很关键，填错会构建失败）：
Framework preset: Next.js (Static HTML Export)
Build command: npm run build
Build output directory: out
- 展开 Environment variables（环境变量），添加一条：
变量名：NODE_VERSION
变量值：20
- 点击 Save and Deploy，等待约 2 分钟
📸 图示说明：构建过程中可以看到实时日志。出现绿色 “Success” 字样即构建成功。成功后会得到一个临时访问地址，如
my-personal-website.pages.dev，可以直接访问验证网站是否正常。
第五步：绑定自定义域名
现在把你注册的域名绑定到刚部署好的 Cloudflare Pages 项目上。
操作步骤
- 进入 Cloudflare Pages 中的
my-personal-website项目 - 点击 Custom domains 标签 → Set up a custom domain
- 输入你的域名（如
www.yourname.com）→ 点击 Continue - 因为域名和 Pages 项目在同一个 Cloudflare 账号下，DNS 会自动配置
- 点击 Activate domain 确认
- 等待 SSL 证书生成（通常 5 分钟内，状态变为 Active）
- 在浏览器输入你的域名，个人网站正式上线 🎉
📸 图示说明：Custom domains 页面中，域名状态从 “Initializing” 变为 “Active” 表示绑定成功。如果等待超过 30 分钟未变化，可以尝试刷新页面。
如果域名在其他服务商（如 Namecheap、阿里云）：
需要在那个服务商的 DNS 管理后台，手动添加一条 CNAME 记录：
- 主机名（Host）：
www - 值（Value）：Cloudflare Pages 给出的
xxx.pages.dev地址
第六步：日常更新内容
网站上线后，以下是最常见的 3 种更新操作。
6.1 添加新项目
用 VS Code 打开 content/projects.ts 文件，在数组最前面加入：
{
id: "project-2026", // 任意唯一英文 ID
title: "项目名称",
titleEn: "Project Name", // 英文名（可选）
description: "项目描述，2-3句话说明做了什么。",
tech: ["Python", "Excel"], // 技术标签
demo: "https://演示链接", // 在线演示（可选）
download: "/downloads/文件.zip", // 下载链接（可选）
featured: true, // true = 在首页展示
},
6.2 写博客文章
在 content/posts/ 文件夹下新建一个 .mdx 文件（文件名用英文，如 my-first-post.mdx）：
---
title: 文章标题
date: 2026-04-03
tags: [标签1, 标签2]
excerpt: 一句话文章摘要，显示在列表页。
---
## 第一节
正文内容，支持完整 Markdown 语法。
**加粗**、*斜体*、`代码`、[链接](https://网址)
- 列表项 1
- 列表项 2
💡 Obsidian 用户：可以直接把 Obsidian 的 Vault 设置到
content/posts/目录，在 Obsidian 里写好文章后推送即可，格式完全兼容。
6.3 添加工具
用 VS Code 打开 content/tools.ts 文件，在数组中加入：
{
id: "tool-id",
title: "工具名称",
description: "这个工具做什么，适合什么场景。",
url: "https://工具官网",
category: "ai", // ai / dev / design / productivity / writing / other
tags: ["标签"],
featured: true,
image: "https://工具官网/og.png", // 封面图（可选，直接用官网 og 图）
},
6.4 修改完成后，推送更新
每次修改完内容，在命令行运行：
git add .
git commit -m "add: 描述这次改了什么"
git push origin main
推送后约 2 分钟，网站自动更新。可以在 Cloudflare Dashboard → Pages → 项目 → Deployments 查看构建进度。
常见问题
Q：推送后网站没有更新？
进入 Cloudflare Dashboard → Workers & Pages → 你的项目 → Deployments，查看最新一条构建记录的状态。点击查看日志，红色部分就是报错原因。把报错信息复制给 Claude Code，让它帮你排查。
Q：npm run build 报错怎么办？
把完整的报错信息（通常是红色文字）复制给 Claude Code，告诉它"我在运行 npm run build 时报错了"，它会帮你定位和修复。
Q：域名绑定后一直显示 Initializing？
等 10～15 分钟，DNS 生效需要时间。如果超过 30 分钟，检查 Cloudflare DNS 里是否有一条 CNAME 记录指向 Pages 项目。
Q：可以托管多个项目用同一个域名吗？
可以。在 Cloudflare Pages 里新建一个项目，连接对应仓库，绑定子域名（如 project.yourname.com）。每个项目独立运行，互不影响。子域名数量理论上无限制。
Q：文件里修改了中文内容，推送后网站乱码？
确保文件保存格式为 UTF-8，VS Code 右下角可以查看和切换编码格式。
全流程时间参考
| 阶段 | 预计时间 |
|---|---|
| 安装工具 | 30 分钟 |
| AI 生成网站框架 | 2～4 小时 |
| 注册域名 | 10 分钟 |
| 推送 GitHub | 10 分钟 |
| 部署 Cloudflare Pages | 5 分钟 |
| 绑定域名 | 5 分钟 |
| 合计 | 约半天 |
后续可以做的事
网站上线只是起点。以下是可以持续扩展的方向：
- 填充真实内容：把示例项目替换成自己的真实项目，写第一篇真正的博客文章
- 添加子域名项目：把其他项目部署到
project.yourname.com，在主站项目页展示链接 - 添加访问统计：在 Cloudflare Dashboard 里可以直接查看访客数据，也可以接入 Google Analytics
- 配置邮箱转发：Cloudflare 提供免费的邮箱转发，可以配置
hello@yourname.com转发到你的私人邮箱
本文基于 Claude Code + Next.js + Cloudflare Pages 实际搭建经验整理。所有工具均为免费使用（域名除外），适合个人网站和轻量项目托管。
Hey,我是一只肥罗，坚持做一些有意思的事情
「愿始于我，但不止于我」
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
6
0- 0
已为社区贡献9条内容
所有评论(0)