如何用 Cursor + GitHub 做静态官网:从素材到更新的全流程(以 fullstackinno.com 为例)
用 Cursor + GitHub 做静态官网:素材与信息架构先定,本地搭站连上 GitHub,推送触发构建发布,以后改文章只改内容文件再推一次。以 fullstackinno.com 为公开案例。
先给结论
静态官网的关键不是一次写出漂亮页面,而是素材与信息架构先定、用 Cursor 搭站、GitHub 托管与自动构建,以及改内容文件再推送就能更新。
- 适合谁
- 想自己做品牌官网或知识站、并用 Cursor 与 GitHub 跑通「本地改 → 线上变」的创作者与小团队
- 当前阶段
- 实践
- 读完就做
- 今天先写清一句话定位和三页站点地图,再用 Cursor 跑通本地预览
用 Cursor + GitHub 做静态官网,核心不是「一次写出漂亮页面」,而是:素材与信息架构先定 → 用 Cursor 在本地把站搭出来 → 用 Git 连上 GitHub → 推送触发构建发布 → 以后改文章只改内容文件再推一次。
全栈创新官网 fullstackinno.com 就是这条链路的公开样板:Astro 静态站 + GitHub Actions 构建,文章进内容目录即可更新。
0. 这篇写给谁、解决什么
适合三类人:
- 想自己做品牌官网 / 知识站,但不想先上复杂后台
- 已经会一点前端,想把「本地改 → 线上变」跑通
- 想用 AI(Cursor)加速写页面和改文,但仍要可检查、可回滚
它不是:教你注册域名的客服手册,也不是把还没真正开放给用户的能力写成「已经上线」。
本文讲的是方法层:怎么用 AI 工具把官网做出来并持续更新,不是产品功能宣传。
1. 前期素材准备(动手前先收齐)
先列清单,再开 Cursor。缺素材时 AI 只会帮你「编漂亮空壳」。
1)一句话定位
例:官网首页主张——「用 AI,把一个想法做成有人愿意使用和付费的产品。」(见公开首页)
2)信息架构(IA)
先画站点地图,再写页面。fullstackinno.com 公开结构可参考:
| 区块 | 作用 |
|---|---|
| 首页 | 主张 + 六步路线 + 实践入口 |
/learn/ |
长文 / 方法论 |
/answers/ |
关键问题短答(可被引用) |
/start/ 等 |
诊断 / 行动入口 |
| Skills / 实践案例 | 方法落地 |
原则:文章解释主张,短答给可引用结论,案例证明方法真实——别把所有内容塞进首页。
3)品牌资产
Logo、主色、字体、OG 图、案例图。案例仓里常见位置:src/assets/、public/images/、design/references/。没有批准稿,就不要让 Cursor「随便生成一套品牌」。
4)内容原料(可检查)
每篇文章准备:标题、一句话主张、边界(什么能承诺 / 什么不能)、可核对的来源、CTA(只写真实存在的路径)。
不要把聊天里的猜测、未核对数据写进对外正文。
5)域名与托管预期
静态站通常:GitHub 存源码 → CI 产出 dist/ → 服务器或 Pages 托管静态文件。案例站是 Astro + pnpm,正式发布走 GitHub Actions,再同步到站点根(细节见仓内 README;本文不展开内网路径)。
素材检查表(可复制):
- 一句话定位
- 站点地图(首页 / 列表 / 详情 / 短答)
- Logo + 色板 + OG
- 首批 1–3 篇正文草稿 + 边界
- GitHub 仓库名与是否公开
- 谁负责合并
main(发布闸门)
2. 网站设计:先约束,再让 Cursor 填细节
2.1 设计不是「好看」,是「读完知道下一步」
案例首页结构可拆成:主张 → 六步路线 → 方法块 → 最新文章 → 实践原则 → 案例 → 五个关键问题。访客 10 秒应能回答:这是谁、帮我解决什么、下一步点哪。
2.2 把规范写进仓,而不是只在聊天里
案例仓库用 design.md、design-qa.md、design/qa/ 截图做验收。你在 Cursor 里应固定指令习惯:
改 UI 前先读
design.md;改完对照 QA 截图;不要引入第二套色板。
2.3 内容模型先于页面装饰
静态站长期可维护的关键是 Content Collections(或等价的 content/ 目录):
- 文章:
src/content/articles/*.md→ 路由/learn/<slug>/ - 短答:
src/content/answers/*.md→/answers/...
以后「更新文章」= 改 md / 加 md,而不是手改一堆 HTML。
2.4 SEO / GEO 当设计约束,不当上线后补丁
案例构建后跑 pnpm check:seo:title、description、canonical、H1、JSON-LD、sitemap、robots、RSS、llms.txt、站内链等。
设计阶段就要定:每页一个 H1、短答页可见结论、文章可进 RSS。Cursor 很会「写出漂亮但丢 meta 的页」——用检查脚本挡住。
3. 用 Cursor 搭站,并连上 GitHub
下面按「从零或从模板」的通用顺序写;案例技术选型供对照。
3.1 本地工程
# 案例栈示意(以仓库为准)
pnpm install
pnpm dev # 本地预览
pnpm build # 产出静态文件
pnpm check:seo # 发布前闸门
pnpm preview # 预览构建结果
在 Cursor 里建议这样分工:
| 你负责 | 让 Cursor 加速 |
|---|---|
| 信息架构、文案边界、合入决策 | 组件拆分、重复样式、样板页 |
| 事实对错、CTA 是否真实 | 根据 design.md 改布局 |
看 check:seo 失败项 |
按报错修 meta / 内链 |
提示词示例:
根据现有
src/pages/learn/[slug].astro和 content schema,新增一篇文章页所需的 frontmatter 字段说明;不要改品牌色;不要发明未提供的客户数据。
3.2 初始化 Git 并连接 GitHub
git init
git add .
git commit -m "初始静态站骨架"
# 在 GitHub 新建空仓库后:
git remote add origin git@github.com:<org>/<repo>.git
git branch -M main
git push -u origin main
注意:
- 源码分支与纯静态产物分支可分离(案例:源码在
main,构建结果推到deploy) .gitignore忽略node_modules/、dist/、本地.env- 密钥永不进仓
3.3 自动构建(建议一上来就配)
案例:.github/workflows/astro.yml —— main 有推送 → 安装依赖 → pnpm build + pnpm check:seo → 通过后更新 deploy 分支。
含义:没有绿勾,就没有「算发布」。用 Cursor 改 workflow 可以,但合并前人要读一遍权限与触发条件。
3.4 域名指向静态产物
托管可以是 GitHub Pages、对象存储 + CDN,或服务器 Nginx 指到静态目录。案例是构建产物落到托管侧后由站点根提供;Nginx 侧还可挂历史 URL 的 301(仓内 ops/nginx-redirects.conf)。
本文不展开具体面板点击路径——不同主机面板不同,原则只有一句:线上根目录 = 最新一次成功构建的静态文件。
4. 内容更新:改文之后,网站怎么跟着变
这是静态站的日常。以案例「加一篇 learn 文章」为例:
-
写稿
在src/content/articles/<slug>.md按 schema 写标题、摘要、正文、日期等。
主张、边界、来源写清楚;不能写的事实不要写。 -
本地验收
pnpm build && pnpm check:seo && pnpm preview
打开 /learn/<slug>/,看版式、内链、meta。
-
开 PR 或推
main(按你们规范)
Actions 跑通后,deploy(或等价产物)更新。 -
确认线上
打开https://你的域名/learn/<slug>/,再查 sitemap / RSS 是否出现新文(案例会随构建更新)。 -
改旧文同理
改同一个 md → 再走构建。不要直接在服务器改单个index.html当长期方案:容易绕过 SEO 闸门,也进不了内容源。
更新节奏建议
| 频率 | 做什么 |
|---|---|
| 每周 | 1 篇可检查主张的文章或 1 条短答 |
| 每次发文 | 本地 check:seo + 线上抽查 |
| 每月 | 清死链、核对 CTA、回顾设计 QA |
5. 一张全流程总表(可直接贴墙)
| 阶段 | 产出 | 工具 | 完成标准 |
|---|---|---|---|
| 素材 | IA + 品牌 + 首批文稿 | 文档 / 设计稿 | 清单勾完 |
| 设计 | design.md + 组件约定 |
Cursor + 设计参考 | QA 截图可对 |
| 工程 | Astro(或同类)静态站 | Cursor + pnpm | dev 可预览 |
| 连接 | GitHub 远程 + Actions | git / GitHub | main 推送有绿勾 |
| 发布 | 静态产物上线 | CI + 托管 | 公网 200 + SEO 项过 |
| 更新 | 改 content/ 再推 |
Cursor + git | 新文进 learn / RSS |
6. 常见坑(案例侧已踩过的类型)
- 把生成文案当事实 —— AI 会补「听起来真」的数据;对外必须以可公开事实为准。
- 只改服务器 HTML —— 下次正式构建会被覆盖,且可能进不了 sitemap/RSS。
- 没有发布闸门 —— 缺 title/canonical/坏链上了线才发现;用
check:seo一类脚本前置。 - 设计和内容两套真相 —— 聊天里的色值和仓里
design.md不一致时,以仓为准。 - 叙事越界 —— 「用 AI 辅助做事」不等于某项能力已经对用户开放;还没上线的,就别写成已上线。
7. 你现在就可以做的最小闭环
- 写清一句话定位 + 三页站点地图(首页 / 文章列表 / 一篇详情)
- 用 Cursor 生成或拉取静态站骨架,本地
dev跑通 - 推到 GitHub,配上「构建成功才更新产物」的 Actions
- 只加一篇真文章,走完「改 md → 构建 → 线上可见」
- 把本稿当检查表,缺哪步补哪步
案例入口:fullstackinno.com · 源码结构见公开仓 fullstackinnoAI/fullstackinno-website。
文末可引用短答
-
静态官网怎么持续更新?
把文章放进内容目录(如src/content/articles/),本地构建检查通过后推送主分支,让 CI 更新静态产物再同步线上——不要长期手改服务器单页 HTML。 -
Cursor 在建站里该干什么?
加速布局、组件和样板页;信息架构、事实边界、合入与发布决策仍由人负责,并用设计规范 + SEO 检查脚本约束输出。 -
fullstackinno.com 作案例说明了什么?
Astro 静态站 + GitHub Actions(构建与 SEO 检查)+ 内容集合驱动/learn与/answers,体现「用 AI 工具把想法做成可检查、可迭代的产品」的方法层,而不是把未上线能力写成已上线。
接下来可以做什么
- 浏览方法与文章:https://fullstackinno.com/
- 读一篇公开 learn 文:站点
/learn/目录