起步阶段完全没必要用框架，手写html+css即可支撑前20篇文章；纯html博客即每篇博文一个独立html文件，导航用硬链接；语义化需严格区分与，文章用包裹，部署时统一用根相对路径。
直接用 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="..."></a>硬链接，不依赖 JS 路由或构建工具 - 更新只需改文件名、改
<title></title>、改<time></time>标签里的datetime属性
<header></header> 和 <nav></nav> 到底怎么写才不踩 SEO 坑
很多人把 Logo 和菜单塞进同一个 <div class="header">，结果搜索引擎根本分不清哪是品牌标识、哪是导航入口。HTML5 语义化不是摆设——<code><header></header> 只该包网站级元信息（如 <h1></h1>、Logo 图片），<nav></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></nav>里别放搜索框或登录按钮——那是<form></form>或<aside></aside>的事 - 如果导航项超过 5 个，用
<details><summary></summary></details>折叠二级菜单，比 JS 控制更轻量 - 首页的
<header></header>里<h1></h1>必须存在；内页（如post-01.html）则应改用<h1></h1>包裹文章标题，避免多 H1
文章列表页用 <article></article> 还是 <section></section>
用 <article></article>。这是唯一能被 RSS 阅读器、屏幕阅读器和 Google News 识别为“独立内容单元”的标签。你写的每一篇博文，只要具备完整主题、作者、时间、可独立传播，就必须套 <article></article>，而不是图省事用 <div class="post">。
<p>典型结构：<br></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><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></pre>
<ul>
<li>
<code><article></article> 内部必须有 <header></header> 或 <h1>–<h6></h6>
</h1>，否则语义断裂
archive.html）里多个 <article></article> 并列，是标准做法；但侧边栏的“热门文章”推荐，用 <section></section> 更合适<article></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"></a>，部署后变成 https://xxx.github.io/2026-08-01.html/2026-07-31.html。唯一稳的办法，就是全部写成 /2026-07-31.html。
