在当前目录下执行创建站点命令, 即可生成一个 blog 目录, 内部会有一份 hugo 的完整目录结构.
$ hugo new site blog
Congratulations! Your new Hugo site is created in F:\blog\blog.
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.
我们进入到 blog 目录内, 可以看到一份完整的目录结构如下:
├─archetypes
├─content
├─data
├─layouts
├─static
└─themes
一篇博客的文章, 可以通过命令创建带有目录层级的 Markdown 源文件:
# 不带有目录层级的博文
$ hugo new instruction.md
# 带有目录层级的博文
$ hugo new kaifariji/guide.md
这个时候去 blog/content/ 目录下, 可以看到 instruction.md 文件和 /kaifariji/guide.md 文件, 编辑其内容可以看到内部的结构如下:
---
title: "Instruction"
date: 2020-04-21T09:36:15 08:00
draft: true
---
上半部分是这篇博客的配置部分, 分别代表:
字段含义title博客标题date创建的时间draft是否是草稿状态
这里需要注意下, draft: true 的时候代表博客处于草稿状态, 那么 hugo 在生成或者使用的时候, 不会去渲染这篇文章. 我们可以通过手动将 draft 设置成 false 来修改这个 draft 状态: draft: false
下半部分是这篇博客的内容部分, 支持 Markdown 语法. 具体的内容就可以由各位来发挥想象了.
可以从官网主题列表里挑选一个自己喜欢的主题, 也可以去别的地方搜索适合的主题.
官方主题列表: https://themes.gohugo.io/
这里我选择一个非常清爽的 hyde 主题
https://github.com/spf13/hyde
主题的安装很方便, 可以通过 git 命令直接 clone 也可以下载主题包放入 themes 目录内.
$ git clone https://github.com/spf13/hyde.git themes/hyde
主题下载到 themes 目录后可以有两种方式预览:
$ hugo server --theme hyde
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hyde"
在有了基础的博客内容后, 就可以来预览整个站点了.
$ hugo server
还可以像刚刚主题环节指出的, 可以指定主题预览:
$ hugo server --theme hyde
hugo 会告诉你编译站点成功, 并提示你请用 http://localhost:1313/ 来访问您的博客, Ctrl C 来暂停预览.
Building sites …
| EN
------------------- -----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 6
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Built in 20 ms
Watching for changes in F:\blog\blog\{archetypes,content,data,layouts,static,themes}
Watching for config changes in F:\blog\blog\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/ (bind address 127.0.0.1)
Press Ctrl C to stop
这里最重要的配置是 baseURL, 需要修改成你自己的域名, 这样在替换静态资源链接的时候, 保证可以正常访问的到.
编辑 /config.toml 配置文件:
baseURL = "https://www.kaifariji.com/"
languageCode = "zh-cn"
title = "开发日记"
theme = "hyde"
执行 hugo 命令, 就是生成全站静态文件:
$ hugo
这样就会在项目根目录下创建一个 /public 目录, 内部就是你需要发布的整个站, 之后你使用 github 也好, 或者发布到自己的私有云服务器上也好, 都可以了.
Hugo 系统默认自带 Tags 标签, 所以我们可以很方便的在写博客的时候就带入
---
title: "Guide"
date: 2020-04-21T09:36:47 08:00
draft: false
tags: ["hugo", "guide"]
---
## Hugo 进阶教程
#### Tags 标签系统
欢迎大家订阅"开发日记"系列文章.
像这样在文章中带入 tags 标签, 即可在预览和生成的静态页面中使用 /tags 分类了.
分类查看地址: http://localhost:1313/tags/
具体某项标签: http://localhost:1313/tags/hugo/
在列表中会列出所有包含有 hugo 标签的文章, 方便大家查看.
Hugo 除了可以使用系统自带的 Tags 标签, 还可以自定义一套类似的系统, 可以实现自定义分类列表功能, 方便大家可以写某些系列文章.
修改 config.toml 配置文件如下:
baseURL = "https://www.kaifariji.com/"
languageCode = "zh-cn"
title = "开发日记"
theme = "hyde"
[taxonomies]
hugoseries = "hugo-series"
tag = "tags"
这里定义了两个分类 hugo-series 和 tags, 这里需要注意一点: 当使用 taxonomies 配置后, 系统自带的 tags 失效, 需要自己手动指定!
按照刚刚的配置后, 可以在文章中使用, 如下:
---
title: "Instruction"
date: 2020-04-21T09:36:15 08:00
draft: false
tags: ["hugo", "instruction"]
hugo-series: ["custom-tags"]
---
## Hugo 自定义 Tags 标签系统
### 配置自定义分类系统
大家可以在开发日记中查看相关的 hugo 有关 tags 的配置教程.
如此, 大家既可以在实现如下效果:
自定义的 hugo 分类: http://localhost:1313/hugo-series/
保留原有 tags 分类: http://localhost:1313/tags/
至此关于 hugo 的基础教程就完了, 如果大家还喜欢开发日记会继续完善有关 Hugo 的其他进阶教程给大家参考.
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved
