创建一个 Hugo 网站

2017/08/27

Categories: Web Tags: web

最近觉得把工作、学习、生活中的一些事情记录下来比较好，于是昨天花了一个下午搭个人博客。

用的 Hugo，这篇记录下过程。

安装

官方教程提供的是 brew install hugo，但是安装完是 v0.16 的，之后安装的主题已经不支持这个版本。

所以直接从 GitHub 上下载最新的 Release。

创建一个新的站点

hugo new site sakeven.github.io

添加主题

cd sakeven.github.io
git init
git submodule add https://github.com/yihui/hugo-xmin.git thmems/xmin


# Edit your config.toml configuration file
# and add the Ananke theme.
echo 'theme = "xmin"' >> config.toml

在 config.toml 配置主题：最上方的导航栏

[[menu.main]]
    name = "Home"
    url = "/"
    weight = 1
[[menu.main]]
    name = "About"
    url = "/about/"
    weight = 2
[[menu.main]]
    name = "Categories"
    url = "/categories/"
    weight = 3
[[menu.main]]
    name = "Tags"
    url = "/tags/"
    weight = 4

创建文章

我的文章都保存在 content/posts 下面，可以通过下面的命令创建一篇空文章。

hugo new posts/my-first-post.md

可以看到内容是这样的：

---
title: ''
date: ''
---

有横线分割的是文章的元数据，title 是文章标题，date 是创建时间，这些都需要自己填写。 此外还有常用的：

添加内容后，运行：

$ hugo server
Started building sites ...
Built site for language en:
0 draft content
0 future content
0 expired content
13 regular pages created
48 other pages created
0 non-page files copied
0 paginator pages created
14 tags created
6 categories created
total in 47 ms
Watching for changes in /Users/sake/sakeven.github.io/{content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

提示你打开网页 http://localhost:1313/ ，就能在本地看到自己发布的文章了。 比如： hugo

配置

在发布前，一般都需要配置一下站点生成规则。 Hugo 的配置文件是 config.toml。 我的配置如下：

baseurl = "https://sakeven.me/"
languageCode = "en-us"
title = "Sakeven's Blog"
theme = "xmin"
hasCJKLanguage = true
enableEmoji = true

[permalinks]
    posts = "/posts/:year/:month/:day/:slug/"

[[menu.main]]
    name = "Home"
    url = "/"
    weight = 1
[[menu.main]]
    name = "About"
    url = "/about/"
    weight = 2
[[menu.main]]
    name = "Categories"
    url = "/categories/"
    weight = 3
[[menu.main]]
    name = "Tags"
    url = "/tags/"
    weight = 4

[params]
    footer = "© [Sakven Jiang](mailto:sakeven.jiang@gmail.com) 2017 | [Github](https://github.com/sakeven)"

发布

单独的 hugo 命令，可以直接生成静态资源。这些静态资源存放在 public/ 下面。

$ hugo
Started building sites ...
Built site for language en:
0 draft content
0 future content
0 expired content
13 regular pages created
48 other pages created
0 non-page files copied
0 paginator pages created
14 tags created
6 categories created
total in 30 ms

其他

配置 MathJax 来支持 Markdown 书写 LaTex 公式。

<script>
(function() {
    var i, text, code, codes = document.getElementsByTagName('code');
    for (i = 0; i < codes.length;) {
      code = codes[i];
      if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
        text = code.textContent;
        if (/^\$[^$]/.test(text) && /[^$]\$$/.test(text)) {
          text = text.replace(/^\$/, '\\(').replace(/\$$/, '\\)');
          code.textContent = text;
        }
        if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
            /^\$(.|\s)+\$$/.test(text) ||
            /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
          code.outerHTML = code.innerHTML;  // remove <code></code>
          continue;
        }
      }
      i++;
    }
  })();  
</script>
<script async src="//cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

公式比如

$$ {\sqrt {n}}\left(\left({\frac {1}{n}}\sum \_{i=1}^{n}X\_{i}\right)-\mu \right)\ {\xrightarrow {d}}\ N\left(0,\sigma ^{2}\right) $$

可以生成：

$$ {\sqrt {n}}\left(\left({\frac {1}{n}}\sum _{i=1}^{n}X_{i}\right)-\mu \right)\ {\xrightarrow {d}}\ N\left(0,\sigma ^{2}\right) $$

Tips：