Vue + VueRouter + Vuex + Axios 抓取 GitHub 上的 Issues 搭建个人博客站点，支持评论功能

项目背景

刚接触 GitHub 的时候就开始在仓库 bingoogolapple.github.io 里创建 Issues 来记录学习笔记，那时候我还不知道有 GitHub Pages，后来了解到了可以通过 GitHub Pages 来搭建 个人博客站点，但是如果涉及到在文章里嵌套图片的话还是比较麻烦的

通过 Issues 记录学习笔记的优点：

• 在线编辑和预览，随时添加和提交（不用担心电脑坏了导致笔记丢失）
• 当笔记里到嵌套图片时，支持粘贴屏幕截图和拖拽添加图片
• 带有搜索和排序功能
• 可通过 Label 来对 Issues 进行分类
• 可以把每一个 Comment 作为一个小的知识点不停的追加到 Issue 里
• 结合 GitHub Pages 绑定域名来搭建个人博客站点
• 支持评论功能

效果图

列表界面

详情界面

关于我界面

使用方法

本地运行

1.安装依赖

npm install

2.在本地开启服务，然后就可以通过 http://localhost:8080 访问了

npm run dev

3.创建 OAuth Application

4.个人配置 - 修改「 BGAIssueBlog/src/store/account.js 」文件中的「 state 」属性

const state = {
  accessToken: localStorage.getItem(LS_KEY_ACCESS_TOKEN),  // 这个不要修改，这个不要修改，这个不要修改。当前登录用户的 GitHub AccessToken
  auth: {
    proxy: 'https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token', // 这个不要修改，这个不要修改，这个不要修改。
    clientID: '8fe09ec96875938b908d',   // 改成你在 https://github.com/settings/applications/new 新建的 OAuth application 的 Client ID
    clientSecret: '46df51ccde6f3499c3b90861bba660fb1bcf15e4'  // 改成你在 https://github.com/settings/applications/new 新建的 OAuth application 的 Client Secret
  },
  gitHubUser: null,  // 这个不要修改，这个不要修改，这个不要修改。
  gitHubUsername: 'bingoogolapple',  // 修改成你自己的 GitHub 账号
  copyright: '2014 - 2017',  // 修改成你自己的
  recordNumber: '蜀 ICP 备 17023604 号',  // 修改成你自己的备案编号，如果没有备案的话就设置为 null
  repo: 'bingoogolapple/bingoogolapple.github.io',  // 记录 Issue 的仓库的全名「用户名 /仓库名」
  pageSize: 10,  // 博客列表每页显示多少条博客
  showQQGroup: true,  // 如果要显示你自己的 QQ 群二维码图片的话这里配置成 true 并且替换「 BGAIssueBlog-Web/static/img/qq-group.png 」为你自己的 QQ 群二维码图片，否则配置成 false 即可
  thirdPartySite: [  // 配置你想在左上角展示的第三方站点信息
    {
      img: 'static/img/github.png',  // 第三方站点图标，存放在「 BGAIssueBlog-Web/static/img 」目录中
      url: 'https://github.com/bingoogolapple'  // 第三方站点的 url
    },
    {
      img: 'static/img/weibo.png',
      url: 'http://weibo.com/bingoogol'
    },
    {
      img: 'static/img/git.png',
      url: 'https://bingoogolapple.gitbooks.io/bgalearningnotes-git/content'
    }
    // 如果还有其他站点需要显示，继续在这里追加
  ]
}

5.个人配置 - 修改网站图标

修改「 BGAIssueBlog/static/img/favicon.ico 」文件

6.个人配置 - 修改网站标题

修改「 BGAIssueBlog/index.html 」文件里「<title>」标签里的内容

发布到 GitHub Pages

1.打包

npm run build

2.发布

拷贝「 BGAIssueBlog/docs 」目录里的所有文件到「 GitHub Pages 」的根目录下
并将「 GitHub Pages 」仓库 PUSH 到 GitHub 上

绑定域名到 GitHub Pages

1.在「 GitHub Pages 」根目录下添加文件名为「 CNAME 」的文件，文件内容就是你的二级域名，例如我的是

www.bingoogolapple.cn

2.登陆你的域名控制台添加域名解析

「记录类型」选择「 CNAME 」
「主机记录」填「 www 」
「记录值」填「 GitHub 用户名.github.io 」，例如我的是「 bingoogolapple.github.io 」

相关链接

• GitHub 源码
• 个人站点 Demo