决定重建博客,选择哪个组合就提上了日程。

大致把自己需求理了下:

  • 快速 生成够快,不要生成个几分钟。
  • 简单 最好还是依托于 github。
  • 灵活 主题多一点,方便自己修改。

主要还是 WordPress,Hexo, Jekyll,Hugo。关于静态生成器可以参考这个网站:Staticgen

托管到 VPS 还是 github page,我果断选了 github,不过后面了解到还有 Netlify 这种服务。(forestry.io 也是比较类似的CMS管理系统,甚至好像更友好,admin 后台也帮你搭好了)。

这里稍微说几句 Netlify,Netlify建站会跟一个对应的 github repo 挂钩。之后会根据这个repo里的生产分支(比如 Master)里的内容自动部署建站上线,可以绑定自己的域名,并自动帮你开启 HTTPS。然后 repo 里其他分支对Master 发起 Pull Request,Netlify 会自动生产一个 deploy Preview,这个时候你可以再次检查实际上线的效果,确认 OK 后,再 Merge,感觉非常好。如果是直接 Push 到 Master,就会直接自动更新,而且速度还不错。

最后我选择了 Hugo + Netlify的选择,其实 foresty也蛮好的,不过网上好像还是 Netlify 用的人更多点,就选了 Netlify。

Start_with_Hugo_开工

Theme_主题

​这里把主题放在最前面,是因为 Hugo 的主题其实还挺难选的……合心意的比较少,可以去官网的Theme列表找找,这里我推荐几个我大浪淘沙的。

  1. Even 就是本博客目前采用的,感觉也是 Hugo 个人博客的首选,github 上的 Star 也算比较多的。
  2. Hermit 整体色调偏灰色,也属于简洁款,本来考虑过这款,蛮不错的
  3. Introduction 也是简洁方向的一个,设计师还有个作品 Sam

给大家个建议,可以在 Github上直接搜 hugo-theme,找找有木有心仪的。

安装 Hugo

可参考 Hugo 官方的 QuickStart

macOS

1
brew install hugo

验证安装是否成功

1
hugo version

建立新站点(quickstart)

1
hugo new quickstart

添加一个主题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
# 进入你的站点文件夹
cd quickstart

# git 初始化
git init

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
# Note for non-git users:
#   - If you do not have git installed, you can download the archive of the latest
#     version of this theme from:
#       https://github.com/budparr/gohugo-theme-ananke/archive/master.zip
#   - Extract that .zip file to get a "gohugo-theme-ananke-master" directory.
#   - Rename that directory to "ananke", and move it into the "themes/" directory.
# End of note for non-git users.

# Edit your config.toml configuration file
# and add the Ananke theme.
# 其实就是修改 config.toml文件里的设置,将theme字段设为你的主题
echo 'theme = "ananke"' >> config.toml

添加第一篇博客

1
hugo new post/helloword.md

MD文件在你的 content/post/ 目录下,对其进行修改。这里的 post 不同主题可能定位不同。

本地启动

1
hugo server -D

现在你可以在浏览器访问 http://localhost:1313 来浏览你的 quickstart 站点了。

Hugo基本使用

new 和 server 稍微带一下。详情请参考官方文档:Basic Usage

hugo server 在终端运行时,会实时监测你的站点文件夹的变化,会实时反映在浏览器里,非常方便。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
使用方法:
  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       启动服务器并包括已过期的文章

以下内容主要同主题 even 相关,使用其他主题可以参考。

配置 Hugo config.toml文件

config.toml文件位于根目录,主要影响你的站点的一些设置。

注意!不同主题的 config.toml文件配置不同,详见各主题使用说明。一般都可以直接复制修改现成的。

关于Front Matter

1
2
3
4
5
6
7
8
9
---
title: "文章标题"
description: "文章的描述信息"
tags: [ "标签1", "标签2", "标签3" ]
categories: [ "分类1", "分类2" ]
keywords: [ "Hugo", "keyword" ]
date: 2012-12-12
lastmod: 2018-08-08
---

Hugo 中的路径分解

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
                    section

                    ⊢--^--⊣

                               url

                    ⊢-------------^------------⊣

      baseURL             path        slug

⊢--------^--------⊣ ⊢------^------⊣⊢----^------⊣

                  permalink

⊢----------------------^-----------------------⊣

https://example.com/events/chicago/lollapalooza/

URL管理

默认的 URL 是 site/post/sample/,可以根据实际需求修改。

1
2
3
[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/

所有可用的属性如下:

1
/:monthname/:day/:weekday/:weekdayname/:yearday/:section/:title/:slug/:filename/

内容摘要

Hugo会自动提取文章的前70个字符作为摘要。(注意:该功能在中文环境下需要在config.toml中添加hasCJKLanguage = true才能发挥更好的效果。)

当然你也可以在文章内使用<!--more-->针对文章手动进行摘要提取,在<!--more-->之前出现的内容都会作为摘要使用,且能够保持渲染后的结构而不是纯文字版本。

图片引用

注意在文件根目录下存在

1
2
3
4
5
▸ archetypes/
    ▸ content/
    ▸ layouts/
    ▸ static/
    config.toml

其中img文件夹,放在 static 文件夹下。 博文引用图片的相对地址为:/img/testblog/test.jpg

其他及引用

强烈建议阅读:上文部分节选自olOwOlo(Even 主题作者)的 Hugo 从入门到会用

其他请参阅官方文档:Hugo官方文档

Boost_Netlify 托管相关

托管相关 Hugo 官方文档

Github

  1. 建立你的对应Github Repo(比如 Hugo_Blog)
  2. 将 Hugo 相关的本地仓库上传到Hugo_Blog
  3. 可以将分支设为 MasterBlogTest 两个

Netlify

注册账户,连接对应的Github Repo

Netlify配置文件netlify.toml

注意!默认的配置也是可以用的,但是 netlify.toml迟早需要配置的。Netlify官方文档Hugo 官方示例

使用默认配置的时候,注意 Hugo 版本。

Hugo 示范的 netlify.tomlrepo 里有 netlify.toml文件时,Netlify 会自动读取配置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.53"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo  --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.53"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo  --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.53"

[context.branch-deploy]
command = "hugo  --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.53"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

Build and Deploy 你的站点

按 Netlify 的提示,上线你的站点。看到 deploy 里 published,就代表站点上线成功。

Netlify设置

Build&deploy

Deploy contexts 中可以设置相关的预览

deployContexts

Domian Management 域名设置

注意!关于自定义域名里的重定向设置: Redirect官方文档 中提到可以在 Publish directory 里直接设置_redirect文件,但是Netlify通过Hugo 生成站点,Public 文件夹并不显示在 repo 的文件列表里,所以我本人是没找到设置的办法。 不过可以在 netlify.toml中设置,参阅官方文档Redirects 以及在 netlify.toml中的说明

域名没有必要托管在 Netlify 中,但是所有想指向xxxx.netlify.com的都建议添加到自定义域名中。

设置中开启HTTPS

Netlify Identity

相比forestry.io,Netlify Identity 的设置相对复杂一点,但是主要是Blog的定义要注意跟主题相符合。

可参考 Netlify Identity官方文档 和 NetlifyCMS官方关于添加到已有站点的NetlifyCMS官方文档

后续

博客站点的建立到此告一段落,Enjoy~

关于 Github的使用以及 MarkDown 文档的修改,推荐使用 VSCodeTypora 两个工具。