55.使用Hugo快速建站

安装Hugo

不使用数据库存放文章数据,每一篇文章都是一个markdown文件.
hugo可以server运行,也可以编译成静态的html页面,让Nginx运行解析.因为是纯静态页渲染,性能超强......
到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件,解压到/usr/local/bin/

这样就可以直接使用 hugo 命令了

创建站点

1
2
3
4


#hugo new site /path/to/site

#例如本站的创建
hugo new site /data/hugo/jiagou.com

这样就在 /path/to/site 目录里生成了初始站点,进去目录:

1

cd /data/hugo/jiagou.com

站点目录结构:

1
2
3
4
5
6
7


  ▸ archetypes/
  ▸ content/  --存放markdown文件,文章内容
  ▸ data/  
  ▸ layouts/  
  ▸ static/   --静态资源根目录(/),文章内的图片,附件等静态资源
  ▸ themes/   --存放网站主题
  config.toml --网站的核心配置文件

下载主题,放到 themes 目录下,本站是使用了even主题
hugo所有的主题
 even主题

创建页面

1
2


#创建 about 页面
hugo new about.md

about.md 自动生成到了 content/about.md ,打开 about.md 看下:

1
2
3
4
5
6
7
8
9


---
date = "2015-10-25T08:36:54-07:00"  --时间
draft = true --是否是草稿
title = "about" --标题

---

正文内容

内容是 Markdown 格式的,--- 之间的内容是YAML 格式的,根据你的喜好,你可以换成 TOML 格式(使用 +++ 标记)或者 JSON 格式.

可以在 archetypes/default.md 中定义默认模板,例如本站的默认模板内容是

1
2
3
4
5
6
7
8


---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
tags: ["web"]
categories: ["web"]
author: "springrain"
---

创建第一篇文章,放到 post 目录,其他文章页都尽量放到post目录,方便之后生成聚合页面.

1

hugo new post/first.md

server运行(本站未使用)

1
2


# hugo server 默认是1313端口
hugo server -p 80 -b http://39.98.249.100/  --bind "0.0.0.0"

server方式运行,hugo就是web服务器了,负责响应http请求,解析markdown文件

静态运行(本站使用)

每次发布都需要进入到站点目录,运行hugo命令

1
2
3
4
5


#进入到站点目录
cd /data/hugo/jiagou.com

#编译markdown文件为html,放到站点的public目录,本站是/data/hugo/jiagou.com/public
hugo

安装nginx

本站主要Nginx配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


 ### HTTPS server ###
    server { 
        ### 代替 ssl on###
        listen 443 ssl; 
        server_name www.jiagou.com;

        ### SSL 设置 开始 ####
        ### 1.15版本之后,使用 listen 443 ssl 代替###
        ###ssl                 on; 
    
        ssl_certificate /usr/local/nginx/ssl/www.jiagou.com/4468359_www.jiagou.com.pem;  
        ssl_certificate_key /usr/local/nginx/ssl/www.jiagou.com/4468359_www.jiagou.com.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #使用此加密套件.
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #使用该协议进行配置.
        ssl_prefer_server_ciphers on;

        location / {
            root   /data/hugo/jiagou.com/public;
            index  index.html index.htm;
        }

    }

配置

本站 config.yoml中的主要配置

 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


baseURL = "http://39.98.249.100:80/"
languageCode = "zh-cn"
defaultContentLanguage = "zh-cn"                             # en / zh-cn / ... (This field determines which i18n file to use)
title = "架构"
preserveTaxonomyNames = true
enableRobotsTXT = true
enableEmoji = true
theme = "even"
enableGitInfo = false # use git commit log to generate lastmod record # 可根据 Git 中的提交生成最近更新记录.

# Syntax highlighting by Chroma. NOTE: Don't enable `highlightInClient` and `chroma` at the same time!
pygmentsOptions = "linenos=table"
pygmentsCodefences = true
pygmentsUseClasses = true
pygmentsCodefencesGuessSyntax = true

hasCJKLanguage = true     # has chinese/japanese/korean ? # 自动检测是否包含 中文\日文\韩文
paginate = 10                                              # 首页每页显示的文章数
disqusShortname = ""      # disqus_shortname
googleAnalytics = ""      # UA-XXXXXXXX-X
copyright = "jiagou.com 版权所有 <a href='https://beian.miit.gov.cn' target='_blank'>豫ICP备2020026846号-1</a>   <a href='http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41010302002680'  target='_blank'><img src='/gongan.png'>豫公网安备41010302002680号</a>"            # default: author.name ↓        # 默认为下面配置的author.name ↓

[taxonomies]  
  category = "categories"
  tag = "tags"
  #web ="web"

[author]                  # essential                     # 必需
  name = "jiagou.com"

[sitemap]                 # essential                     # 必需
  changefreq = "weekly"
  priority = 0.5
  filename = "sitemap.xml"

[[menu.main]]             # config your menu              # 配置目录
  name = "Home"
  weight = 10
  identifier = "home"
  url = "/"
[[menu.main]]
  name = "CloudNative"
  weight = 20
  identifier = "cloudnative"
  url = "/categories/cloudnative/"
[[menu.main]]
  name = "BigData"
  weight = 30
  identifier = "bigdata"
  url = "/categories/bigdata/"
[[menu.main]]
  name = "Web"
  weight = 40
  identifier = "web"
  url = "/categories/web/"

even主题修改

我主要是修改了even主题的底部文件模板footer.html
路径是 themes/even/layouts/partials/footer.html

本站文章例子

本站about.md的完整内容如下:

 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


---
title: "About"
date: 2017-08-20T21:38:52+08:00
lastmod: 2017-08-28T21:41:52+08:00
menu: "main"
weight: 50

---

本站使用1核CPU,512M内存,20G硬盘的阿里云服务器.  
使用hugo和even模板,编译成静态文件,Nginx作为WEB服务器.  




我所见识过的一切都将消失一空,就如眼泪消逝在雨中......  
不妨大胆一些,大胆一些......  





小项目:  
* [springrain](https://gitee.com/chunanyong/springrain)
* [javadoc4openapi-maven-plugin](https://gitee.com/chunanyong/javadoc4openapi-maven-plugin)
* [zorm](https://gitee.com/chunanyong/zorm)
* [gowe](https://gitee.com/chunanyong/gowe)

文章目录