纯HTML个人博客可第一天上线，核心是正确命名index.html、统一文件路径、用UTF-8编码保存并双击打开；文章列表用JSON+JS动态生成；需添加viewport meta、响应式CSS及GitHub Pages绝对路径。
不需要懂后端、不用装服务器、不依赖 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 驱动的结构，维护成本立刻降下来。
- 把文章信息抽成 JSON 格式，存在单独的
articles.js里，例如：const articles = [ { title: "我的第一篇笔记", date: "2026-08-01", excerpt: "今天搞懂了 meta 标签的作用..." }, { title: "CSS Flex 布局实战", date: "2026-07-25", excerpt: "终于不用 float 清除浮动了..." } ]; - 在
index.html底部加一段<script>，遍历articles数组，用document.createElement动态生成<article>块，再appendChild到页面容器中 - 注意：JS 必须放在
<body>底部或加defer属性，否则可能操作 DOM 失败——因为脚本执行时<div id="article-list">还没加载出来 - 这种模式不依赖服务器，但所有文章数据都在前端暴露；如果未来要防爬或加权限，就得换后端方案
为什么你写的 CSS 在手机上完全变形
不是 CSS 写错了，大概率是漏了关键的响应式锚点——<meta name="viewport">。
立即学习“前端免费学习笔记（深入）”；
- 必须在
<head>里加上：<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 —— 部署前清空缓存、用无痕窗口验证，比反复改代码更省时间。
