先列出我所使用的系统、软件和平台:

  • 写文章的环境和工具

操作系统:Windows10
软件:Hugo、Git、Putty、PSCP、VSCode
平台:Gitee

  • 部署和发布文章的系统、软件:

操作系统:Linux (购买的华为云服务器)
软件:Hugo、Git、Nginx

说明:以上列出的系统和软件,是我现有的,不一定是最搭配,建议可以多尝试其他组合。由于国内访问Github不稳定,所以选一个国内替代平台,Gitee是国内目前使用体验还可以的代码托管平台,所以选择Gitee仓库托管文章代码。
下面会介绍如何通过编写Shell脚本,借助Gitee仓库,实现在云服务器中快速发表博客文章。

文章发布流程简介

文章发布流程图 上图简单介绍了文章发布的整个流程,以下为具体方案介绍。

具体解决方案

1. 写文章

由于我的博客系统是使用的Hugo构建的,所以需要在Windows中安装先好Hugo,具体安装和使用建议参考Hugo官方教程

  • 使用各种软件编写markdown文件,比如我使用的VSCode,当然还有很多专业的软件可以选择。
  • 文章写好之后,就可以使用Hugo构建,生成静态文件,在本机先做好测试。
hugo // 构建命令
hugo serve // 运行命令

到此,确认文章写的可以了,继续下一步,将代码提交到Gitee。

2. 提交代码到Gitee

  • 安装和使用版本控制工具Git
    • 为什么需要安装版本控制工具?
      因为,版本控制工具可以跟踪和保留你的代码更改变化,这样带来的最大好处是:你可以很轻易的找到之前的文章和代码版本,避免由于误操作导致很难恢复代码的情况。同时还有很多其他好处,比如方便多人协作等。
    • 选哪个版本控制工具?
      Git
    • 安装和学习教程推荐
      下载和安装可参考Git官方下载地址。入门学习教程可以参考微软官网Git教程
  • 代码上传到代码托管平台
    • 为什么需要上传到代码托管平台呢?
      将自己的本地代码存一份到云上,算是生成一份代码副本,避免丢失。同时及时需要更换换设备写代码,也很方便。
    • 选择使用哪个代码托管平台呢?
      国内建议使用Gitee。如果你不想公开自己的代码,在Gitee中创建私人代码仓库,只有你和指定的成员可以访问,这样保证了自己的信息隐私。
      Gitee的使用教程,可以参考Gitee官方文档介绍。

代码上传建议选择SSH方式,可以减少每次认证的繁琐。需要你先在本机生成SSH公钥,建议参照Gitee SSH公钥教程操作,然后在Gitee平台添加生成的公钥,参考Gitee公钥添加地址建议参考Gitee官方文档,少走弯路

  • SSH客户端
    推荐使用Putty,Putty是一个开源软件,使用起来相对简单易用、轻量,目前完成博客文章发布已经够用,如果需要上传文件到服务器,可以选择。下载移步Putty官网,具体的下载页面:官网下载页面
  • SCP客户端
    什么是SCP客户端?是用于命令行安全文件拷贝的客户端。
    当我们需要从本机上传文件到云服务器时,可以使用SCP客户端实现。推荐的SCP客户端是PSCP,它是Putty提供的可选工具。

如果已经安装Putty,建议先去检查Putty安装目录中是否已经有pscp.exe,如果有,并且Putty也配置完成,可以跳过这一步,开始第3步云服务器软件安装配置

如何下载PSCP?
Putty官网下载页面下载。
怎么安装PSCP?
下载后,将pscp.exe文件放到你想放置的路径,把exe文件所在路径加到系统PATH中,方便在Windows系统任意路径中直接调用pscp命令。以下面命令为例:

set PATH = D:\softwares\putty;%PATH%

详细教程可以参考Putty官方PSCP安装教程,文档英文,如果阅读吃力,可以浏览器翻译网页后阅读。

3. 云服务器软件安装配置

在云服务器上,需要自己安装的软件包括:Git、Nginx、Hugo。

  • Linux服务器Git安装
yum install git

具体可以参考Git官方Linux/Unix安装教程,找到是适合你所使用的云服务器系统的Git安装命令。

  • Linux服务器Nginx安装
    下载和安装可以参考官网安装教程

    注意:如果提示找不到nginx,按照教程设置对应相应的源地址。

    注意:指定的nginx安装目录不要和nginx安装包解压的路径一样,避免不必要的坑。

  • Linux服务器Hugo安装
    建议直接参考Hugo官网详细安装教程。安装方式主要有两种:
    • 使用工具
      在Linux中安装,比如brewapt-get,优点是简单便捷。
    • 下载预编译好文件,解压使用
      如果第一种方法不适用,可以选择自己手动下载Hugo编译好的文件,然后解压使用。从Hugo官网发行包中选择适合自己服务器的文件下载。下载后解压即可,相对也很简单快捷。

    Hugo官网提示:最好把hugo预编译包解压放到你的服务器系统的PATH中,比如/usr/local/bin,好处是方便你后续使用。

4. 云服务器Shell脚本编写

为了避免每次自己把Windows里Hugo生成的博客静态文件传到云服务器的一系列繁琐操作,可以在服务器端写好Shell脚本,只需简单执行一次脚本命令,就可以快速完成服务器拉取代码,构建博客静态文件,并自动重启Nginx等工作。所以很有必要自己写一个简单的Shell脚本。
先明确准备编写的脚本需要完成的基本功能,如下:

1、拉取最新的文章和代码
2、执行hugo命令构建静态文件
3、备份线上正在使用的静态文件
4、替换网站线上文件为最新构建的静态文件
5、重启Nginx

详细代码实现如下:

4.1 拉取最新的文章和代码

cd /usr/local/site-deploy/codes/
git pull git@gitee.com:xxxxx.git
  • 进入准备放代码的文件尖目录下
    这一步很重要,如果掉这个操作,会拉取失败,收到提示:fatal: not a git repository (or any of the parent directories): .git
    其中/usr/local/site-deploy/codes/是我网站用于放博客文件的地址,需要根据实际情况做调整。
  • 从Gitee拉取仓库代码
    其中xxxxx替换为你的仓库对应地址即可。

4.2 执行hugo命令构建静态文件

hugo

执行hugo命令,在上一步拉取到的代码上构建出最新的文件,用于后续部署到nginx中,提供给线上用户访问。

4.3 备份线上正在使用的静态文件

cp -fr /usr/local/nginx/html/dist/*  /usr/local/site-deploy/site-last/

这步可选:这行命令用于备份线上正在使用的静态文件,可以用于后续查看问题以及快速恢复回滚时使用。

路径中的/usr/local/nginx/html/dist/是我自定义的nginx部署访问的文件地址,在html文件夹下创建了dist目录,nginx默认是html。最终所有的可访问静态文件都在dist文件夹下,这一步同样需要按照你的实际情况做改动。
/usr/local/site-deploy/site-last/是我自定义的用于存放线上当前在使用的博客文件版本路径。

4.4 替换网站线上文件为最新构建的静态文件

cp -fr  /usr/local/site-deploy/codes/public/* /usr/local/nginx/html/dist/

public文件夹下的所有文件拷贝到dist文件夹下,把最新代码构建出的博客静态文件覆盖拷贝看到博客网站文件目录下。

4.5 重启Nginx

/usr/local/nginx/sbin/nginx -s reload

完整Shell脚本代码如下:

#!/bin/sh
echo "start deploying..."
echo "cd to /usr/local/site-deploy/codes/"
cd /usr/local/site-deploy/codes/
echo "git pull git@gitee.com:xxxxx.git"
git pull git@gitee.com:xxxxx.git
echo "execute hugo commond"
hugo
echo "copy /usr/local/nginx/html/dist/* to /usr/local/site-deploy/site-last/"
cp -fr /usr/local/nginx/html/dist/*  /usr/local/site-deploy/site-last/
echo "copy /usr/local/site-deploy/codes/public/* to /usr/local/nginx/html/dist/"
cp -fr  /usr/local/site-deploy/codes/public/* /usr/local/nginx/html/dist/
echo "reload nginx"
/usr/local/nginx/sbin/nginx -s reload
echo "done."

以上已经完成部署发布的Shell脚本编写。

5. 建立链接(可选)

ln -s deploy.sh /usr/local/site-deploy/scripts/deploy.sh

在Windows中通过Putty登录云服务器后,为了能更加便捷地执行部署发布Shell脚本/usr/local/site-deploy/scripts/deploy.sh,在登录后的默认目录/root下,创建软链接deploy.sh,相当于是Windows系统中的快捷方式。
到此,核心步骤已经介绍完毕。

总结

文章介绍到的部分软件的安装和使用是比较粗略的,给大家贴了对应优质的官方文档,可以尝试参考。更加详细的介绍,如果有需要,我会考虑新加文章做详细介绍。

如果有问题需要咨询或者交流,可以通过我的联系方式留言。