項目背景

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

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

const state = {accessToken: localStorage.getItem(LS_KEY_ACCESS_TOKEN), // 這個不要修改，這個不要修改，這個不要修改。當前登錄用戶的 GitHub AccessTokenauth: {proxy: 'https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token', // 這個不要修改，這個不要修改，這個不要修改。clientID: '8fe09ec96875938b908d', // 改成你在 https://github.com/settings/applications/new 新建的 OAuth application 的 Client IDclientSecret: '46df51ccde6f3499c3b90861bba660fb1bcf15e4' // 改成你在 https://github.com/settings/applications/new 新建的 OAuth application 的 Client Secret},gitHubUser: null, // 這個不要修改，這個不要修改，這個不要修改。gitHubUsername: 'bingoogolapple', // 修改成你自己的 GitHub 賬號copyright: '2014 - 2017', // 修改成你自己的recordNumber: '蜀ICP備17023604號', // 修改成你自己的備案編號，如果沒有備案的話就設置為 nullrepo: '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

關于我

新浪微博個人主頁郵箱BGA系列開源庫QQ群

bingoogolapple	bingoogolapple.cn	bingoogolapple@gmail.com	BGA_CODE_CLUB

總結

以上是生活随笔為你收集整理的Vue + VueRouter + Vuex + Axios 抓取 GitHub 上的 Issues 来搭建个人博客站点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。