將VuePress建立的博客部署到GitHub或Gitee上

在上一篇中，我們詳細介紹了如何利用VuePress搭建起個人博客系統，但這只是在本地debug啟動的，接下來，我們把它部署到Github網站。

• 在config.js中配置base

    base: '/v-blog/',
  

  v-blog是我Github上的倉庫名

• 編寫自動化腳本

  在根目錄/v-blog/下我們需要編寫兩個腳本

  因為寫在一個腳本里話編譯完會直接退出，
  所以把編譯的命令單獨放在另外一個腳本文件里調就可以了

  • build.bat

    @echo off
    vuepress build docs
    

  • deploy.bat

    @echo off
    
    echo building...
    call build.bat
    echo building-complete.
    
    cd docs/.vuepress/dist
    git init
    git add -A
    git commit -m 'auto-deploy'
    git remote add origin https://github.com/CoderMonkie/v-blog.git
    git pull
    git push --force origin HEAD:gh-pages
    
    REM To delete the dist folder
    cd ..
    echo delete-directory: "%cd%/dist"
    rmdir /s /q "%cd%/dist"
    cd..
    cd..
    echo Auto-Deploy-Complete!
    pause
    

  然后，只要雙擊執行depploy.bat就可以。
  或者配置到package.json的scripts中。

  "scripts": {
    "deploy": "deploy.bat"
  }
  

  npm run deploy
  

  編譯完成提及到遠程的時候，會提示輸入用戶名密碼。
  (或者保存登錄權限信息使其靜默推送)

• GitHub中本項目的setting下確認

  我們在push時設為推送到gh-pages分支，
  此時，v-blog -- setting下的GitHub Pages設置，
  應該為gh-pages選中狀態，不是的話改為gh-pages

  這樣就完成了。如果GitHub Pages設置頁顯示：

  Your site is published at https://codermonkie.github.io/v-blog/
  

  那么說明網站發布了，可以查看。

  Your site is ready to be published at https://codermonkie.github.io/v-blog/.
  

  那么說明GitHub還沒有完成給你發布，訪問的話會是404，等待吧。

---

(深夜)更新：已經好了v-blog
在GitHub Pages/source的下拉框里切換了幾次，不經意間發現已經發布了。

---

補充：

補兩張圖，看起來能更簡明，直截了當。

• GitHub

  在【Setting -- GitHub Pages】的Source的下拉框中選擇要使用的分支
  （也可以branch/docs文件夾，不過我們VuePress生成的博客嘛直接用分支了）
  

• Gitee

  在【服務 -- Gitee Pages】點【啟動】
  

  更新網站的話靜態文件推送后要點【更新】
  

---

如果是要將博客部署到Gitee：

除了我們可以同時提交到兩個遠程（GitHub和Gitee倉庫），
關聯多個遠程倉庫，實現一次push多站提交
也可以在同一個工程文件里實現兩個遠程倉庫的部署。

將上面給出的腳本deploy.bat，另存一份deploy-gitee.bat,
修改一下，主要有兩處：

• 遠程地址（github -> gitee 的地址）
• 提交到的遠程分支名（gh-pages -> v-blog-pages）

@echo off

echo building...
call build.bat
echo building-complete.

cd docs/.vuepress/dist
git init
git remote add origin https://gitee.com/coder-monkey/v-blog.git
git add -A
git commit -m 'auto-deploy'
git pull
git push --force origin HEAD:v-blog-pages

REM To delete the dist folder
cd ..
echo delete-directory: "%cd%/dist"
rmdir /s /q "%cd%/dist"
cd..
cd..
echo Auto-Deploy-Complete!
pause

package.json里加scripts一個命令

"scripts": {
  "deploy-gitee": "deploy-gitee.bat"
}

雙擊執行deploy-gitee.bat或以下：

npm run deploy-gitee

再稍微動動手腳本稍作修改就可以實現一次命令多個遠程部署了~

---

auto-deploy.bat最終版：

@echo off

echo building...
call build.bat
echo building-complete.

cd docs/.vuepress/dist

git init
git config user.name maonianyou
git config user.email [e-mail]
git add -A
git commit -m "%date% %time% auto-deploy"
REM 靜默推送的話可在地址里填入username和password,如
REM git remote add origin https://username:[e-mail]/username/repo.git
git remote add origin https://gitee.com/coder-monkey/v-blog.git
git pull
git push --force origin HEAD:v-blog-pages
echo "Gitee Pages Deploy Complete!"

REM 部署完上面的 Gitee Pages
REM 需要刪除 .git 文件夾
REM 以備部署 GitHub Pages 再次初始化時用
rmdir /s /q "%cd%/.git"

git init
git config user.name maonianyou
git config user.email [e-mail]
git add -A
git commit -m "%date% %time% auto-deploy"
REM 靜默推送的話可在地址里填入username和password,如
REM git remote add origin https://username:[e-mail]/username/repo.git
git remote add origin https://github.com/CoderMonkie/v-blog.git
git pull
git push --force origin HEAD:gh-pages
echo "GitHub Pages Deploy Complete!"

REM To delete the dist folder
cd ..
echo delete-directory: "%cd%/dist"
rmdir /s /q "%cd%/dist"
cd..
cd..
echo Auto-Deploy-Complete!
pause

  "scripts: {
    "deploy": "auto-deploy.bat"
  }

npm run deploy

---

還能繼續改進？

• package.json/scripts
  加一條，執行git push和auto-deploy.bat
  這樣推送加部署就一口氣完成啦

• 使用netlify或者travis-ci這樣的工具
  GitHub的WebHook也要了解一下

更多好玩的，趕快來探索吧~