企业官网建设流程全解析

Mirror新手入门10步：从GitHub仓库到发布第一篇文章完整教程

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

Mirror是一款基于GitHub API的博客工具，核心玩法是用GitHub Issue写博客：每一条Issue就是一篇文章，Issue的评论区就是博客评论区，完全不需要服务器和数据库。这份Mirror新手入门教程将用10个步骤，带你从克隆GitHub仓库开始，完成配置、本地预览、构建部署，最终顺利发布第一篇文章，让你的个人博客在几分钟内免费上线。

为什么推荐用Mirror写博客？

在开始之前，先花30秒了解它的独特优势：

• ✅零成本：数据全部存在GitHub上，不用买服务器、不用买域名
• ✅零维护：没有数据库和后台，也就没有崩溃和备份的烦恼
• ✅Markdown原生支持：用你最熟悉的Markdown语法写作
• ✅评论功能免费送：Issue评论区天然就是博客评论区
• ✅数据可迁移：文章就是Issue，随时可以导出带走

它的原理其实很朴素：Mirror通过GitHub GraphQL API拉取仓库里的Issue，在浏览器端渲染成博客页面。相关请求逻辑都集中在src/api/目录下，比如负责文章列表的issues.js和负责单篇文章的issue.js。

第1步 注册GitHub账号

用GitHub Issue写博客，前提当然是有一个GitHub账号。如果你还没有，先去官网免费注册一个，整个过程不到2分钟。

💡小提示：账号名会出现在博客首页的作者卡片上，建议注册时选一个和你博客定位相符的名字。

第2步 获取GitHub Token：3分钟准备

Mirror需要读取你仓库中的Issue数据，这要通过一个Access Token来授权。在GitHub的Settings → Developer settings → Personal access tokens页面创建一个新Token，勾选public_repo权限即可（如果博客仓库是私有的，则需要repo权限）。

⚠️注意：Token相当于你账号的钥匙，务必妥善保管，不要泄露给任何人。稍后我们会教你把Token加密后安全地放进配置里。

第3步 创建博客仓库

回到GitHub首页，点击New repository新建一个仓库，这就是你存放文章的"博客仓库"。仓库名建议简短好记，比如my-blog，创建时可以选择私有或公开，对Mirror来说都能正常工作。

第4步 获取Mirror源码：克隆仓库并安装依赖

在终端中执行以下命令，把Mirror源码克隆到本地：

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

进入项目目录后安装依赖：

npm install

安装完成后，整个项目就绪。你可以在package.json里看到项目提供的几个命令：npm start用于本地预览，npm run build用于构建部署，npm run lint用于代码检查。

第5步 填写核心配置：Mirror最快配置方法

Mirror的配置非常轻量，全部集中在一个window.config对象里。项目自带一份模板文件index.sample.html，把它复制一份改名为index.html，然后修改里面的配置即可：

核心就三项：user、repository和hash。前两项告诉Mirror去哪个仓库读文章，第三项是访问凭证。

第6步 生成加密Token：安全填入hash字段

直接把Token明文写进HTML有泄露风险，所以Mirror提供了一套简单的加密方案，实现在src/helper/secret.js中。方法并不复杂：

1. 把Token中的数字替换为对应符号：0→)、1→!、2→@、3→#、4→$、5→%、6→^、7→&、8→*、9→(
2. 把你的博客域名做base64编码
3. 把两者拼接：加密后的Token = 替换符号后的Token + 域名base64

举个例子：Token为ghp_123，替换后变成ghp_!@#，再拼接上域名的base64结果，就是最终的hash值。本地预览时使用配置里的host进行加密，部署上线后Mirror会自动用你的真实域名解密，这也是host必须和部署域名保持一致的原因。

第7步 本地预览：npm start一键启动

配置完成后，在项目根目录运行：

npm start

终端会启动一个本地开发服务器，打开浏览器访问提示的地址，你就能看到博客首页了。此时文章列表、文章详情页、评论加载等功能全部可用，可以先确认数据是否正常显示，再进入下一步部署。

第8步 构建静态文件：npm run build生成docs目录

本地预览没问题后，执行构建命令：

npm run build

构建脚本定义在package.json中，构建完成后会在项目根目录生成一个docs文件夹，里面就是打包好的静态网站文件（包括带hash的JS文件，比如docs/index.xxxx.js），这个文件夹就是可以直接部署的内容。

第9步 部署上线：把博客发布到GitHub Pages

Mirror构建产物是纯静态文件，可以部署到任何静态托管平台。最省事的方式是GitHub Pages：

1. 新建一个仓库（或直接使用你的博客仓库），把docs文件夹的内容推送上去
2. 在仓库的Settings → Pages中，把发布目录设置为docs
3. 稍等片刻，访问https://你的用户名.github.io/仓库名，博客就上线了

🎉 到这里，一个完全免费、无需服务器的个人博客就诞生了。

第10步 发布第一篇文章：用Issue写博客完整流程

博客上线后，写文章的操作非常直观——去你的博客仓库新建一条Issue：

• Issue标题= 文章标题
• Issue正文= 文章内容，直接用Markdown编写
• 标签（Labels）= 文章分类，每篇文章最多展示3个标签
• Issue评论= 博客评论，读者可以直接在下面互动

一些实用技巧：

• 想暂时隐藏某篇文章？把它对应的Issue编号加进ignores配置即可
• 想调整文章排序？在order里切换UPDATED_AT和CREATED_AT
• 文章翻页由src/router/index.js中的路由规则处理，包括/after/:cursor和/before/:cursor两个分页路径，你无需关心细节

总结

至此，你已走完了Mirror新手入门的全部10步：从GitHub仓库获取源码，到配置Token、本地预览、构建部署，最后用Issue发布了第一篇文章。整个过程不需要写后端代码、不需要数据库、不花一分钱。往后你的全部精力只需要放在一件事上——写文章，剩下的，交给Mirror就好。

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