怎麼把使用vuepress搭建的博客部署到Github Pages

推薦在這裏閱讀效果更佳

背景

網上搜了不少教程，包括官網的教程,可是仍是費了一番功夫，

若是你使用自動化部署腳本部署不成功的話，能夠參考個人這個笨方法

這是部署後的效果

前提

我假設你本地運行OK, 已經準備好要部署了

第一步

你的 vuepress 項目是否已經在github上的倉庫下

若是是，請跳到第二步

若是不是，想在GitHub新建一個倉庫，如圖所示：

## 小坑
倉庫名字要和config.js 裏 的 base 屬性值同樣

好比你的倉庫名字叫myBlog
base就是/myBlog/

1.1

建立好倉庫之後，

git clone <你複製的地址>
把你的vuepress項目除了node_modules文件夾以外的文件所有複製到git clone下來的文件夾內

而後npm install 或者 yarn

在項目根目錄新建文件.gitignore

讓git 忽略 node_module下的全部文件和打包之後dist下的全部文件

1.2

1. npm run docs:dev 打包/打包後的文件在docs/.vuepress/dist文件夾下
2. git add -A
3. git commit -m 'init'
4. git push

第二步

新切一個gh-pages(名字隨意)分支並切換到該分支，執行

git checkout -b gh-pages

該分支用來存打包後的文件

1. 先刪除 除了.git文件夾 ， node_module文件夾 ， docs文件夾， .gitignore以外的文件
2. 再把docs/.vuepress/dist文件夾下的全部文件剪切到根目錄
3. 再刪除docs文件夾
4. git add -A
5. git commit -m 'deploy'
6. git push

第三步

此時github上你應該能夠看到你的分支

點擊settings ,而後往下拉，找到 GitHub Pages

在Source的下拉選中你的分支 出現 Your site is published at 網址 就說明發布成功了，訪問這個網址就能夠看到你的博客啦