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.我的配置 - 修改「bga_issue_blog/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 而且替換「bga_issue_blog/static/img/qq-group.png」爲你本身的 QQ 羣二維碼圖片，不然配置成 false 便可
  thirdPartySite: [  // 配置你想在左上角展現的第三方站點信息
    {
      img: 'static/img/github.png',  // 第三方站點圖標，存放在「bga_issue_blog/static/img」目錄中
      url: 'https://github.com/bingoogolapple'  // 第三方站點的 url
    },
    {
      img: 'static/img/git.png',
      url: 'https://bingoogolapple.gitbooks.io/bgalearningnotes-git/content'
    }
    // 若是還有其餘站點須要顯示，繼續在這裏追加
  ]
}
複製代碼

5.我的配置 - 修改網站圖標

修改「bga_issue_blog/static/img/favicon.ico」文件
複製代碼

6.我的配置 - 修改網站標題

修改「bga_issue_blog/index.html」文件裏「<title>」標籤裏的內容
複製代碼

發佈到 GitHub Pages

1.打包

npm run build
複製代碼

2.發佈

拷貝「bga_issue_blog/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

關於我

我的主頁	郵箱	BGA系列開源庫QQ羣
bingoogolapple.cn	bingoogolapple@gmail.com