★ FEATURED ARTICLE 1. 从设计稿到线上域名中间到底卡在哪个人网站这件事卡人的从来不是「不会写代码」而是链路上那些琐碎环节。你在 Figma 里把首页、作品页、关于页都排得挺好看导出代码之后发现资源路径全乱好不容易在本地跑起来想更新又得重新打包、手动上传过两周改个文案已经忘了当初部署在哪台机器上。设计、编码、托管、部署这四件事各自都不难难的是把它们串成一条不用你操心的流水线。这套方案要解决的问题很具体让 Figma 负责「长什么样」GitHub 负责「存什么」Netlify 负责「怎么上线」你只负责在本地改代码然后 push。适合独立开发者、有设计背景但不想碰运维的创作者、以及想给作品集找个稳定落脚点的人。整套流程用免费额度就能跑通不需要买服务器不需要配 Nginx也不需要懂 CI/CD 的底层原理——Netlify 会替你把持续部署这件事做掉。我试过把这条链路完整走了一遍从 Figma 导出到 Netlify 自动构建成功中间踩的坑主要集中在构建命令和输出目录这两个配置上。下面按「先跑通、再优化、最后接 AI 能力」的顺序拆开讲每一步都给可复制的配置。核心检索词先明确Figma 出稿、GitHub 存仓、Netlify 托管三者通过 Git 的 push 动作触发自动部署形成一条从设计到上线的 CI/CD 流水线。你只要理解「push 即部署」这一个心智模型剩下的都是配置细节。2. 前置准备仓库结构、TaoToken Key 与工具链在动手之前先把三样东西准备好一个规整的仓库目录、一个能统一调用 AI 能力的 Key、以及本地工具链。仓库结构决定了 Netlify 能不能正确找到构建产物Key 决定了你站点里的 AI 功能走哪条通道。2.1 仓库目录怎么摆Figma 导出的代码通常是扁平的 HTML/CSS/JS直接扔上去也能跑但不利于后续扩展。建议整理成下面这种结构静态资源、样式、脚本分开放personal-website/ ├── index.html ├── about.html ├── works.html ├── assets/ │ ├── images/ │ └── fonts/ ├── css/ │ └── style.css ├── js/ │ └── main.js ├── netlify.toml └── README.md如果你的站点是纯静态 HTMLNetlify 甚至不需要构建命令直接把根目录当发布目录即可。但为了后续能加构建步骤比如压缩、注入环境变量建议还是配一个netlify.toml把发布目录显式写清楚。2.2 TaoToken 统一 Key 的定位站点里如果要有 AI 能力——比如作品页的智能问答、博客的摘要生成、或者一个小的对话入口——这些请求不应该散落在各个前端文件里各写各的 Key。统一走 TaoToken 的 API 通道好处是 Key 只配一次模型切换、额度查看都在一个地方。TaoToken 官网入口在这里https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基址是 https://taotoken.net/api 。注意 API 地址不带 UTM 参数配置的时候别把查询串带进去。你需要拿到三件套Base URL、API Key、Model ID。Base URL 填https://taotoken.net/apiKey 在控制台的 API Keys 页面生成Model ID 按你实际要用的模型填。这三样在后面的前端调用和本地调试里都会用到。2.3 本地工具链本地改代码用你顺手的编辑器就行VS Code 或者 Trae 都可以。Trae 的好处是内置了 AI 辅助改样式、调布局的时候能少查文档。Git 操作可以用命令行也可以用 GitHub Desktop后者对不熟悉 Git 的人更友好。Netlify 这边不需要本地安装任何 CLI全部在网页端配置。免费版对个人站点足够每月 100GB 带宽、300 分钟构建时间静态站点根本用不完。3. 可复制配置netlify.toml 与前端 AI 调用片段这一节是整篇的核心配置写对了后面就是顺水推舟。先给netlify.toml再给前端调用 TaoToken 的代码片段最后说环境变量怎么注入。3.1 netlify.toml 完整配置在仓库根目录新建netlify.toml内容如下[build] publish . command [build.environment] NODE_VERSION 20 [[headers]] for /* [headers.values] X-Frame-Options DENY X-Content-Type-Options nosniff [[redirects]] from /api/* to https://taotoken.net/api/:splat status 200 force true几个关键点说明。publish .表示发布目录就是仓库根目录因为纯静态站点不需要构建产物目录。command 留空表示不执行构建命令如果你后续加了打包步骤这里改成npm run buildpublish改成dist。NODE_VERSION指定 Node 版本避免 Netlify 默认版本和你本地不一致导致构建差异。[[redirects]]这段是给 AI 请求做代理转发用的。前端直接请求/api/...Netlify 会转发到 TaoToken 的 API 地址。这样做的好处是前端不暴露完整的外部域名同时避免浏览器跨域问题。注意force true表示强制走这条规则。3.2 前端调用 TaoToken 的代码片段在js/main.js里加一个最小的对话调用函数演示三件套怎么填const TAOTOKEN_BASE_URL /api; const TAOTOKEN_MODEL_ID 你的模型ID; async function askAI(prompt) { const resp await fetch(${TAOTOKEN_BASE_URL}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${window.__TAOTOKEN_KEY__} }, body: JSON.stringify({ model: TAOTOKEN_MODEL_ID, messages: [{ role: user, content: prompt }] }) }); if (!resp.ok) { const errText await resp.text(); throw new Error(请求失败 ${resp.status}: ${errText}); } const data await resp.json(); return data.choices[0].message.content; }注意 Key 不要硬编码在 JS 文件里否则 push 到公开仓库等于泄露。正确做法是通过 Netlify 的环境变量注入在构建时替换或者用一个轻量的 Netlify Function 做中转。下面说环境变量怎么配。3.3 环境变量注入在 Netlify 站点设置里找到 Environment variables新增一个变量Key: TAOTOKEN_API_KEY Value: 你的实际Key然后在netlify.toml的构建命令里做替换或者用 Netlify 的 Snippet injection 在页面里注入。更稳妥的方式是写一个 Netlify Function把 Key 放在服务端前端只调自己的函数端点。这样即使仓库公开Key 也不会暴露。如果你只是本地调试可以在项目根目录建一个.env文件但记得把它加进.gitignore别提交上去。4. 验证请求一次 push 触发自动部署的完整动作配置写完之后必须验证「push 即部署」这条链路真的通了。下面是一次完整的验证动作从本地修改到线上生效。4.1 本地克隆与首次推送先在 GitHub 上建一个公开仓库命名personal-website初始化 README。然后本地克隆git clone https://github.com/你的用户名/personal-website.git cd personal-website把整理好的站点文件复制进来包括netlify.toml。然后提交并推送git add . git commit -m init: 站点初始版本 netlify 配置 git push origin main4.2 Netlify 关联仓库登录 Netlify点「Import from GitHub」授权后选中personal-website仓库。部署配置页面里分支选main构建命令留空因为netlify.toml里已经写了发布目录会自动读取配置。点 Deploy等 1 到 3 分钟。部署成功后Netlify 会给你一个xxx.netlify.app的默认域名。打开看看页面是否正常样式和图片有没有加载出来。4.3 触发一次自动部署现在做关键验证在本地改一行文案比如把首页标题改掉然后git add . git commit -m update: 修改首页标题 git push origin main推送完成后回到 Netlify 的 Deploys 页面你会看到一个新的部署记录自动出现状态从 Building 变成 Published。整个过程不需要你在 Netlify 上点任何按钮。等它变成 Published刷新线上域名改动已经生效。这一步验证通过说明 CI/CD 流水线跑通了。后续所有更新都是这个模式本地改、commit、push、自动上线。4.4 验证 AI 调用是否走通如果你配了前端 AI 调用打开浏览器控制台手动执行一次askAI(你好)看返回是否正常。如果返回 401说明 Key 没注入成功如果返回 404检查/api代理规则和 Base URL 是否匹配。正常返回内容说明 TaoToken 的通道也通了。5. 常见报错排查401、proxy failed 与 choices 读取失败这一节按真实报错来对照都是我在配置过程中实际遇到过的。5.1 401 Unauthorized最常见。原因通常是 Key 没传对或者传了但格式不对。检查三处一是Authorization头是不是Bearer开头注意 Bearer 后面有个空格二是 Key 本身有没有复制完整前后有没有多余空格三是如果走 Netlify Function 中转函数里读环境变量的名字和你在 Netlify 后台配的是否一致。还有一种情况是 Key 被提交到了公开仓库TaoToken 侧检测到泄露后自动失效。所以务必用环境变量别硬编码。5.2 local proxy failed 或 502这个报错通常出现在你用了本地代理或者 Netlify 的 redirect 规则写错的时候。检查netlify.toml里的[[redirects]]段to地址必须是https://taotoken.net/api/:splat注意:splat是占位符不能漏。如果from写的是/api/*那前端请求路径也必须是/api/开头两边要对上。另外如果你本地开了某些网络工具可能导致请求被拦截。关掉之后重试。5.3 reading choices 报错这个报错的意思是代码在访问data.choices[0]时choices是 undefined。原因通常是返回结构和你预期的不一样。先打印完整的data看看const data await resp.json(); console.log(JSON.stringify(data, null, 2));如果返回的是错误信息而不是正常的对话结构说明请求本身失败了只是 HTTP 状态码可能是 200 但 body 里是错误。这时候看 body 里的error字段通常能定位到是模型 ID 写错还是参数不合法。5.4 OAuth 或授权相关报错如果你在 Netlify 关联 GitHub 那一步卡住报 OAuth 相关错误先检查 GitHub 账号是否已经授权 Netlify 应用。去 GitHub 的 Settings → Applications → Authorized OAuth Apps 里看看有没有 Netlify没有的话重新走一遍授权流程。另外仓库如果是私有的Netlify 免费版也能关联但需要确保授权时勾选了该仓库的访问权限。5.5 构建成功但页面 404Netlify 显示部署成功但打开域名是 404。八成是publish目录配错了。如果你把文件放在子目录里publish要指向那个子目录。纯静态站点放根目录的话publish .是对的。检查一下仓库根目录下有没有index.htmlNetlify 默认找这个文件作为入口。6. 把 AI 能力接进站点统一 Key 通道的长期用法站点跑通之后AI 能力的接入其实是一个持续迭代的事。统一走 TaoToken 的 Key 通道意味着你不需要在每次加新功能时重新申请 Key、重新配环境。所有模型调用都从同一个 Base URL 出去额度、日志、模型切换都在一个控制台里看。如果你后续要做更复杂的 AI 功能比如作品集的智能检索、博客的自动摘要、或者一个小的对话式导航建议把调用逻辑抽成一个独立的模块前端只负责传参和渲染。Key 始终放在服务端或者 Netlify Function 里前端永远不直接持有。对于长期做编码和 Agent 类项目的开发者TaoToken 的 Coding Plan 提供了更稳定的调用额度适合把 AI 能力作为站点常驻功能来跑。你可以从控制台生成专用的 Key和测试用的 Key 分开管理。模型对话入口可以用来快速验证某个模型在当前场景下的表现接入文档里有完整的参数说明和示例。API Keys 页面负责生成和管理 Key控制台看用量和额度。整套流程走下来你会发现「零代码」不是真的不写代码而是把重复的、易错的运维环节交给平台你只保留设计和内容这两件真正需要人来做的事。Figma 出稿、GitHub 存仓、Netlify 托管三者通过一次 push 串起来剩下的就是持续往里面加东西。
阅读完成 · 觉得有帮助？
