企业官网建设流程全解析

这次我们来看一个很实用的组合：不会写代码，能不能做出一个正经网站并免费放到公网？答案是可以，而且链路比想象中短。核心工具是 Claude Code，一个在终端里运行的 AI 编程助手，你用自然语言描述想要的页面，它直接帮你创建和修改代码文件。做完本地预览后，再推到 GitHub，然后从 GitHub Pages、Vercel、Netlify 三种免费托管方案里选一种发布上线。

整个过程不需要手写一行代码，但需要你会安装软件、复制粘贴命令、阅读终端日志。适合完全没有编程基础但想拥有个人主页、作品集或产品落地页的人，也适合前端工程师用它快速搭原型再手工改。

先说重点：AI 生成的代码不等于免检产品。部署前必须在浏览器里验证页面效果，不要在项目里保存密钥；涉及用户隐私、人脸肖像、品牌素材的内容必须确认授权。下面从环境准备开始，完整梳理“生成 -> 预览 -> 推送 -> 自动部署”这条流程，最后给常见问题排查表和工程化建议，建议先收藏。

1. Claude Code + 免费托管核心能力速览

注意表格里的“免费”是指各平台的基础免费额度。免费计划通常有限速、流量或构建时长限制，具体以官网最新说明为准。Claude Code 的调用也需要对应的账号或 API Key，必要时会产生费用。不要盲目相信任何媒体所谓的“完全免费”，按官方规则理解即可。

2. 适用场景与使用边界

这类组合最典型的场景是：你有一个明确的想法，例如“我要一个三栏的个人主页”“我要一个作品集展示页面”“我要一个活动落地页”，但不知道代码怎么写。Claude Code 可以直接读取项目目录中的文件，把需求变成真实可浏览的网页。你可以继续用中文提出修改：“导航栏太挤，改成两行”“卡片加圆角阴影”“图片懒加载”，它会快速迭代。

它还能解决“从想法到上线”的最后一公里问题。本地生成后，Git 管理版本，托管平台连接仓库自动构建部署，整个过程不需要购买服务器、不需要配置 Nginx、不需要懂域名解析也能先拿到一个临时域名。

但边界也很清楚。不要指望它一次生成一个完整的多用户系统。需要复杂数据库、会员体系、在线支付、严格合规审核的业务，仍然需要专业开发介入。也不要认为“AI 写的代码就一定没有问题”，代码里的安全漏洞、逻辑错误、依赖风险都需要人工检查。

使用边界方面必须强调：生成网站时不要包含未授权的品牌素材、版权图片、名人肖像；如果网站收集用户信息，例如留言表单、统计脚本，必须提供隐私说明并遵循当地数据保护要求。不要用 AI 生成钓鱼、欺诈、诱导分享或伪冒官方机构的内容，也不要试图用该流程绕过平台规则或访问未授权系统。免费托管平台有自己的服务条款，代码内容违规会直接封站。

3. 本地部署环境准备与前置条件

3.1 安装 Git

Git 是源代码版本管理工具，先把代码管起来，后面推送仓库和自动部署都依赖它。到 Git 官网下载对应操作系统的安装包，安装时保持默认选项即可。安装后在终端验证：

git --version

如果提示“command not found”，说明安装后没有刷新环境变量，重启终端或手动更新 PATH。

3.2 安装 Node.js

Node.js 不只给 Claude Code 提供运行环境，本地预览静态服务器和后面的前端构建也会用到。建议安装 LTS 长期支持版本，不要用太老的版本。到 Node.js 官网下载安装包，安装后在终端验证：

node -v npm -v

两个命令都有版本输出，说明 Node.js 环境正常。如果 npm 下载依赖很慢，可以配置国内镜像源，但不要在配置中放置任何违规或敏感内容。

3.3 安装 Claude Code 命令行工具

Claude Code 的官方安装方式随版本迭代会变化，最稳妥的做法是打开官方文档，找到当前推荐的安装命令。如果文档推荐使用 npm 全局安装，命令通常是下面这种格式：

# 示例命令，请替换为你查阅到的官方包名 npm install -g @anthropic-ai/claude-code

安装后验证：

claude --version

如果出现版本号，说明安装成功。如果提示找不到命令，检查 npm 全局 bin 目录是否在 PATH 中，或者尝试使用官方提供的 npx 启动方式。

3.4 登录与鉴权

首次运行 Claude Code 需要登录账号或配置 API Key。不同版本支持的登录方式不同，可能是账号登录、浏览器授权，也可能是环境变量配置密钥。无论使用哪种方式，都不要把密钥明文写在项目文件或公开仓库里。如果使用环境变量：

export ANTHROPIC_API_KEY="你的密钥"

这行命令会保存在当前终端会话中，写入脚本时要确保脚本不进入版本管理。

3.5 准备项目目录

创建一个干净的空目录，后续所有生成的文件都放在这里：

mkdir my-website cd my-website

不要把项目目录放在桌面或其他容易被云同步的目录，避免干扰。目录路径尽量使用英文，避免某些工具对中文路径解析异常。

4. 用 Claude Code 生成网站代码的工作流

4.1 启动交互式终端

在项目目录下运行 Claude Code 的启动命令（如claude），进入交互模式。启动后终端会显示一个输入框，等待你描述需求。第一次使用时建议先问一句“当前目录结构是什么”，让工具确认它能读取哪些文件。

4.2 编写清晰的提示词

提示词越具体，生成结果越接近预期。例如，不要只说“帮我做个网站”，而要说：

“请帮我生成一个个人作品集页面首页，包含头部导航、英雄区、作品网格和页脚，响应式布局。不要使用构建工具，直接输出 index.html 和 style.css 两个文件。配色使用深色背景、浅色文字，整体风格简洁现代。”

这个提示词限定了技术栈、页面结构和视觉方向，Claude Code 就能在一个确定性较高的范围内创作。如果你想要某个特定风格，可以再补充“参考类似极简主义设计”“增加交互动效”等描述。

4.3 检查生成结果

工具执行完成后，用文件管理器查看项目目录，应该能看到 index.html、style.css 等文件。不要急着推送，先用编辑器打开代码大致浏览一遍。主要检查三个地方：HTML 结构是否完整、CSS 是否被正确引入、有没有多余的调试内容。

4.4 本地预览验证

静态网页可以直接双击 index.html 打开，但为了避开相对路径和本地文件限制，推荐启动一个本地静态服务器：

# 使用 npx 启动轻量静态服务器 npx serve .

或者使用 Python 自带的模块：

python3 -m http.server 8000

然后在浏览器访问http://localhost:8000。打开开发者工具 Console 和 Network 面板，看有没有 404 或者红色报错。页面显示正常后，再进入下一步。

4.5 迭代修改

预览发现问题就回到终端，直接告诉 Claude Code：“把作品卡片间距再大一点”“页面标题改成 XXX”“把字体换成系统字体栈”。每次只改一个小点，生成后刷新浏览器查看效果。这个循环就是实际使用中最核心的工作流。

4.6 生成多个页面

如果网站有一级页面，例如首页、关于、作品集，可以继续在当前会话中要求“参照首页风格，生成 about.html 和 works.html，并把这些页面通过顶部导航互链”。Claude Code 会读取现有文件风格，保持视觉和结构一致。这就是实际意义上的批量页面生成，比手工复制粘贴高效得多。

5. Git 仓库初始化与代码推送

部署到免费托管平台之前，需要先把代码推到远程仓库。Git 是这套流程的连接器，建议理解几个最常用的命令。

5.1 初始化本地仓库

在项目目录中执行：

git init git add . git commit -m "init website"

如果你还没有配置 Git 用户名和邮箱，提交会报错。可以先设置一下：

git config --global user.name "Your Name" git config --global user.email "your@example.com"

5.2 创建 GitHub 远程仓库

登录 GitHub，点击 New repository，填入仓库名。建议选择 Public，因为免费方案对私有仓库的 Pages 支持有变化，Public 是更稳妥的起点。不要勾选初始化 README，避免与本地已有代码发生冲突。

5.3 关联远程仓库并推送

把本地仓库和远程地址关联：

git remote add origin https://github.com/<用户名>/<仓库名>.git git branch -M main git push -u origin main

如果 GitHub 要求使用个人访问令牌，在 Settings -> Developer settings 中生成一个，只勾选必要的 repo 权限。令牌一旦泄露会影响仓库安全，不要把它写进代码文件、命令行历史或任何会被推送的内容中。

推送成功后，打开 GitHub 仓库页面就能看到代码。后续每次本地修改，重复执行：

git add . git commit -m "update description" git push

即可把新代码同步到远程。

6. 三种免费托管平台部署详解

6.1 GitHub Pages：纯静态站点

GitHub Pages 适合个人主页、项目文档、作品集这类纯静态页面，无需购买服务器。

在仓库页面进入 Settings -> Pages，Source 选择 “Deploy from a branch”，Branch 选择 main，目录选择 /root，保存。等待一到两分钟，访问https://<用户名>.github.io/<仓库名>/就能看到你的网站。

常见坑有两个：

第一，如果代码里使用了以/开头的绝对路径，在子路径部署时会 404，因为站点根路径并不是你的仓库根路径。建议把所有资源引用改为相对路径，或者调整构建配置中的 base 路径。

第二，GitHub Pages 默认不会自动清理浏览器缓存，部署完新版本后如果看不到变化，强刷浏览器或换一个无痕窗口再试。如果想要自定义域名，在仓库根目录放一个 CNAME 文件，内容写你的域名，然后在 DNS 设置中添加 CNAME 记录。

6.2 Vercel：静态站点 + Serverless 函数

Vercel 是前端托管平台中很常用的一种，支持静态站点，也支持小型后端函数，部署后自动获得 HTTPS 和全球 CDN。

用 GitHub 账号登录 Vercel 后，选择 Add New Project，进入 Import Git Repository，找到刚才的仓库，点击 Import。Vercel 会自动识别框架，如果项目只是纯 HTML/CSS，Framework Preset 选 Other，Build Command 和 Output Directory 留空，直接 Deploy。完成后会生成一个*.vercel.app域名。

如果项目需要接口，可以在项目根目录创建api/目录，里面放一个函数文件。例如：

// api/hello.js export default function handler(req, res) { res.status(200).json({ message: 'hello', time: Date.now() }); }

把代码推送后，Vercel 会自动构建和部署。此时请求https://<项目名>.vercel.app/api/hello就能拿到 JSON 响应。这个机制很适合给站点加简单的联系表单提交、签到次数等轻量接口。但函数默认是敏感接口，不要直接暴露无鉴权写操作，至少加上来源检查或请求频率限制。

6.3 Netlify：静态站点 + 表单 + 重定向

Netlify 的上手难度和 Vercel 接近，对落地页、营销站点比较友好。用 GitHub 账号登录 Netlify 后，选择 Add new site -> Import an existing project，找到仓库，点击 Deploy。瞬间会分配一个随机域名xxx.netlify.app，之后每次git push都会自动触发全新部署。

Netlify 的差异化能力是表单处理。你可以在 HTML 中直接写一个表单，action 指向一个绝对路径，Netlify 会自动捕获提交内容。对不想自己写后端的引流页非常有用。此外，在站点根目录创建_redirects文件可以配置重定向规则，比如：

/old-path /new-path 301

这些功能在免费额度内可用，但具体的表单提交数量、带宽限制会随官网规则调整，做正式项目前建议确认。

6.4 三种托管方式对比

选择建议：如果网站只需要一个静态页面，优先用 GitHub Pages，零额外配置；如果预期以后要加接口函数，直接用 Vercel；如果重点是表单收集和营销落地页，用 Netlify。迁移也不难，代码在 GitHub，三个平台互换只是重新 Import 一次的问题。

7. 接口 API 与批量任务说明

本文主题下的“批量任务”不是传统意义上的图片/视频批量处理，而是指用 Claude Code 在同一个项目里连续修改多个页面、多个组件。这是 AI 编程助手的特殊批量能力：你只需要在终端里连续发指令，它会按顺序执行文件创建、修改、重命名等操作。使用这种批量编辑要注意上下文长度，一次会话塞入太多需求可能降低生成质量。建议按模块拆分：先统一风格，再逐页生成，最后统一检查导航空隙和相对路径。

部署后的网站接口能力由托管平台决定。Vercel 和 Netlify 都支持 Serverless 函数，可以按官方文档配置。函数代码不要写死密钥，环境变量通过平台管理，在函数内通过process.env读取即可。对外接口要限制调用来源、设置鉴权、记录日志。

一个最简单的函数示例如下，但它只用于理解结构，具体平台入口需要查阅对应文档：

// 通用 API 函数模板，使用前请按托管平台文档调整 export default function handler(request, response) { response.status(200).json({ ok: true, message: "API is running" }); }

如果你不想写后端，也可以用前端部署到平台后，在页面里直接调用第三方开放 API，但要确认目标 API 的调用限制和商业使用条款。

8. 资源占用与性能观察方法

Claude Code 本身是一个终端应用，不涉及显卡和显存。它主要消耗少量 CPU、内存和网络流量。生成代码时终端会显示执行过程，如果长时间没有响应，一般卡在网络请求或等待授权，可以先看网络状态和终端日志。

本地预览阶段的性能可以用两个方法观察：看浏览器 Network 面板，确认页面资源请求是否过多；看 Lighthouse 报告，了解首屏性能评分。纯静态页面一般不会太慢，真正拖慢速度的往往是高分辨率图片、未压缩的 JS/CSS、外部字体引用。

托管部署后的性能提升主要靠平台 CDN，默认访问速度对个人站点够用。但不要拿免费计划做高并发压测，这既违反平台公平使用原则，也可能导致站点被限流。部署后可以打开浏览器开发者工具 Audits 面板跑一次 Lighthouse，针对得分低的项目做优化：压缩图片、移除无用 JS、开启懒加载、使用现代图片格式。

本地资源占用还要注意磁盘空间。Git 仓库会保留历史版本，如果频繁提交高清图片，仓库体积会急剧膨胀，拖慢 clone 和部署。图片素材建议拆分到对象存储或使用 Git LFS，而不是全塞进仓库。

9. 常见问题与排查方法

排查时先看日志，再看配置，最后才怀疑平台问题。终端和托管平台构建日志里基本都能定位到具体错误文件，按路径搜索修复即可。

10. 最佳实践与工程化建议

10.1 小步迭代，先跑通闭环

第一次操作不要追求完整官网。先让 Claude Code 生成一个只有首页的纯静态页面，本地预览没问题后推 GitHub，用 GitHub Pages 发布，跑通整条链路。这个闭环成功之后，再逐步增加新页面、调整样式、接入 API，每一步都能单独回滚。

10.2 目录与文件规范

把项目文件分门别类，别把所有东西都堆在根目录：

project/ ├── src/ # 页面源码 ├── assets/ # 图片、字体、样式库 ├── docs/ # 说明文档 └── .gitignore

.gitignore必须存在，至少忽略以下内容：

.env node_modules/ .DS_Store dist/

把密钥、数据库连接串、云服务凭证全部放入 .env，并确保 .env 不在推送列表里。否则像 Claude API Key、GitHub Token 这类敏感信息一旦进仓库，即使删除，历史版本里仍然能翻出来。

10.3 人工复核不可省略

AI 生成代码后，你需要做三件事：在浏览器里验证表现、在代码里搜索敏感关键词、在平台后台确认环境变量没有暴露。不要把“AI 生成了”等同于“代码安全了”。特别是涉及表单、支付、登录功能的网站，必须有熟悉安全的人参与审核。

10.4 合规与版权

使用 Claude Code 时遵守 Anthropic 服务条款；网站里的图片、字体、文案、品牌素材确保来源合法；如果站点收集用户 Cookies、表单数据或统计信息，写清楚隐私说明并允许用户拒绝非必要追踪。不要生成仿冒官方机构、钓鱼、欺诈和诱导分享内容，也不要调用未授权接口。

10.5 控制上下文消耗

Claude Code 在超长会话中可能出现上下文臃肿、答案变慢、输出不稳。建议把长期需求写进项目里的PROMPT.md，让工具读取文件而不是反复在对话中粘贴。每完成一个阶段性目标就结束会话，新会话从文件继续，这样效果更稳定。

10.6 自动化部署失败时如何回滚

托管平台通常会记录每次部署的 Commit Hash。如果新版本有严重问题，可以在平台后台找到上一次成功部署记录，点击 Redeploy 或 Choose a different commit 回滚。本地不要急着覆盖代码，先用git log查看提交历史，再决定是 revert 还是 reset。

11. 总结与下一步

这整套流程最值得先验证的点有两个：一是 Claude Code 能否按你的中文描述生成结构完整、视觉可看的静态网页；二是生成的代码经过 Git 推送后，托管平台能否自动构建并给出公网链接。建议第一次尝试就用最朴素的项目：一个 index.html、一个 style.css，推送到 GitHub Pages。跑通之后，你才算真正握住了“AI 生成 + Git 管理 + 免费托管”这条个人项目快速上线链路。

最容易踩的坑集中在这三处：资源路径写绝对路径导致部署后 404；本地分支名不是 main 而托管平台只监听 main；密钥被随手写到仓库里。只要提前避开这三个问题，后面的过程通常很顺。

后续扩展方向很清晰：用 Vercel 给网站加一个 Serverless API，把静态页升级成会响应的轻应用；用 Netlify 接入表单和重定向，适合做活动落地页；再往后配自定义域名、HTTPS、SEO 标签和 sitemap，让网站从“能访问”升级成“值得被搜索收录”。这套方法可以反复复用，适合个人 IP、作品集、小型工具站，也适合团队快速验证一个想法。