# A2. GitHub 上部署VuePress
- 在GitHub上创建一个仓库，命名为"username.github.io"，其中"username"为你的GitHub用户名。
- 将VuePress生成的静态文件上传到该仓库中:
cd .vuepress/dist
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:username/username.github.io.git master
1
2
3
4
5
2
3
4
5
- 在仓库的Settings页面中，找到GitHub Pages选项，并将Source设置为"master branch"。
- 等待一段时间后，即可在"https://username.github.io/"访问到你的网站。
本网站访问地址：
- XJTU：http://astd.xjtu.edu.cn:8012 (opens new window)
- Github：https://xjtucai.github.io/ (opens new window)
# 自动化部署
上述部署成功后，每当修改内容，都要执行其中的第2步。比较麻烦，可以通过脚本文件提高效率。
# 1.创建脚本文件 deploy.sh
在项目根目录下，创建如下deploy.sh文件：
#!/usr/bin/env sh
# 脚本执行有问题时，给出错误信息
set -e
# 预备Sidebar目录信息sidebarConfig.js（optional)
cd /home/userID/vuepress-starter/docs
node generateSidebar.js
# 生成网站文件
yarn docs:build
# 进入当地网站文件夹，每个人的路径可能不同
cd /home/userID/vuepress-starter/docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
cd -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 2.执行脚本文件 deploy.sh
在 package.json 中添加 scripts 命令 deploy。
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"deploy": "bash deploy.sh"
}
1
2
3
4
5
2
3
4
5
每次增加/修改网站内容后，只需执行此上述新加的 scripts 命令:
$ yarn deploy
1
便可完成网站的自动化远程部署。