用Claude Code从零搭建个人网站并部署上线全流程

在AI编程工具日益成熟的今天，即便没有深厚的前端功底，也能借助AI完成一个完整网站从设计、开发到部署上线的全流程。本文基于一位B站UP主的实操演示，梳理如何用 Claude Code 编写个人品牌网站，并通过一台 99元/年的阿里云服务器 完成部署上线，形成一套可复用的开发运维闭环。

关于 Claude Code：Claude Code 是 Anthropic 公司推出的命令行 AI 编程助手，运行在终端环境中，能够直接读写本地文件系统、执行 shell 命令、调用 Git 操作。与 GitHub Copilot 等代码补全工具不同，Claude Code 更擅长理解整个项目上下文后拆解任务、自主执行多步骤操作，是目前「代理式编程（Agentic Coding）」范式的代表性工具之一，本质上是让大语言模型直接介入软件工程的完整生命周期。

代理式编程的范式背景：传统AI编程辅助（如早期的Copilot）本质上是「自动补全的高级版」，模型只能感知当前文件的局部上下文。而代理式编程赋予模型工具调用（Tool Use）能力，使其能够读写文件系统、执行终端命令、调用外部API，从而自主完成「分析需求→拆解任务→编写代码→运行调试→验证结果」的完整循环。Claude Code、Devin、OpenHands等工具均属于这一范式，其底层支撑是ReAct（Reasoning + Acting）等推理框架，允许模型在「思考」与「行动」之间反复迭代，直至任务完成。这一范式转变意味着开发者的角色也在悄然重塑——从亲手编写每一行代码，转向清晰定义需求边界、审查AI产物并把控技术方向。

前期准备：先有方案，再动手

与直接让AI「写个网站」相比，更聪明的做法是先产出一份清晰的需求方案。作者在动工前，先与大模型对话生成了一份「个人品牌网站方案文档」，其中包含：网名、内容方向、后续要绑定的域名、技术方案细节、自我介绍以及各平台联系方式。

这一步的价值在于——给AI一个明确的上下文边界。当把这份Markdown方案文档放进项目目录后，只需一句「请你根据当前的方案帮我实现一下我的个人网站」，Claude Code便会把任务拆解为14个步骤逐一执行，最终生成完整的网站代码。

本地预览与迭代优化

生成后，作者让Claude Code「把项目在本地运行起来」以查看效果。真正体现AI编程价值的是自然语言驱动的迭代：作者提出了三处优化需求——首页向下箭头点击无反应、打字机效果应在元素进入视口时才触发、右下角需要增加「回到顶部」按钮。

这些在传统开发中需要手写JavaScript事件监听、IntersectionObserver动画触发的工作，如今只需一段口语化描述，Claude Code便能准确定位并修改代码。

IntersectionObserver 是什么：IntersectionObserver 是现代浏览器提供的原生 Web API，用于异步观察目标元素与视口（viewport）的交叉状态。在此之前，开发者通常借助 scroll 事件监听配合 getBoundingClientRect() 手动计算元素位置，不仅代码繁琐，还因在主线程频繁触发而导致滚动卡顿。IntersectionObserver 将这一计算移至浏览器底层，性能更优且代码更简洁，是实现「滚动动画按需触发」的现代标准方案。值得一提的是，该API同样是实现图片懒加载（Lazy Loading）、无限滚动列表（Infinite Scroll）和曝光埋点统计的首选技术基础，在现代前端工程中应用极为广泛。更深层的设计哲学在于「观察者模式」（Observer Pattern）——组件不需要主动轮询状态，而是注册回调等待浏览器通知，这种被动触发机制在事件驱动的前端架构中有着广泛的应用。

优化后网站在PC端和移动端均有良好表现，响应式适配无需额外交代。

购买阿里云99元服务器

网站做好后，下一步是找一个「家」。作者选择了阿里云的「99计划」——一年99元且续费同价的云服务器，性价比极高，原价通常在千元以上。

几个实操要点值得注意：

• 一个身份证只能购买一台，需先完成实名认证才能下单；
• 地域就近选择（作者在深圳选华南1），操作系统选了Ubuntu 22；
• 带宽为3M，虽不高，但对个人展示型网站完全够用。

关于云服务器的虚拟化底层：阿里云99元服务器基于虚拟化技术（通常为KVM或自研神龙架构）将物理服务器切分为多个独立实例，每个实例拥有独立的CPU配额、内存、磁盘和公网IP，与其他租户完全隔离。Ubuntu 22.04 LTS（Long Term Support）是当前主流的生产级Linux发行版，Canonical承诺提供至2027年的安全补丁支持，是个人站点和中小企业服务器的首选操作系统之一。选择LTS版本而非最新版的核心逻辑在于：稳定性和长期安全支持优先于最新特性，这是生产环境运维的基本原则。

关于3Mbps带宽的承载力：理论下行速率约375KB/s，看似有限，但对于经过Nginx gzip压缩、静态资源合理缓存的个人主页，首屏资源总量通常在200-500KB之间，单用户加载时间约1-2秒，完全在可接受范围内。更关键的是，浏览器缓存会使二次访问几乎零带宽消耗。若未来流量增长，还可考虑将图片、字体等大体积静态资源托管至阿里云OSS或Cloudflare CDN，用户从地理位置最近的边缘节点获取内容，既能大幅提升加载速度，又能节省服务器出口带宽——这是个人站点流量增长后最自然的升级路径。若仅需提升带宽上限，阿里云支持在控制台按需升级，按小时计费，无需重装系统或迁移数据。对于日均访问量百级别的个人站点，99元/年的配置是极具性价比的起点选择。

购买支付后，实例通常1~5分钟开通完成。控制台会分配一个公网IP，这是服务器对外的唯一地址。作者特别强调：生产环境一般不会直接暴露IP，而是购买域名绑定到服务器上，这也是后续要做的备案与HTTPS工作。

代码托管：Git与GitHub

作者采用的部署思路是一条清晰的主流工作流：本地初始化Git仓库 → 推送到GitHub → 服务器拉取代码 → 打包部署。

Git的分布式设计哲学：Git由Linux之父Linus Torvalds于2005年为管理Linux内核代码而创建。与SVN等集中式版本控制不同，Git的每个本地仓库都包含完整的提交历史，无需联网即可提交、回滚和查看日志。其分支（Branch）和合并（Merge）机制使并行开发成为可能，也是GitHub上数亿个开源项目协作的技术基础。本文中「本地仓库→GitHub远端→服务器克隆」的三点拓扑，正是Git分布式特性的经典应用场景之一。

第一步仍交给Claude Code完成：「请你帮我把本地仓库初始化成为Git仓库，注意添加Gitignore文件」。AI自动生成了 .gitignore 并忽略掉体积庞大的 node_modules 目录。

为什么要忽略 node_modules：node_modules 是 Node.js 项目的依赖安装目录，文件数量动辄数万个、体积数百 MB，其内容完全可通过 package.json 中的依赖声明重新执行 npm install 生成。将其纳入 .gitignore 是工程实践的基本共识，可保持仓库体积精简、提交历史干净，也是 GitHub 官方 Node 模板的默认配置。这一做法同样适用于Python的venv虚拟环境目录、Java的target构建目录等各语言生态中的「可再生产物」——凡是能从源文件重新生成的内容，都不应纳入版本控制。更深层的原因是：node_modules中包含平台相关的二进制文件（如node-gyp编译产物），在不同操作系统间直接复制往往会导致兼容性问题，通过npm install在目标平台重新生成才是正确的做法。

注册GitHub与安全加固

注册环节有个实用细节：作者发现 163邮箱当前无法用于GitHub注册，而QQ邮箱可以，为遇到类似问题的读者省去了排查时间。

注册完成后，强烈建议开启双因素认证（2FA）——GitHub后续也会强制要求。使用微软Authenticator等验证器App扫码绑定，并务必保存好恢复码，以防手机丢失后无法登录。

2FA的安全背景：GitHub从2023年起对所有活跃账号强制要求启用2FA，背景是软件供应链攻击的持续上升——攻击者通过撞库获取开发者账号后，可向开源库注入恶意代码，危害下游数百万用户。2FA在「你知道的」（密码）基础上叠加了「你拥有的」（手机设备）验证层，大幅提升账号安全性。从密码学角度，这是多因子认证（MFA）的最小化实现：即使攻击者获取了你的密码（单因子），也无法在没有物理设备的情况下通过验证。值得注意的是，SMS短信验证码因SIM卡劫持攻击（SIM Swapping）——攻击者通过社会工程学说服运营商将目标号码转移到自己的SIM卡——而被认为安全性较弱，推荐优先使用TOTP App（如Google Authenticator、1Password）或硬件安全密钥（如YubiKey）。恢复码应离线保存，切勿截图上传至云端。

用SSH密钥推送代码

相比HTTPS每次输入账号密码，推荐使用 SSH密钥，配置一次即可永久免密拉取和推送代码。

SSH 密钥认证原理：SSH 密钥认证基于非对称加密原理（通常采用Ed25519或RSA算法），本地生成一对密钥：私钥（private key）留存本地，公钥（public key）上传到 GitHub。建立连接时，服务端用公钥加密一段随机挑战数据（challenge）发回客户端，客户端用私钥解密后返回，以此证明身份合法，全程无需传输密码。这一设计的安全性建立在非对称加密的数学难题之上：从公钥反推私钥在计算上不可行，即使攻击者截获了公钥也无法伪造身份。相比 HTTPS 用户名/密码方式，SSH 密钥认证既免去了重复输入的繁琐，安全性也更高，是开发者日常与 Git 托管平台交互的主流方案。现代生产实践中通常进一步要求为私钥设置密码短语（passphrase），并将密钥添加至ssh-agent中托管，兼顾安全与便利——ssh-agent在内存中缓存解密后的私钥，会话期间无需重复输入passphrase。

核心流程为：

1. 检查本地是否已有 ~/.ssh 密钥；
2. 若无则用 ssh-keygen 生成，填入邮箱后一路回车；
3. 复制公钥内容，添加到GitHub的SSH Key设置中；
4. 用 ssh -T git@github.com 测试连通性。

连接成功后，通过 git add .、git commit、git push -u 三步，代码便顺利推送到了GitHub远端仓库。

服务器环境配置与部署

登录服务器后，部署工作按文档有条不紊地进行。整个环境搭建的关键步骤包括：

• 更新系统软件包，安装Git等基础工具；
• 为服务器同样生成SSH密钥并添加到GitHub（使服务器能拉取仓库代码）；
• 安装 Node.js、npm、pnpm 以及 PM2（进程守护）等运行时依赖；
• 进入 /opt 目录，通过SSH地址 git clone 克隆项目。

关于pnpm的选型背景：pnpm（performant npm）是npm和yarn的替代品，其核心创新在于「内容寻址存储」（Content-Addressable Store）——所有依赖包全局存储一份，不同项目通过硬链接（hard link）共享，避免了npm在每个项目中重复安装相同包的磁盘浪费。在磁盘空间有限的低配服务器上，pnpm能显著节省存储占用，同时安装速度也更快。这也是Monorepo（单仓多包）架构的首选包管理工具。

PM2 是什么：PM2（Process Manager 2）是 Node.js 生态中广泛使用的生产环境进程管理器。当 Node.js 应用因未捕获异常崩溃时，PM2 能自动重启进程；服务器重启后，PM2 可通过 startup 命令让应用随系统自动启动；同时内置日志收集、多进程负载均衡（cluster 模式）和性能监控面板等功能。PM2的cluster模式基于Node.js内置的cluster模块，能将单线程的Node.js应用扩展为多进程，充分利用多核CPU资源——虽然99元服务器通常只有1-2核，但这一能力为未来升级配置后的性能扩展预留了接口。对于个人站点而言，PM2 最常见的用途是守护 Next.js 的 SSR 服务进程，确保网站持续在线。在本文的纯静态部署场景中，实际由Nginx直接托管HTML文件，PM2并非必须，但一旦后续引入需要常驻Node进程的SSR功能，PM2便会成为不可或缺的基础设施。

克隆完成后，进入项目目录执行 pnpm install 安装依赖，再运行 pnpm build 打包，构建产物输出到 apps/web/out 目录下。

防火墙与Nginx配置

部署静态站点还需两件事：放行端口和配置Web服务器。

在阿里云控制台的「安全组」中，除了默认的SSH 22端口外，额外放行HTTP 80和HTTPS 443端口。同时检查系统自带防火墙（ufw）状态，若为 inactive 则无需额外操作。

安全组与系统防火墙的层次关系：阿里云安全组工作在云平台的网络层，是流量到达服务器之前的第一道屏障，相当于云厂商托管的硬件防火墙；而ufw（Uncomplicated Firewall）是操作系统层的软件防火墙，基于Linux内核的iptables规则。两者形成纵深防御（Defense in Depth）架构：即使操作系统层配置有误，云平台安全组也能阻挡未授权流量。生产环境建议两层防护同时启用，但需确保规则一致，避免安全组放行了443端口但ufw又将其拦截的配置冲突。

随后安装Nginx，将打包产物拷贝到Nginx站点目录，编辑配置文件——监听80端口、指定HTML根目录、开启gzip压缩与静态资源缓存。

Nginx 在静态站点部署中的角色：Nginx 是目前全球使用最广泛的高性能 Web 服务器，以事件驱动的非阻塞 I/O 模型著称，单机可轻松支撑数万并发连接。其核心设计采用Master-Worker进程模型：Master进程负责读取配置和管理Worker进程，多个Worker进程各自用单线程事件循环处理请求，完全规避了多线程模型的锁竞争开销。在静态站点部署场景中，Nginx 扮演「门卫+搬运工」角色：将用户的 HTTP 请求映射到磁盘上的 HTML/CSS/JS 文件，配合 gzip 压缩减少传输体积（通常可压缩至原始大小的20-30%），通过 Cache-Control 响应头指导浏览器缓存静态资源，从而在低带宽服务器上也能提供流畅的访问体验。后续配置 HTTPS 时，SSL 证书的卸载（TLS termination）同样由 Nginx 承担——配合Let's Encrypt免费证书和Certbot自动续签工具，可在几分钟内完成从HTTP到HTTPS的迁移，这是下一阶段域名绑定后的关键步骤。事实上，Nginx 的 location 指令块还能实现精细的路由控制、跨域（CORS）头注入、请求限速等高级功能，是构建生产级Web服务的瑞士军刀。

执行 nginx -t 测试配置无误后重启，浏览器访问服务器IP即可看到网站成功上线。

打造可复用的自动化更新流程

一次性部署不难，难的是后续维护的便捷性。作者在服务器上编写了一个更新脚本，逻辑简洁清晰：拉取最新代码 → 执行build → 删除旧文件 → 复制新产物 → 输出日志，并赋予其可执行权限。

如此一来，日常开发流程被极大简化为：本地改代码 → push到GitHub → 登录服务器执行更新脚本。这套手动触发的流程已具备CI/CD（持续集成/持续部署）的雏形。更进一步，可在GitHub Actions中配置自动化工作流，在代码push到主分支时自动SSH到服务器执行更新脚本，实现真正的「推送即部署」——GitHub Actions的工作流文件（.github/workflows/deploy.yml）以YAML格式定义触发条件和执行步骤，平台提供每月2000分钟的免费额度，对个人站点完全够用。这是个人站点迈向工程化运维的自然演进路径。

用Claude Code的Skill固化高频操作

最巧妙的一步是，作者把「提交并推送到GitHub」这一高频操作让Claude Code生成为一个 Skill并注册到全局。此后只需调用这个Skill，AI便会自动生成符合规范且简短的commit信息并完成推送。

Skill机制的深层价值：这一机制本质上是将一段自然语言描述的操作流程固化为可复用的命令别名，设计理念与Unix中的shell alias或Makefile有异曲同工之妙，但交互界面更接近自然语言。从软件工程角度看，这是「自动化即代码」（Automation as Code）理念的AI时代演进：过去我们用Makefile、Shell脚本、Jenkinsfile固化工作流，如今可以用自然语言描述意图，让AI负责翻译和执行。更深远的意义在于「知识沉淀」——开发者将某次成功执行的操作路径记录为Skill，后续调用时无需重复描述上下文，AI能直接执行正确的命令序列。类似的设计理念也出现在GitHub Copilot的自定义指令（Custom Instructions）、Cursor的Rules for AI等功能中，预示着「AI工作流个性化配置」将成为开发者效率竞争的新维度。这体现了AI编程从「写代码」向「自动化工作流」演进的趋势——把重复劳动沉淀为可复用能力。

总结与展望

这套流程完整覆盖了个人网站从0到1的全生命周期：AI生成 → 自然语言迭代 → Git托管 → 云服务器部署 → 脚本化运维。对于想拥有个人主页却苦于技术门槛的人而言，这是一条低成本、可复制的路径。

当前网站仍通过IP地址访问，下一步计划申请域名、完成备案并配置HTTPS，让站点像正常网站一样对外服务。域名备案（ICP备案）是中国大陆云服务器的法定要求，通过阿里云控制台提交材料后审核周期通常为7-20个工作日。HTTPS配置推荐使用Let's Encrypt免费证书，配合Certbot工具可实现证书的自动申请与90天周期自动续签，几乎零维护成本。你可能没注意到，选择较复杂的技术栈（Next.js + pnpm），正是为了给后续增加复杂功能留足空间。

Next.js 选型的前瞻性：Next.js 支持静态站点生成（SSG）、服务端渲染（SSR）和增量静态再生（ISR）三种渲染模式。对于个人品牌网站，当前阶段使用 next export 输出纯静态 HTML 足以满足需求；而一旦后续需要添加博客系统、表单提交、用户认证或动态数据接口，Next.js 的 API Routes 和 Server Components 可以无缝衔接，无需更换技术栈。SSG在构建时预渲染所有页面，输出纯HTML文件，可部署至CDN，适合内容变更不频繁的展示型网站；SSR在每次请求时动态生成页面，适合需要实时数据或个性化内容的场景——但需要Node.js常驻进程，这正是PM2的用武之地；ISR（增量静态再生）则是两者的折中，允许静态页面在后台定时或按需（On-demand Revalidation）重新生成，兼顾性能与实时性，是博客、电商等内容更新频率中等场景的理想选择。理解这三种模式的边界，是判断何时需要从静态托管迁移至有状态服务的关键认知基础。这也提醒我们，AI 辅助开发同样需要开发者对技术选型保持前瞻性的判断力——AI可以高效执行，但架构方向仍需人来把舵。

核心要点

• 需求文档先行：给AI明确的上下文边界，比模糊指令更能产出高质量代码
• 自然语言迭代：IntersectionObserver动画、滚动交互等传统前端难点，如今可用口语化描述驱动修改
• 主流工作流：本地Git → GitHub → 服务器拉取的部署链路，是行业通行的协作范式
• 基础设施分层：Nginx负责静态托管与压缩，PM2负责进程守护，职责分离使系统更易维护
• Skill固化重复操作：将高频工作流沉淀为AI可调用的技能，是人机协作效率的乘法器
• 技术选型需前瞻：当前用SSG满足需求，但Next.js的SSR/ISR能力为未来功能扩展预留了完整的升级通道