|
|
|
# 使用 Hugo 模板
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Hugo 简介
|
|
|
|
|
|
|
|
[](/docs/img/pages-hugo.png)
|
|
|
|
|
|
|
|
Hugo 是 Go 编写的静态网站生成器，速度快，易用，可配置。Hugo 有一个内容和模板目录，把他们渲染到完全的 HTML 网站。Hugo 依赖于 Markdown 文件，元数据字体 。用户可以从任意的目录中运行 Hugo，支持共享主机和其他系统。Hugo 只需要几分之一秒就可以渲染一个经典的中型网站，最好网站的每个部分渲染只需 1 毫秒。
|
|
|
|
|
|
|
|
Hugo 非常适合博客，文档等等网站的生成。
|
|
|
|
|
|
|
|
[Hugo 官方文档地址](https://gohugo.io/documentation/)
|
|
|
|
|
|
|
|
## Hugo 示例项目介绍
|
|
|
|
|
|
|
|
### 程序员电子书目录
|
|
|
|
|
|
|
|
- Pages 网址：[基于 Hugo 的电子图书目录](https://codechina.gitcode.host/programmer/mdbook/)
|
|
|
|
- Pages 项目地址： [项目地址](https://codechina.csdn.net/codechina/programmer/mdbook/-/tree/pages)
|
|
|
|
|
|
|
|
首先，我们需要在终端中通过`hugo new site yoursite.com`来创建hugo 项目，如下：
|
|
|
|
|
|
|
|
```bash
|
|
|
|
# 创建 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 项目会如下结构所示
|
|
|
|
|
|
|
|
```bash
|
|
|
|
# hugo 项目的目录结构
|
|
|
|
yousite.com
|
|
|
|
|- archetypes
|
|
|
|
|- config.toml
|
|
|
|
|- content
|
|
|
|
|- data
|
|
|
|
|- layouts
|
|
|
|
|- resources
|
|
|
|
|- static
|
|
|
|
```
|
|
|
|
|
|
|
|
其中：
|
|
|
|
|
|
|
|
- `config.toml`为 hugo 的配置文件
|
|
|
|
- `content`为内容存放目录
|
|
|
|
|
|
|
|
通常出情况下，这 2 个将会是我们重点关注的地方，接下来我们以上面提到的实例项目内容为大家进行介绍：
|
|
|
|
|
|
|
|
### config.toml
|
|
|
|
|
|
|
|
```bash
|
|
|
|
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 内容如下：
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
---
|
|
|
|
title: "{{ replace .Name "-" " " | title }}"
|
|
|
|
date: {{ .Date }}
|
|
|
|
subtitle:
|
|
|
|
link:
|
|
|
|
image:
|
|
|
|
---
|
|
|
|
```
|
|
|
|
|
|
|
|
在添加内容的时候按照上方的 MD 格式添加即可。
|
|
|
|
|
|
|
|
### 项目预览
|
|
|
|
|
|
|
|
你可以随时在终端中通过运行 `hugo serve -D` 来预览项目：
|
|
|
|
|
|
|
|
```bash
|
|
|
|
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
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
