做一个静态网站

这是捞鱼的第一篇文章，用来记录第一次从 0 制作静态网站的过程，并测试发布流程与写作格式。

为什么做这个静态网站

看到 mcf 同学接任学委后把第二代班级空间做得这么好，才突发这个念头：正好可以用来记录一些技术的总结与反思 ^^（而且是不是会显得专业一些）。

从 0 开始做一个静态网站的过程

特别感谢 mcf 同学的帮助与指导！

参考与模板

• 参考文章：
  • CSDN：从零搭建静态博客
• 使用模板：
  • Chirpy 主题 · Getting Started

实践过程（按模板一步步来）

整体就是跟着模板走，遇到问题问ai和mcf同学

遇到的问题与取舍

没有使用 Docker Desktop

Docker Desktop 在我这里总是连接错误，因此我没有走容器化本地环境这条路。

改用 Cursor + Git 的工作流

我选择直接用 Cursor + Git 搭配主题模板推进开发与发布，体验很顺畅。 不得不说cursor真方便咪的天

后续维护时发现的注意事项

本地测试功能正常，托管 GitHub 后功能缺失

问题现象： 在本地 Jekyll 环境中测试时功能正常，但部署到 GitHub Pages 后某些功能（如动态效果）无法正常工作。

原因分析： AI 在本地修改了 Chirpy 主题的静态资源（位于 assets/lib 子模块），但 GitHub Pages 构建时子模块可能未初始化，导致文件缺失。

解决方案： 不要直接修改 Chirpy 主题的静态资源。如果需要修改，请将需要的文件复制到主仓库的相关目录（如 assets/lib-custom/），并更新所有引用路径。

在 HTML 标签（如 <details>、<div>）内使用 Markdown 语法时，本地预览和 GitHub Pages 渲染可能不一致。

原因分析： kramdown 在 HTML 标签内处理 Markdown 有限制，不同版本的 kramdown 对空白字符和换行的处理可能不同，导致本地 Jekyll 环境和 GitHub Pages 的渲染结果不一致。

解决方案： 在 HTML 标签内嵌套 Markdown 内容时，优先使用 HTML 标签而不是 Markdown 语法：

• 引用块：使用 <blockquote> 而不是 >
• 列表：使用 <ul>/<ol> 和 <li> 而不是 - 或 1.
• 段落：使用 <p> 包裹段落内容
• 代码：使用 <code> 或 <pre><code> 而不是反引号

给 AI 的提示词

当需要修改 Chirpy 主题的静态资源时：

不能直接修改 Chirpy 主题的静态资源（位于子模块中）。GitHub Pages 构建时子模块可能会未初始化，导致文件缺失。

正确的做法：
1. 将要修改的文件复制到主仓库的相关目录（如 assets/lib-custom/）
2. 更新所有引用路径，从子模块路径改为主仓库路径
3. 确保所有相关文件中的引用都已更新

---

Markdown本地预览和 GitHub Pages 渲染不一致时：

在 HTML 标签（如 <details>、<div>）内编写内容时，请使用 HTML 标签而不是 Markdown 语法，以确保在本地和 GitHub Pages 上渲染一致。例如：
- 使用 <blockquote> 而不是 > 来创建引用块
- 使用 <ul>/<ol> 和 <li> 而不是 - 或 1. 来创建列表
- 使用 <p> 包裹段落内容
- 使用 <code> 或 <pre><code> 来显示代码

静态网站相关技术的继续学习

日历功能

起因是帮 mcf 优化班级云平台的日历功能后，想着自己也做一个，就把优化后的日历功能整理成一个技术文档。

静态网站日历功能实现文档

以后直接发给 AI 就可以复用了。

从夯到拉排名功能

最近在整理健身相关的内容，就想到可以用这个排名来帮助读者一目了然。毕竟健身能分享的角度比较多，可能可以写4-5篇博客。

为了方便起见，就把优化后的从夯到拉排名功能整理成了一个技术文档。

静态网站从夯到拉排名功能实现文档

以后直接发给 AI 就可以复用了。

可展开卡片框功能

有些详细说明可能比较长，不方便读者阅读。

所以就会用这种形式，读者如果想知道详细说明的话可以展开阅读。

静态网站卡片框功能实现文档

以后直接发给 AI 就可以复用了。