纯前端博客搭建教程：HTML + Markdown + GitHub Pages

很多人想拥有自己的博客，但被服务器、域名、建站程序劝退。其实对个人博客来说，最省心的方案是：纯静态站点 + 免费静态托管。这篇文章手把手教你复刻本站的架构。

#一、为什么选择纯静态博客

对比常见方案：

纯静态方案最大的优势：没有服务器、没有数据库、没有动态语言，天然安全，部署即上线。

#二、整体架构

txtblog/
├── index.html          # 入口页面
├── css/                # 样式文件
├── js/
│   ├── config.js       # 站点配置 + 文章元信息
│   ├── router.js       # hash 路由
│   ├── renderer.js     # 页面渲染
│   └── app.js          # 入口逻辑
├── posts/              # 文章目录（Markdown）
└── about.md            # 关于页面

核心思路：config.js 里登记文章的元信息（标题、日期、标签），页面跳转时用 fetch 加载对应的 .md 文件，交给 marked 转成 HTML 渲染。

#三、添加一篇文章

只需两步：

1. 在 posts/ 目录新建一个 Markdown 文件，例如 my-first-post.md；
2. 在 js/config.js 的 posts 数组里登记：

js{
  slug: 'my-first-post',
  title: '我的第一篇文章',
  date: '2026-09-01',
  category: '随笔',
  tags: ['随笔', '生活'],
  excerpt: '这篇文章讲的是……',
  published: true
}

刷新页面，文章就会出现在首页列表里。

#四、部署到 GitHub Pages

1. 在 GitHub 新建仓库，把整个目录推上去；
2. 进入仓库 Settings → Pages；
3. Source 选择 Deploy from a branch，分支选 main，目录选 / (root)；
4. 等一两分钟，访问 https://你的用户名.github.io/仓库名/ 即可。

小提示：部署在仓库子路径时，config.js 里的 baseUrl 要改成 /仓库名/；如果用自定义域名或 EdgeOne Pages，保持空字符串即可。

#五、部署到 EdgeOne Pages

1. 登录 EdgeOne 控制台，进入 Pages；
2. 新建项目，上传本地目录或关联 Git 仓库；
3. 构建配置留空（纯静态不需要构建），部署完成后即可通过生成的域名访问。

#六、总结

这个方案五脏俱全：文章列表、搜索、标签、文章详情、关于页面都有，而且全文只有几个小文件。如果你也想搭一个属于自己的博客，复制这套架构，改改配置就能用。