返回文章列表
Next.jsCloudflareGitHub个人网站部署

个人网站从 0 到上线：半天完成的完整操作手册

上篇搞清楚了概念，这篇直接上手——从 AI 生成网站框架到绑定域名正式上线，6 个步骤，约半天完成。

上篇我们搞清楚了概念——代码仓库、托管平台、域名是怎么协作的。 这篇直接上手操作，从 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，按照指引安装。也可以替换为 Cursor。

安装 Node.js 后，在命令行输入 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 注册（原因：无续费溢价，与后续托管同平台）

操作步骤：

  1. 访问 dash.cloudflare.com，注册账号（免费）
  2. 左侧菜单 → Domain Registration → Register Domains
  3. 在搜索框输入你想要的域名，如 yourname.com
  4. 选择可用的域名，点击购买（年费约 $8～$15 不等）

搜索域名后会看到可用性列表，绿色对勾表示可以购买，红色叉号表示已被注册。

域名命名建议：

  • 首选 .com，其次 .dev（技术人员常用）、.ai（AI 方向）
  • 用你的名字、昵称或品牌词，简短好记
  • 避免数字和连字符（不易口头传播）

第三步：将代码推送到 GitHub

GitHub 是代码的存放仓库，也是 Cloudflare Pages 自动部署的来源。

3.1 注册 GitHub 账号

访问 github.com，注册一个免费账号。

3.2 创建代码仓库

  1. 登录后点击右上角 + → New repository
  2. Repository name 填写：my-personal-website（或任意英文名）
  3. 选择 Public（公开，Cloudflare 需要读取）
  4. 不要勾选 "Add a README file"
  5. 点击 Create repository

3.3 从本地推送代码

在命令行中，进入你的项目目录，依次运行：

git init                          # 初始化 Git（只需第一次）
git add .                         # 标记所有文件为待提交
git commit -m "init: 初始提交"    # 保存这次快照
git branch -M main                # 设置主分支名为 main
git remote add origin https://github.com/your-username/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，实现每次推送代码自动更新网站。

操作步骤

  1. Cloudflare Dashboard → 左侧菜单 Workers & Pages
  2. 点击 Create application → Pages → Connect to Git
  3. 授权连接 GitHub，选择 my-personal-website 仓库
  4. 填写构建配置（这步很关键，填错会构建失败）：
Framework preset:       Next.js (Static HTML Export)
Build command:          npm run build
Build output directory: out
  1. 展开 Environment variables（环境变量），添加一条：
变量名：NODE_VERSION
变量值：20
  1. 点击 Save and Deploy，等待约 2 分钟

构建过程中可以看到实时日志。出现绿色 "Success" 字样即构建成功。成功后会得到一个临时访问地址，如 my-personal-website.pages.dev，可以直接访问验证网站是否正常。

第五步：绑定自定义域名

现在把你注册的域名绑定到刚部署好的 Cloudflare Pages 项目上。

操作步骤

  1. 进入 Cloudflare Pages 中的 my-personal-website 项目
  2. 点击 Custom domains 标签 → Set up a custom domain
  3. 输入你的域名（如 www.yourname.com）→ 点击 Continue
  4. 因为域名和 Pages 项目在同一个 Cloudflare 账号下，DNS 会自动配置
  5. 点击 Activate domain 确认
  6. 等待 SSL 证书生成（通常 5 分钟内，状态变为 Active）
  7. 在浏览器输入你的域名，个人网站正式上线 🎉

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://演示链接",      // 在线演示（可选）
  featured: true,               // true = 在首页展示
},

6.2 写博客文章

在 content/posts/ 文件夹下新建一个 .mdx 文件（文件名用英文，如 my-first-post.mdx）：

---
title: 文章标题
date: 2026-04-06
tags: [标签1, 标签2]
excerpt: 一句话文章摘要，显示在列表页。
---

## 第一节

正文内容，支持完整 Markdown 语法。

**加粗**、*斜体*、`代码`、[链接](https://网址)

- 列表项 1
- 列表项 2

Obsidian 用户：可以直接把 Obsidian 的 Vault 设置到 content/posts/ 目录，在 Obsidian 里写好文章后推送即可，格式完全兼容。

6.3 修改完成后，推送更新

每次修改完内容，在命令行运行：

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 转发到你的私人邮箱
返回文章列表