经典HTML搭建个人博客实战操作步骤

作者：袖梨 2026-08-10

起步阶段完全没必要用框架，手写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 能被浏览器打开，比“选对框架”重要十倍。

  1. 纯 HTML 博客 = 每篇博文一个独立 .html 文件，比如 2026-08-01-hello-world.html
  2. 导航靠 <a href="..."> 硬链接，不依赖 JS 路由或构建工具
  3. 更新只需改文件名、改 <title>、改 <time> 标签里的 datetime 属性

<header> 和 <nav> 到底怎么写才不踩 SEO 坑

很多人把 Logo 和菜单塞进同一个 <div class="header">，结果搜索引擎根本分不清哪是品牌标识、哪是导航入口。HTML5 语义化不是摆设——<header> 只该包 级元信息（如 <h1>、Logo 图片），<nav> 必须单独包裹所有跳转链接，且最好加 aria-label="main navigation"。

错误写法：

<header>

<h1>我的博客</h1>

<div><a href="index.html">首页</a></div>

</header>

正确写法：

<header>

<h1>我的博客</h1>

</header>

<nav aria-label="main navigation">

<ul>

<li><a href="index.html">首页</a></li>

<li><a href="archive.html">归档</a></li>

</ul>

</nav>

  1. <nav> 里别放搜索框或登录按钮——那是 <form> 或 <aside> 的事
  2. 如果导航项超过 5 个，用 <details><summary> 折叠二级菜单，比 JS 控制更轻量
  3. 首页的 <header> 里 <h1> 必须存在；内页（如 post-01.html）则应改用 <h1> 包裹文章标题，避免多 H1

文章列表页用 <article> 还是 <section>

用 <article>。这是唯一能被 RSS 阅读器、屏幕阅读器和 Google News 识别为“独立内容单元”的标签。你写的每一篇博文，只要具备完整主题、作者、时间、可独立传播，就必须套 <article>，而不是图省事用 <div class="post">。

典型结构：

<main>

<article>

<header>

<h2>今天学了什么</h2>

<time datetime="2026-08-01">2026年8月1日</time>

</header>

<p>摘要文字……</p>

<a href="2026-08-01-today.html">阅读全文</a>

</article>

</main>

  1. <article> 内部必须有 <header> 或 <h1>–<h6>，否则语义断裂
  2. 归档页（archive.html）里多个 <article> 并列，是标准做法；但侧边栏的“热门文章”推荐，用 <section> 更合适
  3. 别给 <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"

  1. 根相对路径在本地预览会失败（浏览器报 Not allowed to load local resource），但这是正常现象——用 python3 -m http.server 或 VS Code Live Server 插件就能解决
  2. CSS 里的图片路径同理，background-image: url(/images/banner.jpg)，不是 url(../images/...)
  3. 千万别在 <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。

相关文章

精彩推荐