5分钟快速上手Mirror：用GitHub Issues搭建你的第一个个人博客

5分钟快速上手Mirror：用GitHub Issues搭建你的第一个个人博客

【免费下载链接】MirrorA blogging tool powered by GitHub API. Write your blog on GitHub issue.项目地址: https://gitcode.com/gh_mirrors/mirror9/Mirror

想拥有自己的博客，却不想买服务器、不想折腾数据库？Mirror这款免费开源博客工具可以帮你用GitHub Issues 搭建个人博客——你只需要像发 Issue 一样写文章，Mirror 会自动把它们渲染成漂亮的博客页面，全程零后端、零维护成本。本文是一份新手友好、图文并茂（用表格和步骤代替截图）的快速上手教程，跟着做，5 分钟就能上线你的第一个博客。

Mirror 是什么：为什么用 GitHub Issues 写博客

Mirror 是一个基于 GitHub API 的轻量博客工具，核心思路非常巧妙：把 GitHub 仓库的 Issue 当作博客文章。你写文章 = 发 Issue，读者评论 = 回 Issue，一切都发生在 GitHub 上，你只需要一个前端页面把它展示出来。

用 Mirror 搭建博客的优势一目了然：

是不是很心动？下面直接开始动手 🚀

搭建博客前的准备工作

开始之前，请确认你手头有这三样东西：

1. 一个 GitHub 账号：用来创建仓库、发 Issue 写文章
2. 一个存放文章的仓库：在 GitHub 上新建一个公开仓库（比如叫blog），以后每篇 Issue 就是一篇文章
3. 一个静态托管平台：GitHub Pages、Vercel、Netlify 等都可以

💡 提示：仓库建议保持公开，这样别人可以直接通过 Issue 评论，访客也能看到文章源码。

三步快速部署：克隆、配置、构建

第一步：获取 Mirror 源码

打开终端，克隆项目到本地（也可以直接下载 ZIP 解压）：

git clone https://gitcode.com/gh_mirrors/mirror9/Mirror

然后进入目录，安装依赖：

npm install

第二步：修改配置文件

Mirror 的所有配置都集中在一个 HTML 文件里——index.sample.html。文件末尾有一段window.config，把它改成你自己的信息即可：

window.config = { organization: false, // 是否使用组织账号，true/false order: 'UPDATED_AT', // 文章排序：按更新时间或创建时间 title: 'Mirror', // 博客标题 user: '你的GitHub用户名', repository: '你的仓库名', // 存放文章的仓库 authors: '你的GitHub用户名', ignores: '17,13', // 忽略这些编号的 Issue（不展示） perpage: 5, // 每页显示的文章数 }

保存后，把这份文件重命名为index.html，放到项目根目录即可。

第三步：构建并部署

运行构建命令，生成静态文件（输出到docs目录）：

npm run build

构建完成后，把项目里的docs文件夹整个上传到你的托管平台（比如 GitHub Pages 的发布目录），博客就上线了 🎉

💡 本地预览调试可以运行npm start，Mirror 会自动启动开发服务器，方便你实时查看效果。

配置文件详解：一页看懂所有参数

表格里整理了常见配置项的含义，方便你按需调整：

如果想了解数据是怎么从 GitHub 拉取的，可以看看 src/api/issues.js 和 src/api/issue.js 中的 GraphQL 查询；页面渲染逻辑则集中在 src/template/issue.js 里。

开始写博客：Issue 就是你的文章

部署完成，接下来就是最重要的环节——写作。流程简单到令人发指：

1. 打开你的 GitHub 仓库，点击New issue（新建 Issue）
2. 标题写文章标题，正文用 Markdown 写内容
3. 可以顺手打上标签（Label），Mirror 会把标签显示在文章底部
4. 点击提交，回到你的博客刷新页面，文章就出现了 ✨

Mirror 会自动处理发布时间、文章列表、分页等细节，你只需要专注于写作本身。文章内容用 Markdown 渲染（基于github-markdown-css），代码高亮、列表、引用统统支持，体验和 GitHub 上一模一样。

开启评论：让读者参与讨论

每篇文章底部，Mirror 会自动显示评论按钮。读者点击View Comments后，就能看到所有评论——这些评论其实就是你这篇 Issue 下的回复，完全复用 GitHub 的评论体系，不需要任何第三方评论插件。

评论的加载逻辑在 src/index.js 的getComments方法里，感兴趣的话可以翻一翻源码，了解它是如何按页拉取评论的。

常见问题与避坑指南

Q1：文章不显示？检查window.config里的user和repository是否填写正确，同时确认仓库是公开的、Issue 状态为 Open。

Q2：不想展示某篇文章怎么办？在ignores配置里填上该 Issue 的编号即可，例如ignores: '17,13'会跳过编号 17 和 13 的两篇。

Q3：想用组织账号发布博客？把organization设为true，user填组织名即可，数据会从组织仓库读取。

Q4：每次都要重新构建吗？是的，改配置或更新代码后需要重新npm run build并上传docs目录；如果接入了 CI 自动部署，推送代码即可自动完成更新。

总结：你的 GitHub Issues 博客已上线

到这里，你的第一个基于GitHub Issues 的个人博客就正式完工了！回顾一下，整个过程只需要三步：克隆项目、改配置、构建部署，完全免费、无需后端。之后写博客就是"发 Issue"这么简单，评论、标签、分页统统自动搞定。

如果你喜欢这种"用 Issue 写作"的极简理念，还可以继续探索：自定义样式可以修改 src/style/ 下的样式文件，深入定制请查阅 package.json 中的脚本命令。现在就打开你的 GitHub，写下第一篇 Issue 吧 📝

【免费下载链接】MirrorA blogging tool powered by GitHub API. Write your blog on GitHub issue.项目地址: https://gitcode.com/gh_mirrors/mirror9/Mirror