title: 55.使用Hugo快速建站  
CreateTime: 2020-09-12 00:00:00  
UpdateTime: 2020-09-12 00:00:00  
CategoryName: web  
---

---
title: "55.使用Hugo快速建站"
date: 2020-09-12T00:00:00+08:00
draft: false
tags: ["hugo"]
categories: ["web"]
author: "springrain"
---

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

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

## 创建站点

```shell
#hugo new site /path/to/site

#例如本站的创建
hugo new site /data/hugo/jiagou.com
```
这样就在 ```/path/to/site``` 目录里生成了初始站点,进去目录:
```shell
cd /data/hugo/jiagou.com
```
站点目录结构:
```
  ▸ archetypes/
  ▸ content/  --存放markdown文件,文章内容
  ▸ data/  
  ▸ layouts/  
  ▸ static/   --静态资源根目录(/),文章内的图片,附件等静态资源
  ▸ themes/   --存放网站主题
  config.toml --网站的核心配置文件
```

下载主题,放到 ```themes``` 目录下,本站是使用了even主题  
[hugo所有的主题](https://themes.gohugo.io/)  
[even主题](https://github.com/olOwOlo/hugo-theme-even)

## 创建页面
```shell
#创建 about 页面
hugo new about.md
```
```about.md``` 自动生成到了 ```content/about.md``` ,打开 ```about.md``` 看下:

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

---

正文内容

```
内容是 ```Markdown``` 格式的,```---``` 之间的内容是[YAML](http://www.yaml.org/) 格式的,根据你的喜好,你可以换成  [TOML](https://github.com/toml-lang/toml) 格式(使用 +++ 标记)或者 JSON 格式.

可以在 ```archetypes/default.md``` 中定义默认模板,例如本站的默认模板内容是
```
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
tags: ["web"]
categories: ["web"]
author: "springrain"
---
```  
创建第一篇文章,放到 ```post``` 目录,其他文章页都尽量放到```post```目录,方便之后生成聚合页面.
```shell
hugo new post/first.md
```
## server运行(本站未使用)
```shell
# hugo server 默认是1313端口
hugo server -p 80 -b http://39.98.249.100/  --bind "0.0.0.0"
```
```server```方式运行,hugo就是web服务器了,负责响应http请求,解析markdown文件

## 静态运行(本站使用)

<font color="red"> 每次发布都需要进入到站点目录,运行```hugo```命令</font>  
```shell
#进入到站点目录
cd /data/hugo/jiagou.com

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

[安装nginx](/public/post/01-nginx-config/)

本站主要Nginx配置
```
 ### 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```中的主要配置
```
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](/public/about)的完整内容如下:
```
---
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)

```