項(xiàng)目背景

剛接觸 GitHub 的時(shí)候就開始在倉庫 bingoogolapple.github.io 里創(chuàng)建 Issues 來記錄學(xué)習(xí)筆記，那時(shí)候我還不知道有 GitHub Pages，后來了解到了可以通過 GitHub Pages 來搭建 個(gè)人博客站點(diǎn)，但是如果涉及到在文章里嵌套圖片的話還是比較麻煩的

通過 Issues 記錄學(xué)習(xí)筆記的優(yōu)點(diǎn)：

• 在線編輯和預(yù)覽，隨時(shí)添加和提交（不用擔(dān)心電腦壞了導(dǎo)致筆記丟失）
• 當(dāng)筆記里到嵌套圖片時(shí)，支持粘貼屏幕截圖和拖拽添加圖片
• 帶有搜索和排序功能
• 可通過 Label 來對 Issues 進(jìn)行分類
• 可以把每一個(gè) Comment 作為一個(gè)小的知識(shí)點(diǎn)不停的追加到 Issue 里
• 結(jié)合 GitHub Pages 綁定域名來搭建個(gè)人博客站點(diǎn)
• 支持評論功能

效果圖

列表界面

列表界面

詳情界面

詳情界面
詳情界面-滾動(dòng)到頂部和評論

關(guān)于我界面

關(guān)于我界面

使用方法

本地運(yùn)行

1.安裝依賴

npm install復(fù)制代碼

2.在本地開啟服務(wù)，然后就可以通過 http://localhost:8080 訪問了

npm run dev復(fù)制代碼

3.創(chuàng)建 OAuth Application

OAuth Application

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

const state = {accessToken: localStorage.getItem(LS_KEY_ACCESS_TOKEN), // 這個(gè)不要修改，這個(gè)不要修改，這個(gè)不要修改。當(dāng)前登錄用戶的 GitHub AccessTokenauth: {proxy: 'https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token', // 這個(gè)不要修改，這個(gè)不要修改，這個(gè)不要修改。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, // 這個(gè)不要修改，這個(gè)不要修改，這個(gè)不要修改。gitHubUsername: 'bingoogolapple', // 修改成你自己的 GitHub 賬號(hào)copyright: '2014 - 2017', // 修改成你自己的recordNumber: '蜀ICP備17023604號(hào)', // 修改成你自己的備案編號(hào)，如果沒有備案的話就設(shè)置為 nullrepo: 'bingoogolapple/bingoogolapple.github.io', // 記錄 Issue 的倉庫的全名「用戶名/倉庫名」pageSize: 10, // 博客列表每頁顯示多少條博客showQQGroup: true, // 如果要顯示你自己的 QQ 群二維碼圖片的話這里配置成 true 并且替換「BGAIssueBlog-Web/static/img/qq-group.png」為你自己的 QQ 群二維碼圖片，否則配置成 false 即可thirdPartySite: [ // 配置你想在左上角展示的第三方站點(diǎn)信息{img: 'static/img/github.png', // 第三方站點(diǎn)圖標(biāo)，存放在「BGAIssueBlog-Web/static/img」目錄中url: 'https://github.com/bingoogolapple' // 第三方站點(diǎn)的 url},{img: 'static/img/weibo.png',url: 'http://weibo.com/bingoogol'},{img: 'static/img/git.png',url: 'https://bingoogolapple.gitbooks.io/bgalearningnotes-git/content'}// 如果還有其他站點(diǎn)需要顯示，繼續(xù)在這里追加] }復(fù)制代碼

5.個(gè)人配置 - 修改網(wǎng)站圖標(biāo)

修改「BGAIssueBlog/static/img/favicon.ico」文件復(fù)制代碼

6.個(gè)人配置 - 修改網(wǎng)站標(biāo)題

修改「BGAIssueBlog/index.html」文件里「<title>」標(biāo)簽里的內(nèi)容復(fù)制代碼

發(fā)布到 GitHub Pages

1.打包

npm run build復(fù)制代碼

2.發(fā)布

拷貝「BGAIssueBlog/docs」目錄里的所有文件到「GitHub Pages」的根目錄下 并將「GitHub Pages」倉庫 PUSH 到 GitHub 上復(fù)制代碼

綁定域名到 GitHub Pages

1.在「GitHub Pages」根目錄下添加文件名為「CNAME」的文件，文件內(nèi)容就是你的二級域名，例如我的是

www.bingoogolapple.cn復(fù)制代碼

2.登陸你的域名控制臺(tái)添加域名解析

「記錄類型」選擇「CNAME」 「主機(jī)記錄」填「www」 「記錄值」填「GitHub用戶名.github.io」，例如我的是「bingoogolapple.github.io」復(fù)制代碼

相關(guān)鏈接

• GitHub 源碼
• 個(gè)人站點(diǎn) Demo

關(guān)于我

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

bingoogolapple	bingoogolapple.cn	bingoogolapple@gmail.com	BGA_CODE_CLUB

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。