screenshot.jpg
Hugo介绍
Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。
安装Hugo
# Mac安装
$ brew install hugo
# 查看版本
$ hugo version
帮助文档：
# 查看帮助文档
$ hugo help
命令格式:
hugo
hugo [flags]
hugo [command]
hugo [command] [flags]
常用command:
new #为你的站点创建新的内容
server #一个高性能的web服务器
常用flags:
-D, --buildDrafts #包括被标记为draft的文章
-E, --buildExpired #包括已过期的文章
-F, --buildFuture #包括将在未来发布的文章
命令示例:
hugo -D #生成静态文件并包括draft为true的文章
hugo new post/new-content.md #新建一篇文章
hugo new site mysite #新建一个称为mysite的站点
hugo server --buildExpired #启动服务器并包括已过期的文章
创建站点
# 创建一个博客站点
$ hugo new site ~/hugo/shongsheng
# 站点目录结构
$ tree ~/hugo/shongsheng
/Users/sybs/hugo/shongsheng
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
目录说明：
-
archetypes: 储存
.md的模板文件，类似于hexo的scaffolds，该文件夹的优先级高于主题下的/archetypes文件夹 - config.toml: 配置文件
-
content: 储存网站的所有内容，类似于
hexo的source -
data: 储存数据文件供模板调用，类似于
hexo的source/_data -
layouts: 储存
.html模板，该文件夹的优先级高于主题下的/layouts文件夹 -
static: 储存图片,css,js等静态文件，该目录下的文件会直接拷贝到
/public，该文件夹的优先级高于主题下的/static文件夹 - themes: 储存主题
-
public: 执行
hugo命令后，储存生成的静态文件
创建主题
$ cd ~/hugo/shongsheng
$ git clone https://github.com/spf13/hyde.git ./themes/hyde
git clone git@github.com:olOwOlo/hugo-theme-even.git themes/even
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
https://themes.gohugo.io/hugo-theme-easybook/
创建文章
$ cd ~/hugo/shongsheng
# 创建名为first的文章
$ hugo new post/first.md
$ vim ./content/post/first.md
---
title: "First"
date: 2020-03-13T13:57:40+08:00
draft: true
---
- hello
启动站点
# 启动站点
$ hugo server --theme=hyde --buildDrafts
# 浏览器打开
$ open http://localhost:1313
配置Hugo
编辑config.toml站点配置你文件。完整的配置文件可以参考官方文档。
# 主机名 例如: http://spf13.com/
baseURL = "blog.mafool.com"
# 语言编码(中文: zh-CN)
languageCode = "zh-CN"
# 默认的内容语言
defaultContentLanguage = ""
# 自动检测是否包含中文/日文/韩文，该参数会影响摘要和字数统计功能，建议设置为true
hasCJKLanguage = false
# 若为 false，`Getting Started` 这样的英文标签将会被转换为 `getting-started`
preserveTaxonomyNames = true
# 设置使用的主题名称 (默认储存在 /themes/THEMENAME/)
theme = "ananke"
# 分页
paginate = 10
paginatePath = "page"
# 启用 Emoji; see emoji-cheat-sheet.com
enableEmoji = false
# 创建robots.txt，建议设置为true
enableRobotsTXT = false
# 定义文章访问路径，详细见下文"URL管理" See "content-management/urls/"
permalinks = "/blogs"
URL管理
正如前文所言，hugo会将content/目录下的结构反映到生成的静态网站中，但config.toml中的permalinks参数允许你自由更改内容的URL。例如：你想从hexo迁移到hugo，你可以将permalinks定义为下面这种形式以适应之前的URL。
[permalinks]
post = "/:year/:month/:title/"
上面的配置将改变content/post/文件夹下所有文章的URL。
举个栗子，content/post/sample-entry.md的URL将从默认的https://example.com/post/sample-entry/改变为https://example.com/2013/11/sample-entry/。
所有可用的属性如下：
/:monthname/:day/:weekday/:weekdayname/:yearday/:section/:title/:slug/:filename/
内容摘要
Hugo会自动提取文章的前70个字符作为摘要。（注意：该功能在中文环境下需要在config.toml中添加hasCJKLanguage = true才能发挥更好的效果。）
当然你也可以在文章内使用针对文章手动进行摘要提取，在之前出现的内容都会作为摘要使用，且能够保持渲染后的结构而不是纯文字版本。
Shortcodes
Shortcodes帮助你在编写markdown时快捷的插入HTML代码，功能上类似于Hexo的标签插件。
{ {< ref "blog/post.md" >}} => https://example.com/blog/post/
{ {< ref "post.md#tldr" >}} => https://example.com/blog/post/#tldr:caffebad
{ {< relref "post.md" >}} => /blog/post/
{ {< relref "blog/post.md#tldr" >}} => /blog/post/#tldr:caffebad
{ {< ref "#tldr" >}} => #tldr:badcaffe
{ {< relref "#tldr" >}} => #tldr:badcaffe
上述代码通过内置的rel与relref帮助你快速引用站点内的其他文章。
注意: 如果你的 content/ 目录下有多个同名的文件，引用该文章必须使用 blog/post.md 这样的相对路径而不是只提供 post.md 这样的文件名。
hugo还内置了instagram、tweet、youtube等Shortcodes，可以阅读官方文档了解更多信息，你使用的主题可能也会提供Shortcodes，当然你也可以定制你自己的Shortcodes。
分类系统
默认情况下即tags与categories，通常来说这已经足够我们使用了，但你也可以在config.toml文件中添加下面的代码来添加更多的分类。
[taxonomies]
tag = "tags"
category = "categories"
series = "series"
部署Hugo
在GitHub上创建一个名为shongsheng.github.io的 Repository (shongsheng是你的github用户名), 并在根目录执行如下命令，生成最终页面：
$ hugo --theme=hyde --baseUrl="http://coderzh.github.io/"
注意，以上命令并不会生成草稿页面，如果未生成任何文章，请去掉文章头部的 draft=true 再重新生成。）
如果一切顺利，所有静态页面都会生成到 public 目录，将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。
$ cd public
$ git init
$ git remote add origin https://github.com/coderzh/coderzh.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master
参考链接
https://themes.gohugo.io
https://www.gohugo.org/theme hugo主题
https://gohugo.io/getting-started #官方文档
网友评论