使用 Hugo 模板
Hugo 简介
Hugo 是 Go 编写的静态网站生成器,速度快,易用,可配置。Hugo 有一个内容和模板目录,把他们渲染到完全的 HTML 网站。Hugo 依赖于 Markdown 文件,元数据字体 。用户可以从任意的目录中运行 Hugo,支持共享主机和其他系统。Hugo 只需要几分之一秒就可以渲染一个经典的中型网站,最好网站的每个部分渲染只需 1 毫秒。
Hugo 非常适合博客,文档等等网站的生成。
Hugo 示例项目介绍
程序员电子书目录
- Pages 网址:基于 Hugo 的电子图书目录
- Pages 项目地址: 项目地址
首先,我们需要在终端中通过hugo new site yoursite.com
来创建hugo 项目,如下:
# 创建 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