创建一个hugo项目
我们先用命令行创建一个基础的hugo项目
1
2
| hugo new site site_example
cd site_example
|
目录结构注释
使用tree命令可以清晰的看到hugo核心的目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| tree ../site_example/
../site_example/
├── archetypes
│ └── default.md 命令行基于此模版创建文章
├── config.toml 主要配置
├── content Markdown默认存储目录
├── data
├── layouts
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes 主题默认存储目录
|
创建一篇文章
我们先尝试写一篇文章，hugo默认是以md(Markdown)作为内容载体，所以hugo支持通过命令行创建md。接下来我试试hugo内置的创建命令。
1
2
| hugo new hello.md
xxx/site_example/content/hello.md created
|
命令行自动创建的md文件是基于 archetypes/default.md 生成的，内容如下
1
2
3
4
5
| ---
title: "Hello"
date: 2020-03-29T20:42:29+08:00
draft: true
---
|
当draft设置为ture,hugo默认将不会显示该md中的内容。让我们试着修改一下内容。
1
2
3
4
5
| ---
title: "Hello"
date: 2020-03-29T20:42:29+08:00
---
hello world
|
启动web server
hugo是基于golang开发的，所以我们可以很轻易的启动内置的web server.
1
2
3
| hugo server
...
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
|
此时我们虽然可以访问 http://localhost:1313/ ，但因为该hugo项目缺少主题的缘故，所以看不到任何内容。别着急，接下来就让我们一起从零开始创建主题，把hello world展示出来。
新建一个主题
执行如下命令新建一个主题，theme_example为本示例的主题名称，可以自行更名。
1
| hugo new theme theme_example
|
记得在 site_example/config.toml 配置文件中指定的主题名称
1
| theme = "theme_example"
|
主题结构注释
我们可以大概了解一下命令行创建的基础主题结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| tree themes/
themes 主题默认存储目录
└── theme_example 通过命令行创建的主题
├── archetypes
│ └── default.md
├── layouts 主题模版目录
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html 基础模版
│ │ ├── list.html 列表模版
│ │ └── single.html 详情页模版
│ ├── index.html 首页模版
│ └── partials
│ ├── footer.html 页脚模版
│ ├── header.html 页眉模版
│ └── head.html head模版
├── LICENSE
├── static 资源存储路径
│ ├── css
│ └── js
└── theme.toml 主题配置
|
展示列表
打开连接 http://localhost:1313/ 访问的是首页，所以我们需要修改一下主题的入口模版文件 themes/theme_example/layouts/index.html,添加如下内容后刷新浏览器就能看到标题为 Hello 的文章了。
1
2
3
4
5
6
7
8
9
10
| {{- define "main" -}}
<ul>
{{ $paginator := .Paginate (.Site.RegularPages) }}
{{ range $paginator.Pages }}
<li>
<a href="{{.Permalink}}">{{.Title}}</a>
</li>
{{ end }}
</ul>
{{- end -}}
|
展示内容
现在点击文章链接会404，接下来我们编辑详情页模版 themes/theme_example/layouts/_default/single.html
再次刷新浏览器，就能看到 hello world 了。
现在我们对hugo的主题有了一定的了解，下一篇我们将介绍其他功能。
查看本文最终代码
示例代码下载
