将`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 maonianyou@foxmail.com

git add -A

git commit -m "%date% %time% auto-deploy"

REM 静默推送的话可在地址里填入username和password,如

REM git remote add origin https://username:password@gitee.com/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 maonianyou@gmail.com

git add -A

git commit -m "%date% %time% auto-deploy"

REM 静默推送的话可在地址里填入username和password,如

REM git remote add origin https://username:password@github.com/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也要了解一下

更多好玩的，赶快来探索吧~