本文简单记录一下在使用Hugo过程中,如何给文章添加密码,以及自动化构建和部署的折腾过程。
Hugo在本地调试好了,总得找个静态空间放在网上吧,可以放在vps上用nginx来搞,可是维护太麻烦。据了解,有现成的gitlab pages可以免费使用,结合Gitlab CI
,一站式构建部署。
具体来说,就是在gitlab上fork一下Hugo-demo项目,里面已经自带了gitlab CI配置文件(.gitlab-ci.yml)
,然后在fork得到的仓库中开启gitlab pages,可以替换成自己的域名,还支持https。
按理说,这是最方便的,万事大吉,收工!。
然而,一个严重的问题来了:gitlab pages访问速度太慢,慢得和github pages有一拼,毕竟是免费的东西嘛,于是继续折腾!了解了一下CDN,国内的速度很快,免费空间额度也很大,可惜需要备案,国外的也有很多免费的,比如cloudflare,keyCDN等,速度都不怎么样,体验一般,没什么搞头。
偶然间发现了Vercel(前身是Zeit),Vercel可是一个好东西,它可以免费托管静态网站,空间和流量几乎没有限制,支持从gitlab和github导入项目,还有hexo、Hugo等二十多个静态网站模板, 这都不是重点,重点是速度快,速度上碾压gitlab pages,github pages和cloudflare CDN。据说netilify也不错,不过个人感觉Vercel要稍快一些!
上手vercel很简单,注册vercel账户,导按照页面的提示导入gitlab项目,导入时模板选择Hugo,需要到gitlab那里授权一下。然后配置一下域名,将域名解析到76.76.21.21,就完事了。
这样子,整个流程就变成了这样:
1本地写markdown文章-->提交到gitlab仓库-->触发vercel构建Hugo页面
我们只需要关注写文章了,构建和部署全交给vercel了,当然数据是保存在gitlab仓库上的。
继续折腾,又产生许多新形势新情况新问题!!!一是引入的js、css和图片太多了,严重拖慢站点访问速度,另一个是文章加密问题,由于许多文章中的内容是敏感的,因此需要设置访问密码,对文章加密这个功能是刚需了。
好了,先来解决第一个问题,寻寻觅觅,还真的有完美的解决方案!那就是jsDelivr+Github
,可以在Github上专门创建一个仓库,专门存放站点的静态资源,然后直接使用jsDelivr CDN
就行了,不需要注册和配置什么,只需要把url的域名部分改成jsDelivr就行,相当便捷!同时,利用jsDelivr CDN,想象空间是很大的!
再说第二个问题。加密的工具选项不多,比较好的是staticrypt
和Hugo encryptor
,前者对整个静态页面加密,后者可以对文章的部分内容加密,我使用的是后者。
Hugo encryptor
是用python写的,需要搭建python3(python3.5)环境,可以参考官方说明一步一步来。先创建一个shortcode,然后在需要加密的文章中插入这个shortcode,然后正常地Hugo building,
生成了静态页面之后,再对public目录执行Hugo encryptor命令,加密完成。而使用vercel了的话,构建是在vercel中完成的,需要额外干预才行。具体操作就是,在项目根目录新建package.json和verson.json,前者自定义
Hugo的构建,后者指定Hugo的版本,二者会被vercel自动读取。
package.json:
1{
2"scripts":
3 {
4
5 "build" : "hugo &&git clone https://github.com/bugfix123/hugo_encryptor.git && cd hugo_encryptor && pip install -r requirements.txt && cd .. &&python3 ./hugo_encryptor/hugo-encryptor.py"
6 }
7}
vercel.json:
1{
2 "build": {
3 "env": {
4 "HUGO_VERSION": "0.74.3"
5 }
6 }
7}
到此,给文章添加密码完成。
折腾无止境,9月初看到老薛主机在搞促销,相关虚拟主机空间一年才几十块钱,于是果断尝试一下,当然了,毕竟是香港的机房,速度毋庸置疑了。
虚拟主机空间一般都会提供ftp账号和密码,所以首先想到的是通过ftp传输方式部署站点,就是在vercel上构建完之后,把项目public目录通过ftp发送给老薛主机的虚拟空间。OK,开始折腾ftp发送linux脚本了,本以为是很简单的问题,其实不然。linux的ftp发送主要有ftp命令和lftp命令,前者功能简陋,不支持发送子目录,所以放弃。lftp功能强大,同步数据很方便,但是速度很慢,测试了一下,通过lftp同步完整个站点文件到老薛主机,需要十几分钟,这是绝对不可接受的。接着又查了很多资料,git-ftp,git-lftp-action什么的,还有网上一堆ftp同步脚本,他们的底层几乎都是使用lftp传输,所以传输速度是个瓶颈了,放弃这种方式。
了解到github action
的构建也很方便,和gitlab CI
类似的东东,于是尝试一下。思路如下:在Github创建2个仓库,仓库A存放hugo项目文件,仓库B存放仓库A生成的public目录下的静态站点文件。配置仓库A的Github Action
,构建hugo
并将生成的public目录下的文件提交到仓库B,然后配置仓库B的Webhook URL
,这个URL是请求到虚拟主机空间的,当虚拟主机空间收到仓库B的Webhook请求后,触发git clone
命令,拉取仓库B的最新内容。由于虚拟主机空间一般支持php,所以
可以让这个webhook URL请求虚拟主机空间下的php文件,在这个php文件中调用linux命令。
仓库A的github action配置文件:
1.github/workflows/main.yml
2
3# This is a basic workflow to help you get started with Actions
4
5name: CI
6
7# Controls when the action will run. Triggers the workflow on push or pull request
8# events but only for the master branch
9on:
10 push:
11 branches: [ master ]
12 pull_request:
13 branches: [ master ]
14
15# A workflow run is made up of one or more jobs that can run sequentially or in parallel
16jobs:
17 # This workflow contains a single job called "build"
18 build:
19 # The type of runner that the job will run on
20 runs-on: ubuntu-latest
21
22 # Steps represent a sequence of tasks that will be executed as part of the job
23 steps:
24 # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
25 - uses: actions/checkout@v2
26 # Setup hugo
27 - name: Setup Hugo
28 uses: peaceiris/actions-hugo@v2.2.2
29 with:
30 hugo-version: '0.74.3'
31 extended: true
32 - name: Build
33 run: hugo
34 - name: encrypt
35 run: docker run -v $(pwd):/blog hly0928/hugo_encryptor:latest
36 - name: push to static_me
37 run: chmod +x push.sh&&sh push.sh