用纯HTML/CSS构建可维护静态博客首页的核心是：结构清晰、内容与样式解耦、预留扩展位；文章列表为唯一动态区，其余硬编码但语义化；样式全抽离至style.css，用语义类名和CSS自定义属性；通过HTML注释标记注入点，路径统一用根相对路径，文件名全小写。
如何用纯 HTML/CSS 构建可维护的静态博客首页？
不需要框架、不依赖构建工具，index.html 本身就能撑起一个真实可用的静态博客首页——前提是结构清晰、内容与样式解耦，且预留好扩展位。
核心思路是：把「文章列表」作为唯一动态感知区，其余（导航、页脚、元信息）全部硬编码但保持语义化；所有样式通过外部 style.css 控制，避免内联样式或 <style> 块。
- 每篇文章用
<article>包裹，含<h2>标题、<time>发布时间、<p>摘要、<a href="post1.html">链接 - 标题不用
<h1>（留给单篇页），首页统一用<h2>，保证层级合理 - 发布时间写成
<time datetime="2024-03-15">Mar 15, 2024</time>，既利于 SEO，也方便后续用 JS 或静态生成器注入真实日期 - 避免在
index.html里写死大量重复结构，比如 10 篇文章就复制粘贴 10 次<article>—— 这会极大提高后期维护成本
为什么不要在 index.html 里直接写 CSS 样式？
内联样式或 <style> 块会让 index.html 变成“样式+结构”混合体，一旦想改配色、调整响应式断点，就得翻整个 HTML 文件。更麻烦的是：单篇页（如 post1.html）如果复用同样布局，样式又得再写一遍，违背 DRY 原则。
- 把所有样式抽到
style.css，并在index.html头部用<link rel="stylesheet" href="style.css">引入 - 关键选择器命名保持语义，比如
.post-list、.post-title、.post-meta，而非.box1或.blue-text - 对移动端适配，直接在
style.css里写@media (max-width: 768px)，不要用 JavaScript 动态加 class - 字体、颜色、行高这些全局变量，先在
:root里定义 CSS 自定义属性，例如--text-primary: #333;，后续全文件可复用
如何让 index.html 支持未来接入静态生成器？
哪怕现在手写 HTML，也要为以后留接口。很多静态博客生成器（如 Hugo、Jekyll、Halo）都靠识别特定注释或 class 来注入内容，提前埋好标记能省去重构成本。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 在文章列表位置留空，并加 HTML 注释说明意图：
<!-- POSTS_START --><!-- POSTS_END --> - 每篇手写文章用
class="manual-post"标记，生成器脚本可安全跳过这些元素，只处理无该 class 的占位区块 - 侧边栏若计划放标签云或归档，用
<aside class="sidebar"><h3>Tags</h3><div id="tag-cloud"></div></aside>，把实际渲染逻辑留给 JS 或生成器 - 避免使用
id="main-content"这类泛用 ID —— 它容易和生成器默认 ID 冲突，优先用 class
常见错误：点击文章链接后页面空白或样式丢失
这几乎全是路径问题。当 index.html 和文章页（如 posts/hello-world.html）不在同一级目录时，相对路径引用 CSS 或图片会立即失效。
- CSS 引入一律用根相对路径：
href="/style.css"（开头带/），而不是href="style.css"或href="../style.css" - 文章内图片路径也统一用根路径：
<img src="/assets/images/cover.jpg">，并确保assets文件夹放在网站根目录下 - 检查浏览器开发者工具的 Network 面板，看
style.css是否返回 404；如果是，说明服务器没把文件放到正确位置，不是代码写错 - 本地双击打开
index.html时，file://协议会禁用部分跨目录请求，务必用本地服务器测试（如 Python 的python3 -m http.server）
最易被忽略的一点：HTML 文件名大小写敏感。写 <a href="Post1.html"> 但实际文件是 post1.html，在 macOS 或 Windows 本地可能正常，部署到 Linux 服务器就 404。统一小写，从一开始就养成习惯。
