企业官网建设流程全解析

1. 为什么 Claude Code 建站总在最后一步卡住

Claude Code 能写代码、能跑测试、能改配置，但很多人用下来会发现一个尴尬的现象：代码写完了，部署那一步还是得自己打开浏览器点几下。问题不在模型能力，而在工具链——AI 没有手，点不了网页按钮，凡是必须进控制台操作的地方，自动化链路就断了。

CLI 就是补上这双手的关键。GitHub 建仓库、Vercel 部署与环境变量、Supabase 建表、Stripe 支付回调、Cloudflare 域名解析、GA4/GSC 数据回读，这六件事全部有命令行入口。把它们串起来，Claude Code 才能真正做到从零建站到上线不中断。

另一个容易被忽略的痛点是 Key 和 API 通道分散。六个工具各自登录、各自配 token，换台机器就要重来一遍，Agent 接手项目时还得逐个找凭证。这篇的做法是用 TaoToken 统一模型调用通道，把 Claude Code 的模型请求收敛到一个 Key 上，CLI 工具链只管业务操作，两边职责分开，配置才不会互相打架。

下面按「先接模型通道，再装六个 CLI，最后串成一条链路」的顺序走，每一步都给可复制的配置和验证命令。适合已经在用 Claude Code、想把建站流程真正跑通的人。

2. TaoToken 前置：把模型通道收敛成一个 Key

TaoToken 在这里的角色是统一的模型调用入口。Claude Code 本身要发模型请求，如果你同时还在用其他 AI 工具，每个工具配一套 Key 很容易乱。把模型请求统一走 TaoToken，好处是换工具不用换凭证，Agent 接手项目时也只需要认一个地址。

先拿 Key。打开官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，注册后在控制台创建 API Key。控制台地址是 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，Key 列表页在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。创建时建议按项目命名，比如claude-code-site，方便后面区分。

API 基础地址是 https://taotoken.net/api ，注意这个地址不带任何查询参数，配置时直接填这一串。模型名按你实际要用的填，Claude Code 场景一般选 Claude 系列。

注意：Key 只显示一次，创建后立刻复制到本地密码管理器或.env文件，不要提交到 git。

如果你还没决定用哪个模型，可以先去模型对话页 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite 试一轮，确认响应正常再写进配置。长期跑编码和 Agent 任务的话，Coding Plan 页 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 有对应的套餐说明，按自己的调用量选。

这一步做完，你手上应该有一个 Key 和一个 API 地址，接下来所有模型请求都指向它们。

3. 可复制配置：settings.json 与 config.toml 骨架

Claude Code 的配置分两处：一处是模型通道，一处是权限。先建项目目录，再写配置文件。

3.1 settings.json 配置骨架

在项目根目录建.claude/settings.json，把模型通道和自动执行权限写进去：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "sk-你的TaoToken密钥", "ANTHROPIC_MODEL": "claude-sonnet-4-20250514" }, "permissions": { "allow": [ "Bash(gh *)", "Bash(vercel *)", "Bash(supabase *)", "Bash(stripe *)", "Bash(npx cf *)", "Bash(git *)", "Bash(npm *)", "Bash(python3 *)" ], "deny": [ "Bash(rm -rf *)", "Bash(git push --force *)" ] } }

env段把模型请求指向 TaoToken，permissions.allow段把六个 CLI 的命令前缀放开，Agent 才能自己执行。deny段挡住危险操作，这是必须留的一道闸。

3.2 config.toml 配置骨架

如果你用的是支持 TOML 的 CLI 工具或自建脚本，可以建config.toml统一管理凭证：

[model] base_url = "https://taotoken.net/api" api_key = "sk-你的TaoToken密钥" model = "claude-sonnet-4-20250514" [deploy] provider = "vercel" prod_flag = "--prod" [database] provider = "supabase" migration_dir = "supabase/migrations" [payment] provider = "stripe" webhook_path = "/api/webhooks/stripe" [dns] provider = "cloudflare" target_ip = "76.76.21.21"

这份 TOML 的作用是给串联脚本读，脚本从里面取参数，避免把地址和 Key 硬编码在多个地方。改一处，全链路生效。

3.3 六个 CLI 的安装与登录

配置写完，装工具。macOS 用 brew，Node 工具用 npm：

# GitHub CLI brew install gh && gh auth login # Vercel CLI npm i -g vercel && vercel login # Supabase CLI brew install supabase/tap/supabase # Stripe CLI brew install stripe/stripe-cli/stripe && stripe login # Cloudflare CLI（技术预览，无需安装） npx cf --help # GA4/GSC 脚本依赖 pip3 install google-analytics-data google-api-python-client

装完逐个验证登录状态：

gh auth status vercel whoami supabase projects list stripe config --list

四条都返回账号信息，说明凭证就位。Cloudflare 的npx cf第一次跑会拉包，稍等即可。

4. 串联脚本：从本地初始化到线上验证

工具装好，写一个串联脚本把流程固化下来。建scripts/deploy.sh：

#!/usr/bin/env bash set -euo pipefail PROJECT_NAME="${1:-my-site}" DOMAIN="${2:-example.com}" echo "==> 1. 初始化 git 并创建远端仓库" git init -q git add -A git commit -qm "init: ${PROJECT_NAME}" gh repo create "${PROJECT_NAME}" --public --source=. --remote=origin --push echo "==> 2. 关联 Vercel 并首次部署" vercel link --yes vercel deploy --prod echo "==> 3. 推送数据库 migration" supabase migration new init_schema supabase db push echo "==> 4. 同步环境变量到 Vercel" printf '%s' "${STRIPE_SECRET_KEY}" | vercel env add STRIPE_SECRET_KEY production vercel env pull .env.local echo "==> 5. 配置域名解析" ZONE_ID=$(npx cf zones list --json | python3 -c "import sys,json;print(json.load(sys.stdin)[0]['id'])") npx cf dns-records create "${ZONE_ID}" --type A --name @ --content 76.76.21.21 --ttl 1 echo "==> 6. 线上验证" curl -sS -o /dev/null -w "%{http_code}\n" "https://${DOMAIN}"

几个关键点说明。gh repo create一行完成建仓库、关联远端、推送三件事，Agent 写完第一版代码直接跑。vercel env add注入值时用printf而不是echo，因为echo会带一个看不见的换行符，导致环境变量多出尾部空白，排查起来很费时间。supabase db push把本地 migration 推到远端，所有表结构变更都有文件记录，比在 Dashboard 手点安全。

给脚本执行权限：

chmod +x scripts/deploy.sh

然后让 Claude Code 接管。在项目里对它说：「读 scripts/deploy.sh，按里面的步骤把项目部署上线，遇到报错先修再继续。」它会自己跑命令、看输出、改代码。

Stripe 的 webhook 单独起一个终端：

stripe listen --forward-to localhost:3000/api/webhooks/stripe

拿到 signing secret 后写进.env.local，再用stripe trigger payment_intent.succeeded触发测试事件，验证支付逻辑不用刷真实卡。

5. 验证请求：确认链路真的通了

部署完不能只看脚本没报错，要实际发请求验证。分三层查。

第一层，模型通道。确认 Claude Code 的请求确实走了 TaoToken：

curl -sS https://taotoken.net/api/v1/messages \ -H "x-api-key: sk-你的TaoToken密钥" \ -H "anthropic-version: 2023-06-01" \ -H "content-type: application/json" \ -d '{"model":"claude-sonnet-4-20250514","max_tokens":64,"messages":[{"role":"user","content":"ping"}]}'

返回带content字段的 JSON，说明 Key 和地址都对。如果返回 401，检查 Key 有没有多余空格；返回 404，检查 base_url 是不是写成了带路径的形式。

第二层，站点可访问。用 curl 看状态码和响应头：

curl -sSI https://example.com | head -n 5

返回HTTP/2 200且server: Vercel，说明部署和 DNS 都生效了。如果返回 404，多半是 Vercel 项目没关联对目录；如果 DNS 没解析，等几分钟再试，TTL 设的是 1 分钟。

第三层，数据回读。跑 GA4 和 GSC 脚本确认能拿到结构化数据：

python3 ga4.py report 123456789 --days 7 python3 gsc.py query sc-domain:example.com --days 7

能输出活跃用户、会话数、关键词排名，说明 OAuth 授权和 API 调用都正常。这两个脚本让 Agent 每天自动查一遍数据，判断哪些关键词在掉、哪些页面流量异常，不用自己盯后台。

三层都过，整条链路就算跑通了。

6. 本篇常见错排查

报错一：gh: command not found或登录失效。brew 装完没进 PATH，或者 token 过期。跑gh auth status看状态，失效就重新gh auth login。Agent 执行时如果提示权限不足，检查settings.json的allow里有没有Bash(gh *)。

报错二：vercel env add后变量值带换行。这是最常见的坑。用echo注入会多一个\n，表现为读取时字符串末尾多空白，Stripe 签名校验直接失败。改成printf '%s' "$VALUE" | vercel env add KEY production，注入完用vercel env pull拉下来核对。

报错三：supabase db push报 migration 冲突。本地 migration 文件和远端历史不一致。先supabase migration list对比，确认哪条没同步，再决定是补推还是重建。不要直接删 migration 文件，会丢变更记录。

报错四：Stripe webhook 收不到事件。检查stripe listen是否在跑、forward 地址端口和本地服务是否一致。signing secret 要用stripe listen输出的那个，不是 Dashboard 里的。测试时用stripe trigger主动发事件，比等真实支付快得多。

报错五：npx cf报 zone 找不到。Cloudflare CLI 还在技术预览，语法可能变。先用npx cf zones list确认能列出域名，拿到的 zone id 要完整复制。如果命令参数变了，以npx cf --help的输出为准。

报错六：Claude Code 不执行命令，只给建议。说明权限没放开。检查.claude/settings.json的permissions.allow是否包含对应命令前缀，改完重启 Claude Code 会话。

7. 把链路固定下来，让 Agent 自己跑

这套配置跑顺之后，日常操作就变成一句话的事。你说「加个年付订阅，Stripe 集成，上线」，Claude Code 会自己写代码、跑stripe listen和stripe trigger验证 webhook、建订阅记录表、vercel deploy --prod部署、最后把 URL 给你。中间不需要你打开任何控制台。

关键是把三样东西固定住：模型通道走 TaoToken 的 https://taotoken.net/api ，六个 CLI 的权限在settings.json里放开，业务参数收进config.toml。这样换机器、换项目、Agent 接手，都只需要改一处。

如果你还在逐个工具配 Key、每次部署手动点按钮，建议先从统一模型通道开始。去 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 建一个 Key，把 Claude Code 的ANTHROPIC_BASE_URL指过去，再按上面的settings.json放开 CLI 权限。接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，配置细节对不上时翻一下。长期跑编码和 Agent 任务的话，Coding Plan 页 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 有套餐说明，按调用量选就行。

链路通了之后，你会发现真正省时间的不是模型多聪明，而是它终于能自己把最后一步走完。