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 搭建博客的优势一目了然对比项传统博客Mirror 博客服务器费用需要买主机/域名✅ 完全免费数据库维护需要备份和管理✅ 无需数据库写作方式后台编辑器✅ 直接用 Issue 写评论系统需接入第三方✅ 自带 Issue 评论部署难度较高✅ 一条命令构建是不是很心动下面直接开始动手 搭建博客前的准备工作开始之前请确认你手头有这三样东西一个 GitHub 账号用来创建仓库、发 Issue 写文章一个存放文章的仓库在 GitHub 上新建一个公开仓库比如叫blog以后每篇 Issue 就是一篇文章一个静态托管平台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 startMirror 会自动启动开发服务器方便你实时查看效果。配置文件详解一页看懂所有参数表格里整理了常见配置项的含义方便你按需调整配置项作用示例值user你的 GitHub 用户名或组织名octocatrepository存放文章的仓库名blogtitle浏览器标签页显示的博客标题我的博客perpage首页每页展示几篇文章5order排序字段CREATED_AT或UPDATED_ATUPDATED_ATignores跳过不展示的 Issue 编号逗号分隔17,13organization数据源是否为组织账号false如果想了解数据是怎么从 GitHub 拉取的可以看看 src/api/issues.js 和 src/api/issue.js 中的 GraphQL 查询页面渲染逻辑则集中在 src/template/issue.js 里。开始写博客Issue 就是你的文章部署完成接下来就是最重要的环节——写作。流程简单到令人发指打开你的 GitHub 仓库点击New issue新建 Issue标题写文章标题正文用 Markdown 写内容可以顺手打上标签LabelMirror 会把标签显示在文章底部点击提交回到你的博客刷新页面文章就出现了 ✨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设为trueuser填组织名即可数据会从组织仓库读取。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考