Hwei's Signals Hwei's Signals

TUTORIALS

从 0 搭建这个网站：Jekyll、GitHub、Cloudflare 与 AI 协作流程

2026-04-27 · 预计 3 分钟

介绍我这个站点的技术路线、页面结构、部署方式，以及如何借助 AI prompts 从零做出一个风格接近的个人知识站点。

这篇文章专门回答一个问题：如果你想做一个和本站类似的个人网站，应该从哪里开始，以及哪些步骤最值得交给 AI 协作完成。

我这里采用的是一条比较轻量、但很适合长期积累的路线：

  • 内容层：Markdown
  • 站点生成：Jekyll
  • 代码托管：GitHub
  • 发布与边缘访问：GitHub + Cloudflare
  • 日常协作：AI 辅助改页面、整理内容、生成初稿和迭代样式

一、先明确你要做的站点类型

如果你的目标和我类似，通常会有这几类内容：

  • 短博客：记录阶段性思考和项目进展
  • 感悟短句：很短、更新频繁
  • 教程笔记：以后还会反复查
  • 学术记录：报告、复现流程、研究笔记

这类站点和普通产品官网不一样，重点不是“转化”，而是：

  • 容易写
  • 容易改
  • 适合长期 push
  • 文件结构清楚
  • 不被复杂后台拖累

所以静态站点是非常合适的选择。

二、为什么我选 Jekyll

我选 Jekyll 不是因为它最潮，而是因为它足够直接：

  • 和 GitHub Pages 兼容很好
  • Markdown 驱动，写文章成本低
  • 目录结构清晰
  • 适合个人知识库
  • 后续让 AI 改模板也比较方便

如果你也想要“仓库即网站”的工作方式，Jekyll 是很稳的起点。

三、这个站点的大致结构

你可以把类似站点理解成下面几层：

_config.yml             站点总配置
_layouts/               页面骨架
_includes/              header/footer 等局部片段
assets/css/main.css     样式
_posts/                 博客
_moments/               感悟短句
_tutorials/             教程
_academia/              学术记录
index.html              首页入口
about.md                About 页面
links.md                Links 页面

其中最核心的几个点是：

  • _config.yml 决定站点标题、描述、导航、集合等全局行为
  • _layouts/ 决定每类页面怎么渲染
  • assets/css/main.css 决定视觉风格
  • 各类 Markdown 文件负责真正的内容沉淀

四、从 0 开始的实际步骤

1. 创建 GitHub 仓库

如果想直接作为主页站点，仓库名通常是：

你的用户名.github.io

例如：

Hwei-esay.github.io

2. 初始化 Jekyll 结构

最简单的做法有两种：

  1. 自己从头创建 Jekyll 目录结构
  2. 让 AI 先帮你生成一个最小可用模板，再逐步改成你自己的样子

如果你更在意速度，第二种会快很多。

3. 先把内容类型想清楚

不要一开始就追求特别复杂的页面。先定下来：

  • 导航有哪些栏目
  • 首页展示哪些区块
  • 每种内容放在哪个 collection
  • 每个页面大概长什么样

这一步越清楚，后面越容易让 AI 正确执行。

4. 本地修改，Git 推送

日常工作流通常就是：

git add .
git commit -m "Update site"
git push origin master

或者你的默认分支如果是 main，就推 main。

5. 绑定 GitHub Pages 与 Cloudflare

我这里的思路是：

  • GitHub 仓库负责内容和版本历史
  • GitHub Pages 负责基础静态托管
  • Cloudflare 负责更稳定的访问链路、DNS、缓存和额外能力

对访客来说，最终只会看到一个正常可访问的网站；对你自己来说，仍然可以维持很简单的 Git 工作流。

五、哪些部分最适合和 AI 协作

AI 最适合帮你做的不是“替你思考全部内容”，而是帮你提速。

我觉得最适合交给 AI 的部分有：

  • 先搭出首页、导航、文章页、列表页这些基础模板
  • 给已有页面做视觉微调
  • 把零散笔记整理成结构清楚的文章
  • 帮你把口语化需求翻成可执行的代码改动
  • 帮你补教程文档、目录、链接页、页脚等配套内容

不太适合完全放手的部分是：

  • 你的长期写作方向
  • 你真正想呈现的审美判断
  • 学术内容里的事实核验

更好的方式是：你给方向和判断，AI 负责把实现速度提起来。

六、我会怎么给 AI 下指令

下面这些 prompts 都是偏实战的写法，重点是让需求具体、边界清楚。

Prompt 1：先生成一个最小站点

帮我创建一个适合 GitHub Pages 部署的 Jekyll 个人站点。
需要包含：首页、博客列表、短句列表、教程列表、学术记录列表、About 页面。
站点整体风格简洁、有一点层次感，适合长期写 Markdown。
请直接生成目录结构、基础 layout、header、footer 和主样式文件。

Prompt 2：调整首页结构

这是我的 Jekyll 站点。帮我修改首页：
1. 左侧是站点标题和介绍。
2. 右侧放两个信息卡片。
3. 下方展示最近博客、短句、教程、学术记录。
4. 保持现有视觉风格，不要做成商业 landing page。
请直接修改代码，不要只给建议。

Prompt 3：让 AI 帮你整理笔记成文章

下面是我零散写的一段研究笔记。
请帮我整理成适合放在个人知识站点上的教程文章。
要求：
1. 保留技术细节。
2. 调整为“背景-步骤-代码-常见错误-建议工作流”的结构。
3. 标题和小标题清晰。
4. 语言尽量简洁，不要写成营销文案。

Prompt 4：只做小范围视觉微调

请只修改导航栏的视觉效果，不要改动页面结构。
目标是：
1. 毛玻璃稍微更通透一点。
2. 保持当前配色。
3. 不要变成很亮或者很透明。
请直接改 CSS，并说明改了哪些选择器。

Prompt 5：让 AI 做“结构迁移”，而不是胡乱重构

把“常用链接”从 About 页面迁移到单独的 Links 页面。
要求：
1. 在 nav 中新增 Links。
2. About 只保留站点说明。
3. Links 页面中每个链接下面都有一行简短说明。
4. 保持现有站点结构和风格。

七、让 AI 更好用的关键

很多人觉得 AI 改站点容易“越改越乱”，本质上通常是因为指令太松。

比较稳的写法一般包含这几类信息：

  • 你要改哪一块
  • 不要改哪一块
  • 风格要保持什么
  • 你希望最后直接输出代码，还是先给方案

比如：

只改 footer，不改正文和导航。
目标是让 footer 更轻、更像页脚。
去掉多余链接，压缩高度，并保留站点标题和仓库入口。
请直接改 HTML 和 CSS。

这种写法通常比一句“帮我优化一下 footer”稳定得多。

八、我建议的实际建站顺序

如果你今天从零开始，我会建议按这个顺序做：

  1. 先定内容类型和导航结构。
  2. 创建 Jekyll 仓库并能成功上线一个最小版本。
  3. 先把首页、列表页、文章页骨架搭出来。
  4. 再调整配色、卡片、导航、footer 等视觉层。
  5. 最后再补 Links、About、教程说明、自动化内容等细节。

顺序对了，整个过程会很顺；顺序乱了，就容易在视觉细节上打转。

九、如果你想复刻一个相近风格的网站

你可以直接把下面这段 prompt 发给 AI，当作起点：

帮我搭建一个适合长期写作和知识沉淀的个人 Jekyll 网站，部署目标是 GitHub Pages，并考虑后续接入 Cloudflare。

我希望它包含：
1. 首页 hero 区域
2. 博客列表
3. 感悟短句列表
4. 教程列表
5. 学术记录列表
6. About 页面
7. Links 页面

风格要求：
1. 简洁，但不要单调
2. 有一点玻璃质感和层次感
3. 不要做成模板味很重的默认博客
4. 桌面和移动端都能正常显示

内容组织要求：
1. 使用 Markdown 写内容
2. 用清晰的目录结构区分不同内容类型
3. 首页展示最近内容
4. header 和 footer 结构清楚

协作要求：
1. 直接修改代码，不要只停留在建议
2. 尽量小步改动
3. 保持已有风格一致
4. 修改后说明改了哪些文件

十、最后的建议

如果你只是想拥有一个“能持续更新、能被自己长期使用”的个人网站，不需要一开始就把事情做复杂。

最重要的是三件事：

  • 站点结构清楚
  • 写内容足够轻
  • 你愿意持续 push

AI 在这里最有价值的地方，不是替你拥有表达欲，而是帮你把实现门槛和维护成本降下来。