踩坑俠：VuePress 1.0.1(基於GitHub Pages快速搭建我的博客)

先上圖，踩坑俠半日搭建的VuePress的demo：

前言：

1. 我此次主要分享的是VuePress + GitHub（基於GitPages）來快速搭建我的博客。
2. 相信看到這篇教程的絕大多數同窗，都是跟着官網作，而後遇到問題了。
3. 本次教程長話短說，VuePress利弊與項目的基本結構，沒有看過官網的同窗建議先看一下官網。（VuePress官網）

正文

VuePress支持兩種部署方式：部署到gitHub 和 部署到我的的服務器上 本次做者想要快速成型，因此採用的是第一種。

第一步

在本身的github建立一個VuePress項目，這裏爲了簡便，做者就起名字叫vue-press了。它負責建立項目和平常的更新博客。
複製代碼

而後將項目克隆本地。按照官網的步驟，開始安裝項目現有項目安裝VuePress

若是項目與遠端關聯出現了問題。請看個人這篇教程GitHub與本地項目關聯

第二步

此時有幾個地方須要注意，是你們基本上都會踩的坑，此處能夠避免你們時間的浪費：

若是下文中有沒有講清楚的地方，建議你們結合個人GitHub項目看--->傳送門

1. .vuepress/config.js中的引用的圖片加載不出來。（tips：要放在指定的publice目錄下）

   

2. base問題：若是你打算用https://<倉庫名>.github.io/來訪問的話，base能夠省略不寫
   若是，你打算用https://<倉庫名>.github.io/<項目名>/ 來訪問的話，應該寫成base：/<項目名>/
3. 關於根目錄下的README.md指的是docs目錄爲根目錄。（tips:想作vuepress首頁的配置是在這裏）

   

4. 關於actionLink的配置：/guide/ 你們結合上張截圖與本張截圖來參考 （tips：guide文件夾要有本身的README.md）

   

第三步

1. 在gitHub上建立第二個項目（方式同第一步），⚠️注意️：這裏的項目名稱是固定的 <username>.github.io(tips: 用gitPages服務器必需要這麼寫呢)

2. 這個項目的做用是負責展現。個人第一個項目是vue-press負責平常的更新，更新完畢之後就會提交到這個項目上。 你們應該知道deploy.sh這個文件。這個文件的做用就是，能夠用快捷命令將 vue-press項目直接部署到 924950698.github.io項目上。它的文件內容以下：

3. 這裏有一點須要注意：就是git push -f git@github.com:924950698/924950698.github.io.git master，這裏做者是採用直接訪問.github.io方式的。因此我用第一種。將註釋的換成本身的github用戶名，而後解開註釋就能夠了。

4. 記得在package.json中配置命令： "deploy": "bash deploy.sh" 這樣就能夠在命令行中直接npm run deploy來提交項目的變動了。（tips：若是push失敗，檢查本身的Github項目.github.io有沒有在seeting中配置密鑰，或者去看我上面分享的博客）

5. 此時項目中應該有一次commit的記錄了。這步須要作的是在settings中開通gitPages

開通成功之後應該像上面截圖同樣，出現一個訪問地址，這個地址就是你的博客地址。 做者從昨天晚上開始研究vuePress，今天中午作出了一個基本的demo，供你們參考一下： 924950698.github.io/

總結： 若是以爲對你有幫助，請給做者一點小小的鼓勵， 點個贊或者 收藏吧。 有須要溝通的請聯繫我： 微信（ wx9456d郵箱（ allan_liu986@163.com ）