使用Hugo搭建静态博客

2020-04-04 本文已影响0人 hollson

经过一番折腾，自己的博客总算上线了，也顺便做了个的程序员博客主题

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 #官方文档