目录

高质量LoveIt主题+静态Hugo平台+Nginx自动发布+腾讯免费TLS证书的部署教程

1. 安装hugo

hugo:负责将markdown转换为静态文件; nginx:作为web服务器

访问如下地址:https://github.com/gohugoio/hugo/releases

选择合适版本

image-20210515184623354

安装到/usr/local/bin/hugo

验证

1
2
[root@alibabaesc hugo]# hugo version
hugo v0.83.1-5AFE0A57 linux/amd64 BuildDate=2021-05-02T14:38:05Z VendorInfo=gohugoio

2. 建立主目录

后续我们的目录将在这个目录中建立。

注意后续我们的nginx的根目录是指向在这个目录下的public目录下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
[root@alibabaesc hugo]# hugo new site mysitedir
Congratulations! Your new Hugo site is created in /hugo/mysitedir.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

3. 安装主题

这里主题采用精美的Loveit

具体地址为:https://github.com/dillonzq/LoveIt.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
[root@alibabaesc ~]# cd /hugo/mysitedir
# 验证
[root@alibabaesc mysitedir]# pwd
/hugo/mysitedir

# 采用git安装
[root@alibabaesc mysitedir]# git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
Cloning into 'themes/LoveIt'...
remote: Enumerating objects: 9952, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 9952 (delta 0), reused 0 (delta 0), pack-reused 9951
Receiving objects: 100% (9952/9952), 36.96 MiB | 11.46 MiB/s, done.
Resolving deltas: 100% (4950/4950), done.
Checking connectivity... done.

验证主题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
[root@alibabaesc mysitedir]# ll themes/LoveIt/
total 268
drwxr-xr-x 2 root root   4096 May 15 18:51 archetypes
drwxr-xr-x 7 root root   4096 May 15 18:51 assets
drwxr-xr-x 5 root root   4096 May 15 18:51 exampleSite
drwxr-xr-x 2 root root   4096 May 15 18:51 i18n
drwxr-xr-x 2 root root   4096 May 15 18:51 images
drwxr-xr-x 7 root root   4096 May 15 18:51 layouts
-rw-r--r-- 1 root root   1113 May 15 18:51 LICENSE
-rw-r--r-- 1 root root   1758 May 15 18:51 package.json
-rw-r--r-- 1 root root 198637 May 15 18:51 package-lock.json
-rw-r--r-- 1 root root   9021 May 15 18:51 README.md
-rw-r--r-- 1 root root   8846 May 15 18:51 README.zh-cn.md
drwxr-xr-x 3 root root   4096 May 15 18:51 resources
drwxr-xr-x 4 root root   4096 May 15 18:51 src
drwxr-xr-x 3 root root   4096 May 15 18:51 static
-rw-r--r-- 1 root root    731 May 15 18:51 theme.toml

4. 配置网站配置【很重要】

LoveIt

1
2
[root@alibabaesc mysitedir]# cp themes/LoveIt/exampleSite/config.toml .
cp: overwrite ‘./config.toml’? y

开始配置config.toml

注意修改主题目录(注释掉),修改其中的网站title。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
baseURL = "https://www.ethanzhang.xyz/"
# [en, zh-cn, fr, pl, ...] determines default content language
# [en, zh-cn, fr, pl, ...] 设置默认的语言
defaultContentLanguage = "zh-cn"
# theme
# 主题
theme = "LoveIt"
# themes directory
# 主题目录
#themesDir = "../.."

# website title
# 网站标题
title = "张先生的深夜课堂"

# whether to use robots.txt
# 是否使用 robots.txt
enableRobotsTXT = true
# whether to use git commit log
# 是否使用 git 信息
enableGitInfo = false
# whether to use emoji code
# 是否使用 emoji 代码
enableEmoji = true

修改语言,只保留中文

1
2
3
[languages]

  [languages.zh-cn]

将标题的关于和Github图标删除。

https://typorabyethancheung911.oss-cn-shanghai.aliyuncs.com/typora/image-20210515194831521.png

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
      # [[languages.z
      #   identifier 
      #   pre = ""   
      #   post = ""  
      #   name = "关于"
      #   url = "/abo
      #   title = "" 
      #   weight = 5 
      # [[languages.z
      #   identifier 
      #   pre = "<i c
      #   post = ""  
      #   name = ""  
      #   url = "http
      #   title = "Gi
      #   weight = 6 

修改网站描述

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
 [languages.zh-cn.params]
      # 网站描述
      description = "张先生的个人博客"
      # 网站关键词
      keywords = ["Linux", "云原生","Golang"]
      # 应用图标配置
      [languages.zh-cn.params.app]
        # 当添加到 iOS 主屏幕或者 Android 启动器时的标题, 覆盖默认标题
        title = "张先生的深夜课堂"
        # 是否隐藏网站图标资源链接
        noFavicon = false
        # 更现代的 SVG 网站图标, 可替代旧的 .png 和 .ico 文件
        svgFavicon = ""
        # Android 浏览器主题色
        themeColor = "#ffffff"
        # Safari 图标颜色
        iconColor = "#5bbad5"
        # Windows v8-10 磁贴颜色
        tileColor = "#da532c"

修改个性化

https://typorabyethancheung911.oss-cn-shanghai.aliyuncs.com/typora/image-20210515195154743.png

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
      [languages.zh-cn.params.home]
        # RSS 文章数目
        rss = 10
        # 主页个人信息
        [languages.zh-cn.params.home.profile]
          enable = true
          # Gravatar 邮箱,用于优先在主页显示的头像
          gravatarEmail = ""
          # 主页显示头像的 URL
          avatarURL = "/images/avatar.png"
          # 主页显示的网站标题 (支持 HTML 格式)
          title = ""
          # 主页显示的网站副标题
          subtitle = "Linux 云技术 编程"
          # 是否为副标题显示打字机动画
          typeit = true
          # 是否显示社交账号
          social = false
          # 免责声明 (支持 HTML 格式)
          disclaimer = ""

底部相关信息

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[params.footer]
    enable = true
    # Custom content (HTML format is supported)
    # 自定义内容 (支持 HTML 格式)
    custom = ''
    # whether to show Hugo and theme info
    # 是否显示 Hugo 和主题信息
    hugo = false
    # whether to show copyright info
    # 是否显示版权信息
    copyright = true
    # whether to show the author
    # 是否显示作者
    author = true
    # site creation time
    # 网站创立年份
    since = 2020
    # ICP info only in China (HTML format is supported)
    # ICP 备案信息,仅在中国使用 (支持 HTML 格式)
    icp = "沪ICP备 17000653号-2"
    # license info (HTML format is supported)
    # 许可协议信息 (支持 HTML 格式)
    license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'

网站内部搜索配置

1
2
3
4
5
6
7
# 搜索配置
      [languages.zh-cn.params.search]
        enable = true
        # 搜索引擎的类型 ("lunr", "algolia")
        type = "algolia"
        # 文章内容最长索引长度
        contentLength = 4000

以下是两种搜索引擎的对比:

  • lunr: 简单, 无需同步 index.json, 没有 contentLength 的限制, 但占用带宽大且性能低 (特别是中文需要一个较大的分词依赖库)

  • algolia: 高性能并且占用带宽低, 但需要同步 index.json 且有 contentLength 的限制

    文章内容被 h2h3 HTML 标签切分来提高查询效果并且基本实现全文搜索. contentLength 用来限制 h2h3 HTML 标签开头的内容部分的最大长度.

其他相关配置说明详见:https://hugoloveit.com/zh-cn/theme-documentation-basics/

5. 通过Nginx+Hugo自动发布

注意,站点如果不部署,是不会产生public目录的。

实际上,采用Hugo对外提供web服务,至少有2个问题

1、不支持TLS。

2、Web服务的性能肯定不如nginx等专业选手。

前面所述,通过hugo serve可以在本地启动Hugo服务,用于对外提供web服务。

hugo会生成一个 public 目录, 其中包含你网站的所有静态内容和资源。 因此可以采用Nginx,将root目录配置在Hugo的public目录下,即可实现自动发布。

5.1 申请TLS证书

如果采用TLS的443端口访问,又会遇到谷歌浏览器的灵魂提示。

对于一个洁癖之人,需要解决数字证书问题。通过腾讯免费申请一个个人使用的TLS证书。这里相关流程省略,直接上结果截图。

https://typorabyethancheung911.oss-cn-shanghai.aliyuncs.com/typora/image-20201206212340933.png

我的域名解析是在阿里巴巴上的,因此根据DNS验证要求,增加了_dnsauth记录。

https://typorabyethancheung911.oss-cn-shanghai.aliyuncs.com/typora/image-20201206212302746.png

解析成功后,可以下载证书

https://typorabyethancheung911.oss-cn-shanghai.aliyuncs.com/typora/image-20201206212913459.png

5.2 部署Nginx

Nginx相对简单这里安装和部署相关步骤略去。

直接上配置。

先验证Nginx是否安装成功

1
2
3
[root@ethan ethanstie]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

修改Nginx配置

1
[root@ethan ethanstie]# vim /etc/nginx/nginx.conf

1、将腾讯网站下载下来的TLS证书中Nginx文件下的两个文件名,修改为cert.pemcert.key并拷贝至/etc/nginx/目录下。

2、修改nginx.conf配置,修改80端口重定向,增加https配置内容。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# http服务重定向
http {
    server {
        listen       80;
        server_name  www.ethanzhang.xyz;
        # 这里是重定向
        return 301 https://www.ethanzhang.xyz;

        charset UTF-8;
        error_log /usr/local/djangotest/ngixerror.log;

        location / {
            root   /hugo/mysitedir/public;
            index  index.html index.htm;


# 添加https内容
server {
        listen       443 ssl;
        server_name  www.ethanzhang.xyz;

        ssl_certificate      cert.pem;
        ssl_certificate_key  cert.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
        location / {
            root   /hugo/mysitedir/public;
            index  index.html index.htm;
        }
    }

3、启动

1
2
3
4
# 直接启动
nginx
# 开机自动
systemctl enable nginx

访问网站,查看证书状态【我申请证书是偶,采用了ECC椭圆算法加密】

关于TLS证书有关文章,请查看我的微信公众号的另外一篇文章。

image-20201206220024674

5.3 个人网站备案

访问上海互联网安全综合服务网进行网站的备案。

备案通过后,将ICP备案号添加至Hugo的全局网站配置中。相关配置详见【4. 配置网站配置】

5.4 自动发布

前面说过了,静态博客要实现自动编译功能,要点在于通过hugo -w参数自动监测目录,自动编译静态文件。

这里我们通过sftp将前面那篇文章删除,然后再直接通过hugo直接重新编译静态文件后,再次打开已通过Nginx部署的网站,当前文章已删除。

同理,我们上传的文章,一样可以实现自动发布。具体详见相关信息。

编辑脚本start.sh,添加命令。

1
hugo --environment=production -w

后台执行

1
2
3
[root@ethan ethanstie]# nohup ./start.sh 2>&1 &
[1] 20612
[root@ethan ethanstie]# nohup: ignoring input and appending output to ‘nohup.out’

【验证】

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
[root@ethan ethanstie]# tail nohup.out 
  Cleaned          |  0 |     0 |  0  

Watching for changes in /hugo/mysitedir/ethanstie/{archetypes,assets,content,data,layouts,static,themes}
Press Ctrl+C to stop
Watching for config changes in /hugo/mysitedir/ethanstie/config.toml

Change detected, rebuilding site.
2020-12-07 12:42:37.417 +0800
Source changed "/hugo/mysitedir/ethanstie/content/posts/高质量LoveIt主题+静态Hugo平台+Nginx自动发布+腾讯免费TLS证书的部署教程.md": WRITE
Total in 392 ms

【维护,停止hugo自动编译】

1
2
3
4
[root@ethan ~]# ps -ef | grep hugo
root     20613 20612  0 12:42 ?        00:00:02 hugo --environment=production -w

[root@alibabaesc mysitedir]# kill -9 20613

至此,静态博客平台搭建完成,后续只需要集中精力更新站点目录下contenet/posts目录,维护文章即可。