折腾hugo

Jun 9, 2019 · 2 min read · hugo

Overview

阿里云的服务器过期，费用不菲，暂不续，迁到github page。以前用hexo，觉得不错，静态网页，完全控制页面功能不简单，速度块。之前用阿里云，因为用Laravel写博客页面功能容易掌控。既然是信息类网站，类似hexo或hugo这种直接基于markdown文件配合主题根据配置生成静态页面的工具完全能够胜任一些基本的展示工作。为什么选hugo而不是hexo？一是因为hugo采用Go实现，执行常规的命令例如创建页面，构建网站等速度上稍微快一些。并且，支持Go。二是因为实在不想看到hexo下载的一堆依赖。前端深似海，入行需谨慎。

小试牛刀

hugo的文档挺多，方方面面，跟着文档走靠谱。但可能不想通读文档，遇到需要的功能点直接搜，以下是我用到的功能点和相关文档。

直接使用hugo构建网站，设置draft: true的文章不会被构建，使用-D --buildDrafts参数，参考。
文章的front matter默认使用yaml格式（hugo版本v0.55.6/extended），参考front matter。
自定义摘要，在front matter中定义summary: this is summary of your article
定义文章标签，在front matter中定义，例如：
```
1tags:
2  - go
3  - php
```
在列表也显示与标题对应的图片，在front matter中定义，例如：
```
1featured_image: /images/default.png
```
图片default.png放在static/images/目录，/images/default.png这种用法也可以在文章中使用。
在config.toml中设置网站语言，例如defaultContentLanguage: zh。渲染文章内容的主题（目前使用ananke）模板是layouts/_default/single.html，显示右侧“目录”和“相关内容”的html如下：
```
1<aside class="w-30-l mt6-l">
2    {{- partial "menu-contextual.html" . -}}
3</aside>
```
在menu-contextual.html中使用如下的调用来显示"相关文章"四字。
```
1{{ i18n "related"}}
```
而related的定义在i18n/zh.toml中，例如：
```
1[related]
2other = "相关文章"
```
定一个目录的简要描述，可定义例如posts/_index.md文件，内容如下：
```
1---
2  title: "文章"
3  description: "想写就写的"
4  featured_image: ''
5---
```
参考主题ananke的exampleSite。

在config.toml中定义favicon的链接：

1[params]
2  favicon = "https://avatars0.githubusercontent.com/u/14950473?s=40&v=4"

在模板layouts/partials/site-favicon.html中使用：

1<link rel="shortcut icon" href="{{ .Site.Params.favicon }}" type="image/x-icon" />

在config.toml中定义menu，参考文档:

 1[menu]
 2  [[menu.main]]
 3    identifier = "about"
 4    name = "关于"
 5    pre = "<i class='fa fa-heart'></i>"
 6    url = "/about/"
 7  [[menu.main]]
 8    identifier = "Tags"
 9    name = "标签"
10    post = "<span class='alert'>New!</span>"
11    pre = "<i class='fa fa-road'></i>"
12    url = "/tags/"

在模板中使用：

 1{{ if .Site.Menus.main }}
 2  <ul class="pl0 mr3">
 3    {{ range .Site.Menus.main }}
 4    <li class="list f5 f4-ns fw4 dib pr3">
 5      <a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ .Name }} page">
 6        {{ .Name }}
 7      </a>
 8    </li>
 9    {{ end }}
10  </ul>
11{{ end }}

在首页标题下添加时间

找到文件

1layouts/index.html -> summary-with-image.html

summary-with-image.html文件是带图片和概要的文章列表，在显示标题的代码段添加显示日期的代码，如下：

1<h1 class="f3 fw1 athelas mt0 lh-title">
2  <a href="{{.URL}}" class="color-inherit dim link">
3    {{ .Title }}
4    </a>
5</h1>
6<h4>{{ .Date.Format "January 2, 2006" }}</h4>
7<div class="f6 f5-l lh-copy nested-copy-line-height nested-links">
8  {{ .Summary }}
9</div>

文章中嵌入图片

例如![](/images/room_msg_lifetime.png)，则默认图片的存放路径是static/images/room_msg_lifetime.png
如果public文件夹为空

hugo --verbose

部署

DNS设置CNAME域名映射，新建一个github项目，例如kongoole.github.io，clone到hugo项目中的文件夹public。

1git clone https://github.com/kongoole/kongoole.github.io public

部署到github参考文档。