Hugo 安装与配置

安装

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

apt install hugo  # choco / scoop / brew / snap

hugo new sit wolfsky
cd wolfsky
git init
git submodule add https://github.com/olOwOlo/hugo-theme-even themes/even
copy themes/even/exampleSite/config.toml .

hexo new post/my-first-post.md

hexo server -D

URL 设置

1
2
3
4
5
6

# Hexo中配置
/:year/:month/:day/:title/

# Hugo中配置
[permalinks]
    post = "/:year/:month/:day/:filename/"

Hugo 默认会把 url 中的大写字符转为小写，如果不想转换，在配置文件中加入

1

disablePathToLower = true

Hugo 默认会把分类（categories）名称转为小写，如果不想转换，在配置中加入，

1

preserveTaxonomyNames = true

文档格式

markdown 是首要支持的格式，除了标准的 markdown 格式外，hugo 还内置了 mmark 渲染引擎，可以支持一些额外的格式。将文件名命名为 *.mmark，或者在文章的 front matter，加上一行设置 markup: mmark。

这是 latex 公式演示

$ v_\pi(s) = \sum_{a \in \mathcal{A}} \pi(a|s) q_\pi(s,a) $

$ v_\pi(s) = \sum_{a \in \mathcal{A}} \pi(a|s) q_\pi(s,a) $

hugo 也内置了对 Org-mode 支持，将文件命名为 *.org，或在 front matter 加上 markup: org

Hugo 也支持使用外部的处理程序来处理 Markdown 文件，例如 asciidoc，reStructuredText 和 Pandoc。比如 Pandoc，首先安装 Pandoc。然后把包含 LaTeX 公式的博文后缀为 pdc，重新生成博客即可，不需要其他设置。

图表

在 markdown 中使用代码绘图，有flowchart, mermaid, plantuml, graphviz 等，我使用的主题 even 内置了 flowchart 的支持，我添加了 mermaid 的支持，参考 hugo-theme-docdock

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!

另一种方案是使用 gravizo 提供的服务，参考 https://it.knightnet.org.uk/kb/hugo/embed-diagram/

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

digraph G {
    aize ="4,4";
    main [shape=box];
    main -> parse [weight=8];
    parse -> execute;
    main -> init [style=dotted];
    main -> cleanup;
    execute -> { make_string; printf}
    init -> make_string;
    edge [color=red];
    main -> printf [style=bold,label="100 times"];
    make_string [label="make a string"];
    node [shape=box,style=filled,color=".7 .3 1.0"];
    execute -> compare;
  }
DOT Language (GraphViz) Example
DOT Language (GraphViz) Example

部署到 github pages

如果之前已经建立了 github.io 的仓库，并且使用 Hexo 往里面部署过，但是不想要之前的东西了，采用下面的方式。在博客的根目录下，运行下面的命令：

1
2
3
4

mkdir public
cd public
git init
git remote add upstream https://github.com/josephpei/josephpei.github.io.git

执行 hugo -t even，hugo 会生成 blog 内容，放到 public 目录。然后，我们把 public 下面的内容 push 到 github 即可。

1
2
3

git add .
git commit -m  "switch to hugo"
git push -f upstream master # 第一次 push 必须使用 -f，因为此时远程仓库非空，和本地有冲突

*nix deploy.sh

 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

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# build the project
hugo -t even

cd public

git add .

msg="rebuilding site `date`"

if [ $# -eq 1 ]
  then msg="$1"
fi

git commit -m "$msg"

# push source to github

git push upstream master

# come back to blog root

cd ..

windows powershell deploy.ps1

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

#build site
hugo -t even

# add files to git
cd public
git add -A

#set up commit message
$msg="rebuilding site " + (Get-Date)
If ($args[0]) {$msg = $args[0]}

#commit and push public repo
git commit -m $msg
git push origin master

#and back out and commit and push source repo
cd ..
git add -A
git commit -m $msg
git push origin master

参考