零起点HTML搭建个人博客全攻略-html教程-PHP中文网

纯html个人博客可第一天上线，核心是正确命名index.html、统一文件路径、用utf-8编码保存并双击打开；文章列表用json+js动态生成；需添加viewport meta、响应式css及github pages绝对路径。

零起点html搭建个人博客全攻略

不需要懂后端、不用装服务器、不依赖 CMS，用纯 HTML 就能跑起来一个可访问的个人博客——这事完全可行，而且第一天就能上线。

怎么让 index.html 变成能打开的博客首页

核心就三件事：写对文件名、放对位置、用浏览器双击打开。

index.html 是默认首页名，必须严格小写、不能写成 Index.html 或 home.html，否则本地双击可能打不开，部署到服务器时也找不到入口
所有相关文件（style.css、图片、文章页等）最好放在同一个文件夹里，避免路径出错；比如 img/avatar.jpg 就得确保文件夹下真有 img/ 子目录和这个图片
别用 Word 或 WPS 编辑，它们会插入隐藏格式字符；用 VS Code、Sublime Text 或系统自带记事本（保存时选“所有文件”，编码选 UTF-8）
改完代码后，直接双击 index.html 文件——不是用编辑器“预览”，是让系统用默认浏览器打开它。如果看到乱码，大概率是保存时没选 UTF-8 编码

文章列表怎么从硬编码变成可维护结构

一开始把每篇文章都手写进 index.html 里，改一篇就得翻半天代码。换成简单 JS 驱动的结构，维护成本立刻降下来。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

把文章信息抽成 JSON 格式，存在单独的 articles.js 里，例如：

const articles = [
  { title: "我的第一篇笔记", date: "2026-08-01", excerpt: "今天搞懂了 meta 标签的作用..." },
  { title: "CSS Flex 布局实战", date: "2026-07-25", excerpt: "终于不用 float 清除浮动了..." }
];

在 index.html 底部加一段 <script></script>，遍历 articles 数组，用 document.createElement 动态生成 <article></article> 块，再 appendChild 到页面容器中
注意：JS 必须放在底部或加 defer 属性，否则可能操作 DOM 失败——因为脚本执行时 <div id="article-list"> 还没加载出来 <li>这种模式不依赖服务器，但所有文章数据都在前端暴露；如果未来要防爬或加权限，就得换后端方案</li> <h3>为什么你写的 CSS 在手机上完全变形</h3> <p>不是 CSS 写错了，大概率是漏了关键的响应式锚点——<code><meta name="viewport">。
- 必须在里加上：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
  没这行，移动端浏览器会按桌面宽度渲染，文字小得看不见
- 用 flex 或 grid 布局比 float 更可靠；但别一上来就套复杂 Grid 模板，先用 display: flex + flex-wrap: wrap 控制导航栏和文章卡片就够了
- 媒体查询别只写 @media (max-width: 768px)，实际测试时用 Chrome DevTools 的设备模拟器，切到 iPhone SE 或 Pixel 5 看真实表现——有些“窄屏”其实宽度是 375px，不是 768px
- 字体大小别全用 px，标题用 rem，正文用 em 或 clamp()，否则 iOS Safari 缩放设置会失效
部署到 GitHub Pages 后样式丢失或 404

本地双击正常，上传后挂了？90% 是路径问题，尤其图片和 CSS 引入。
- GitHub Pages 默认根路径是仓库名，比如仓库叫 myblog，访问地址就是 https://username.github.io/myblog/；所有相对路径都以此为基准
- 错误写法：<link rel="stylesheet" href="style.css"> → 如果页面在子目录如 /posts/hello.html，就会去请求 /posts/style.css
- 正确写法：<link rel="stylesheet" href="/myblog/style.css">（绝对路径），或统一用 <link rel="stylesheet" href="./style.css"> 并确保所有 HTML 都在同一级目录
- 图片路径同理，<img src="img/logo.png"> 在子页面会 404，改成 <img src="/myblog/img/logo.png">
- 检查 GitHub Pages 构建日志：进入仓库 Settings → Pages → Build and deployment，点最近一次构建的 “View deployment log”，看有没有 404 或 permission denied
真正卡住人的往往不是技术多难，而是某处路径少了个斜杠、某个标签没闭合、或者浏览器缓存了旧版本 CSS —— 部署前清空缓存、用无痕窗口验证，比反复改代码更省时间。

零起点HTML搭建个人博客全攻略

怎么让 index.html 变成能打开的博客首页

文章列表怎么从硬编码变成可维护结构

部署到 GitHub Pages 后样式丢失或 404