起步阶段完全没必要用框架，手写HTML+CSS即可支撑前20篇文章；纯HTML博客即每篇博文一个独立HTML文件，导航用硬链接；语义化需严格区分<header>与<nav>，文章用<article>包裹，部署时统一用根相对路径。
直接用 HTML 写博客页面，到底要不要用框架
不用。至少起步阶段完全没必要。Jekyll、Hexo 这类静态生成器本质是把 Markdown 编译成 HTML，但你连 index.html 都没写熟时，先引入 Node.js 环境、配置模板引擎、调试 YAML front matter，只会卡在 npm run build 报错上。
真实情况是：90% 的个人博客前 20 篇文章，靠手写 HTML + CSS 就能撑满首页和归档页；剩下 10% 才需要考虑自动化。先让 post-01.html 能被浏览器打开，比“选对框架”重要十倍。
- 纯 HTML 博客 = 每篇博文一个独立
.html文件，比如2026-08-01-hello-world.html - 导航靠
<a href="...">硬链接，不依赖 JS 路由或构建工具 - 更新只需改文件名、改
<title>、改<time>标签里的datetime属性
<header> 和 <nav> 到底怎么写才不踩 SEO 坑
很多人把 Logo 和菜单塞进同一个 <div class="header">，结果搜索引擎根本分不清哪是品牌标识、哪是导航入口。HTML5 语义化不是摆设——<header> 只该包网站级元信息（如 <h1>、Logo 图片），<nav> 必须单独包裹所有跳转链接，且最好加 aria-label="main navigation"。
错误写法：
<header><br> <h1>我的博客</h1><br> <div><a href="index.html">首页</a></div><br></header>
正确写法：
<header><br> <h1>我的博客</h1><br></header><br><nav aria-label="main navigation"><br> <ul><br> <li><a href="index.html">首页</a></li><br> <li><a href="archive.html">归档</a></li><br> </ul><br></nav>
立即学习“前端免费学习笔记（深入）”；
-
<nav>里别放搜索框或登录按钮——那是<form>或<aside>的事 - 如果导航项超过 5 个，用
<details><summary>折叠二级菜单，比 JS 控制更轻量 - 首页的
<header>里<h1>必须存在；内页（如post-01.html）则应改用<h1>包裹文章标题，避免多 H1
文章列表页用 <article> 还是 <section>
用 <article>。这是唯一能被 RSS 阅读器、屏幕阅读器和 Google News 识别为“独立内容单元”的标签。你写的每一篇博文，只要具备完整主题、作者、时间、可独立传播，就必须套 <article>，而不是图省事用 <div class="post">。
典型结构：
<main><br> <article><br> <header><br> <h2>今天学了什么</h2><br> <time datetime="2026-08-01">2026年8月1日</time><br> </header><br> <p>摘要文字……</p><br> <a href="2026-08-01-today.html">阅读全文</a><br> </article><br></main>
-
<article>内部必须有<header>或<h1>–<h6>，否则语义断裂 - 归档页（
archive.html）里多个<article>并列，是标准做法；但侧边栏的“热门文章”推荐，用<section>更合适 - 别给
<article>加id属性搞锚点——它本身已是独立内容单元，URL 就是它的 ID
部署到 GitHub Pages 时 href 路径容易错在哪
错在混用相对路径和绝对路径。GitHub Pages 仓库默认开启 /username.github.io 子路径，但你在本地双击 index.html 浏览时，浏览器用的是 file:// 协议——这时 href="posts/2026-08-01.html" 会 404，因为文件系统里没有 posts/ 目录层级。
解决方案只有一条：所有链接统一用**根相对路径**（以 / 开头）：href="/2026-08-01-hello-world.html"href="/about.html"href="/css/style.css"
- 根相对路径在本地预览会失败（浏览器报
Not allowed to load local resource），但这是正常现象——用python3 -m http.server或 VS Code Live Server 插件就能解决 - CSS 里的图片路径同理，
background-image: url(/images/banner.jpg)，不是url(../images/...) - 千万别在
<base href="https://xxx.github.io">上动脑筋——它会让所有相对链接失效，且无法在本地测试
最麻烦的其实是文章内链：你在 2026-08-01.html 里写 <a href="2026-07-31.html">，部署后变成 https://xxx.github.io/2026-08-01.html/2026-07-31.html。唯一稳的办法，就是全部写成 /2026-07-31.html。
