一键提交代码,实现自动化更新和安排个人博客!
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">大众</span>好,</span><span style="color: black;">我是小义,之前在介绍搭建个人博客网站的时候说过<span style="color: black;">能够</span>基于github<span style="color: black;">安排</span>博客,<span style="color: black;">乃至</span>是搭建图床,但终归是不安全,一不小心被攻击还有可能使自己账号被封。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span>后续就慢慢把网站搬到腾讯云服务器上去了,静态框架用vuepress代替了docsify,<span style="color: black;">照片</span><span style="color: black;">亦</span>存放在了阿里的OSS中。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">vuePress</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">相比起docsify,vuepress<span style="color: black;">拥有</span>以下优点:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、生成的是预渲染的静态HTML,这<span style="color: black;">针对</span>搜索引擎优化(SEO)非常友好。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、<span style="color: black;">准许</span>在Markdown文件中直接<span style="color: black;">运用</span>Vue组件,在创建<span style="color: black;">繁杂</span>的文档和布局上灵活性更高。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">感兴趣的<span style="color: black;">朋友</span><span style="color: black;">能够</span>查阅vuepress官网:https://theme-hope.vuejs.press/zh/</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">宝塔面板</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">网站<span style="color: black;">搬家</span>之后问题<span style="color: black;">亦</span>随之而来,之前在github上<span style="color: black;">经过</span>pages是<span style="color: black;">能够</span><span style="color: black;">容易</span>实现一键提交代码自动化<span style="color: black;">安排</span>的。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">此刻</span>就稍微麻烦了些,在网上<span style="color: black;">查询</span>了资料后<span style="color: black;">发掘</span>,只需要<span style="color: black;">利用宝塔面板和git配置,<span style="color: black;">一样</span><span style="color: black;">能够</span>实<span style="color: black;">此刻</span>本地的vuepress项目git push提交代码后,自动更新<span style="color: black;">安排</span>博客网站,下面进入正题。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">宝塔面板是一款强大的服务器管理软件,具备可视化操作界面,能够<span style="color: black;">极重</span>地简化服务器的配置与管理过程。<span style="color: black;">大众</span>在<span style="color: black;">选取</span>服务器的时候<span style="color: black;">能够</span>直接<span style="color: black;">选取</span>腾讯云轻量级应用服务器中的宝塔linux面板这一应用模板,<span style="color: black;">亦</span><span style="color: black;">能够</span>在服务器上<span style="color: black;">经过</span>命令<span style="color: black;">自动</span>安装。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在宝塔面板中新建网站时,Nginx就会<span style="color: black;">做为</span>默认的Web服务器(建站过程<span style="color: black;">这儿</span>不<span style="color: black;">太多</span>介绍)。<span style="color: black;">同期</span><span style="color: black;">由于</span>要拉取最新代码和打包,<span style="color: black;">因此</span>还需要在服务器上安装git、npm等工具。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">WebHook</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为实现自动化,在宝塔面板的软件商店搜索WebHook进行安装,它能够在代码仓库<span style="color: black;">出现</span>变动时自动<span style="color: black;">安排</span>更新服务。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/Z39MZpFQTY2LwKS7uNaRT5hl0WytY1KpibpZWkNg2af4H9qOz3eW8p2hY31x4N96DiaoLwpDnzbPf2JL0oyCsr0Q/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">点击设置,在WebHook中添加下面的代码<span style="color: black;">安排</span>脚本。</p><span style="color: black;"># <span style="color: black;">安排</span>脚本</span><span style="color: black;">#!/bin/bash</span><span style="color: black;">echo</span> <span style="color: black;">""</span><span style="color: black;">#输出当前时间</span>date --date=<span style="color: black;">0 days ago</span> <span style="color: black;">"+%Y-%m-%d %H:%M:%S"</span><span style="color: black;">echo</span> <span style="color: black;">"Start"</span><span style="color: black;">#git分支名<span style="color: black;">叫作</span></span>branch=<span style="color: black;">"master"</span><span style="color: black;">#git项目存放路径(<span style="color: black;">重视</span>开放文件权限)</span>gitPath=<span style="color: black;">"/home/gitee/doc"</span><span style="color: black;">#git仓库<span style="color: black;">位置</span></span>gitHttp=<span style="color: black;">"https://gitee.com/xxx.git"</span><span style="color: black;">echo</span> <span style="color: black;">"Web站点路径:<span style="color: black;">$gitPath</span>"</span><span style="color: black;">#判断项目路径<span style="color: black;">是不是</span>存在</span><span style="color: black;">if</span> [ -d <span style="color: black;">"<span style="color: black;">$gitPath</span>"</span> ]; <span style="color: black;">then</span><span style="color: black;">cd</span> <span style="color: black;">$gitPath</span><span style="color: black;">#判断<span style="color: black;">是不是</span>存在.git目录</span><span style="color: black;">if</span> [ ! -d <span style="color: black;">".git"</span> ]; <span style="color: black;">then</span><span style="color: black;">echo</span> <span style="color: black;">"在该目录下克隆 git"</span>sudo git <span style="color: black;">clone</span> <span style="color: black;">$gitHttp</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> gittemp</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">sudo mv gittemp/.git ./</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">sudo rm -rf gittemp</p><span style="color: black;">fi</span><span style="color: black;">echo</span> <span style="color: black;">"拉取最新的项目文件"</span>git remote add origin <span style="color: black;">$gitHttp</span>git branch --<span style="color: black;">set</span>-upstream-to=origin/<span style="color: black;">$branch</span> <span style="color: black;">$branch</span>sudo git reset --hard origin/<span style="color: black;">$branch</span>sudo git pull <span style="color: black;">$gitHttp</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2>&1</p><span style="color: black;">echo</span> <span style="color: black;">"设置目录权限"</span>sudo chown -R www:www <span style="color: black;">$gitPath</span>sudo chmod -R 755 <span style="color: black;">$gitPath</span><span style="color: black;">echo</span> <span style="color: black;">"代码拉取结束"</span><span style="color: black;">echo</span> <span style="color: black;">"安装依赖中......"</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">sudo cnpm install</p><span style="color: black;">if</span> [ $? -eq 0 ]; <span style="color: black;">then</span> <span style="color: black;">echo</span> <span style="color: black;">"等待打包中......"</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> sudo cnpm run docs:build</p><span style="color: black;">fi</span><span style="color: black;">if</span> [ $? -eq 0 ]; <span style="color: black;">then</span> <span style="color: black;">echo</span> <span style="color: black;">"等待压缩中......"</span> <span style="color: black;">cd</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">/home/gitee/doc/src/.vuepress/</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> sudo zip -r dist.zip dist/ && sudo unzip -o dist.zip -d /www/wwwroot/</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> sudo cp -a /www/wwwroot/dist/. /www/wwwroot/cxy</p> <span style="color: black;">echo</span> <span style="color: black;">"成功了"</span><span style="color: black;">fi</span><span style="color: black;">else</span> <span style="color: black;">echo</span> <span style="color: black;">"docs:build 执行失败"</span><span style="color: black;">fi</span><span style="color: black;">exit</span><span style="color: black;">else</span><span style="color: black;">echo</span> <span style="color: black;">"该项目路径不存在"</span><span style="color: black;">echo</span> <span style="color: black;">"新建项目目录"</span><span style="color: black;">exit</span><span style="color: black;">fi</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其中/www/wwwroot/cxy即为建站时的静态资源存放路径。有时候脚本执行报错,最好是一步步进行验证,小义碰到的大<span style="color: black;">大都是</span>文件权限问题。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">Gitee仓库配置</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.在服务器上生成 SSH 公共密钥,然后添加到gitee该项目的公钥管理中。</p><span style="color: black;"># 生成 SSH 密钥, 一路回车</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ssh-keygen -t rsa</p><span style="color: black;"># 查看 SSH 公钥</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">cat ~/.ssh/id_rsa.pub</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.WebHook中添加宝塔WebHook的URL和密钥。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/Z39MZpFQTY2LwKS7uNaRT5hl0WytY1Kpyibt8alYUMIHvjOqQW78sCDjvoNl2SwvIialWmC2ibqkofkIZ3jvgwSTg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">最后</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">完成以上所有配置,就<span style="color: black;">能够</span><span style="color: black;">容易</span>实现一键提交代码自动<span style="color: black;">安排</span>了,赶紧动手试一试吧。</p>
外贸B2B平台有哪些? 你的言辞如同繁星闪烁,点亮了我心中的夜空。 网站建设seio论坛http://www.fok120.com/ 哈哈、笑死我了、太搞笑了吧等。
页:
[1]