一键提交代码，实现自动化更新和部署个人博客！
大家好，我是小义，之前在介绍搭建个人博客网站的时候说过可以基于github部署博客，甚至是搭建图床，但终归是不安全，一不小心被攻击还有可能使自己账号被封。
所以后续就慢慢把网站搬到腾讯云服务器上去了，静态框架用vuepress代替了docsify，图片也存放在了阿里的OSS中。
vuePress
相比起docsify，vuepress具有以下优点：
1、生成的是预渲染的静态HTML，这对于搜索引擎优化（SEO）非常友好。
2、允许在Markdown文件中直接使用Vue组件，在创建复杂的文档和布局上灵活性更高。
感兴趣的同学可以查阅vuepress官网:https://theme-hope.vuejs.press/zh/
宝塔面板
网站搬迁之后问题也随之而来，之前在github上通过pages是可以轻松实现一键提交代码自动化部署的。
现在就稍微麻烦了些，在网上查找了资料后发现，只需要利用宝塔面板和git配置，同样可以实现在本地的vuepress项目git push提交代码后，自动更新部署博客网站，下面进入正题。
宝塔面板是一款强大的服务器管理软件，具备可视化操作界面，能够极大地简化服务器的配置与管理过程。大家在选择服务器的时候可以直接选择腾讯云轻量级应用服务器中的宝塔linux面板这一应用模板，也可以在服务器上通过命令自行安装。
在宝塔面板中新建网站时，Nginx就会作为默认的Web服务器（建站过程这里不过多介绍）。同时因为要拉取最新代码和打包，所以还需要在服务器上安装git、npm等工具。
WebHook
为实现自动化，在宝塔面板的软件商店搜索WebHook进行安装，它能够在代码仓库发生变动时自动部署更新服务。
点击设置，在WebHook中添加下面的代码部署脚本。
# 部署脚本
#!/bin/bash
echo ""
#输出当前时间
date --date='0 days ago' "+%Y-%m-%d %H:%M:%S"
echo "Start"
#git分支名称
branch="master"
#git项目存放路径(注意开放文件权限)
gitPath="/home/gitee/doc"
#git仓库地址
gitHttp="https://gitee.com/xxx.git"
echo "Web站点路径：$gitPath"
#判断项目路径是否存在
if [ -d "$gitPath" ]; then
cd $gitPath
#判断是否存在.git目录
if [ ! -d ".git" ]; then
echo "在该目录下克隆 git"
sudo git clone $gitHttp gittemp
sudo mv gittemp/.git ./
sudo rm -rf gittemp
fi
echo "拉取最新的项目文件"
git remote add origin $gitHttp
git branch --set-upstream-to=origin/$branch $branch
sudo git reset --hard origin/$branch
sudo git pull $gitHttp 2>&1
echo "设置目录权限"
sudo chown -R www:www $gitPath
sudo chmod -R 755 $gitPath
echo "代码拉取结束"
echo "安装依赖中......"
sudo cnpm install
if [ $? -eq 0 ]; then
echo "等待打包中......"
sudo cnpm run docs:build
fi
if [ $? -eq 0 ]; then
echo "等待压缩中......"
cd /home/gitee/doc/src/.vuepress/
sudo zip -r dist.zip dist/ && sudo unzip -o dist.zip -d /www/wwwroot/
sudo cp -a /www/wwwroot/dist/. /www/wwwroot/cxy
echo "成功了"
fi
else
echo "docs:build 执行失败"
fi
exit
else
echo "该项目路径不存在"
echo "新建项目目录"
exit
fi
其中/www/wwwroot/cxy即为建站时的静态资源存放路径。有时候脚本执行报错，最好是一步步进行验证，小义碰到的大多是文件权限问题。
Gitee仓库配置
1.在服务器上生成 SSH 公共密钥，然后添加到gitee该项目的公钥管理中。
# 生成 SSH 密钥, 一路回车
ssh-keygen -t rsa
# 查看 SSH 公钥
cat ~/.ssh/id_rsa.pub
2.WebHook中添加宝塔WebHook的URL和密钥。
最后
完成以上所有配置，就可以轻松实现一键提交代码自动部署了，赶紧动手试一试吧。
腾讯云开发者
