使用 Hugo 模板

Hugo 简介

Hugo 是 Go 编写的静态网站生成器，速度快，易用，可配置。Hugo 有一个内容和模板目录，把他们渲染到完全的 HTML 网站。Hugo 依赖于 Markdown 文件，元数据字体。用户可以从任意的目录中运行 Hugo，支持共享主机和其他系统。Hugo 只需要几分之一秒就可以渲染一个经典的中型网站，最好网站的每个部分渲染只需 1 毫秒。

Hugo 非常适合博客，文档等网站的生成。

Hugo 官方文档地址

Hugo 示例项目介绍

程序员电子书目录

Pages 网址：基于 Hugo 的电子图书目录
Pages 项目地址：项目地址

首先，我们需要在终端中通过hugo new site yoursite.com来创建hugo 项目，如下：

# 创建 hugo 项目
$ hugo new site yousite.com
Congratulations! Your new Hugo site is created in ~/hugo/yousite.com.

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.

其次，我们可以根据提示进行下面的步骤，包括配置 Theme，创建内容等。最终我们创建的一个 Hugo 项目会如下结构所示

# hugo 项目的目录结构
yousite.com
|- archetypes
|- config.toml
|- content
|- data
|- layouts
|- resources
|- static

其中：

config.toml为 hugo 的配置文件
content为内容存放目录

通常出情况下，这 2 个将会是我们重点关注的地方，接下来我们以上面提到的实例项目内容为大家进行介绍：

config.toml

baseURL = "http://codechina.gitcode.host/programmer/mdbook"
#baseURL = ""
languageCode = "zh"
title = "程序员电子书"
#theme = "showcase"

# showcase settings
license = "MIT"
licenselink = "https://github.com/apvarun/showcase-hugo-theme/blob/master/LICENSE"
description = "《程序员》· 国内开发者的权威刊物，程序员电子书分享"
tags = [ ]
features = ["responsive", "portfolio", "gallery"]
min_version = "0.41.0"

[Params]
hideAutoMenu = false
Author = "CODE CHINA"
Homepage = "https://codechina.csdn.net/programmer/mdbook"
Message = "程序员电子书书单"

[Social]
wechat = "CSDN CODE"%

baseURL 为 Pages 项目在 Pages 服务器上的存放目录，地址格式为 <namespace>.gitcode.host/<subgroup-name>/<your-repo>
- 这里由于项目是子组织的项目，因此在项目前方需要添加上子组织的路径
title 是 Pages 项目的 Title
theme 是 Pages 项目使用的 theme，更多的 theme 可以参考 https://themes.gohugo.io/

Content 格式

通常，content 的内容格式存放在 archetypes/default.md中，这个项目的 default.md 内容如下：

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
subtitle:
link:
image:
---

在添加内容的时候按照上方的 MD 格式添加即可。

项目预览

你可以随时在终端中通过运行 hugo serve -D 来预览项目：

yousite.com git:(master) $ hugo serve -D
Start building sites …
WARN 2020/10/13 11:17:33 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/10/13 11:17:33 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/10/13 11:17:33 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/10/13 11:17:33 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

                   | EN
-------------------+-----
  Pages            | 27
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 23
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Built in 162 ms
Watching for changes in /Users/xxm/Documents/gitlab/hugo/openday.com/{archetypes,content,data,layouts,static}
Watching for config changes in /Users/xxm/Documents/gitlab/hugo/openday.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/openday/ (bind address 127.0.0.1)
Press Ctrl+C to stop

GitCode / 帮助文档

hugo