Vuepress自动部署-使用githook实现
wudi 4/8/2021 VueVuepress
Vuepress 是一个生成静态网站的驱动组件，我们能用它很方便的编写文档或者个人博客。今天我们就来探索一下怎么实现自动部署。
前置条件
- 自己的云服务器
- 安装了 nginx
- 安装了 git
# 1.服务器配置SSH key
sudo adduser git
su git
cd
mkdir .ssh && chmod 700 .ssh
touch .ssh/authorized_keys && chmod 600 .ssh/authorized_keys
1
2
3
4
5
2
3
4
5
配置好以后，我们就相当于使用 git 用户来进行操作了。
在~/.ssh/authorized_keys里，我们放入本地的公钥。
获取公钥的方法可以是：
1、打开git bash
2、执行生成公钥和私钥的命令: ssh-keygen -t rsa
3、在用户目录下的.ssh 文件夹中，会有公钥和私钥，将公钥复制到服务器的authorized_keys文件中。
这样做的目的就是，以后由本地向服务器提交资源，就不需要再进行身份验证了。
# 2.创建仓库与目录
# 2.1 创建仓库
找一个地方创建 git 仓库，比如在/home/git下创建blog.git文件夹，作为 git 仓库:
mkdir /home/git
cd /home/git
mkdir blog.git
cd blog.git
git init --bare
1
2
3
4
5
2
3
4
5
# 2.2 创建临时目录
mkdir /home/tmp
mkdir /home/tmp/blog
1
2
2
# 2.3 给 git 用户操作目录权限
sudo chown git:git -R /var/www
sudo chown git:git -R /home/tmp
1
2
2
# 3.配置 hooks
进入创建的 git 仓库，然后修改post-update.sample文件，并将其改名为post-update
cd /home/git/blog.git/hooks
mv post-update.sample post-update
vi post-update
1
2
3
2
3
将其修改为如下脚本：
#!/bin/sh
#
# An example hook script to prepare a packed repository for use over
# dumb transports.
#
# To enable this hook, rename this file to "post-update".
#exec git update-server-info
echo "Im update"
# 代码仓库目录
GIT_REPO=/home/git/blog.git
# 临时目录
TMP_GIT_CLONE=/home/tmp/blog
# Nginx的root目录
PUBLIC_WWW=/var/www/html
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
mv -t ${PUBLIC_WWW} ${TMP_GIT_CLONE}/*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 4.创建自动部署脚本
# 4.1 创建自动部署脚本
在 vuepress 项目根目录创建deploy.sh来运行自动部署命令
# /deploy.sh
# docs/.vuepress/dist 为项目打包后的目录
rm -rf docs/.vuepress/dist
yarn build
cd docs/.vuepress/dist
git init
git add .
git commit -m "deploy"
# xx.xx.xx.xx为云服务器地址
git push -f --set-upstream git@xx.xx.xx.xx:/home/git/blog.git master
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 4.2 在 package.json 中配置自动打包部署的命令
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"deploy": "sh ./deploy.sh"
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 4.3 运行自动打包部署命令
# 在vuepress项目跟目录运行
npm run deploy
# 或者
yarn deploy
1
2
3
4
2
3
4