Vue + VueRouter + Vuex + Axios 抓取 GitHub 上的 Issues 來搭建個人部落格站點

bingoogolapple發表於2017-07-19
VueiOSGithub

專案背景

剛接觸 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

OAuth Application
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」複製程式碼

相關連結

關於我

新浪微博 個人主頁 郵箱 BGA系列開源庫QQ群
bingoogolapple bingoogolapple.cn bingoogolapple@gmail.com
BGA_CODE_CLUB
BGA_CODE_CLUB

相關文章