使用Hugo搭建博客

2018-05-12 博客

把博客从hexo换成hugo.

hexo的 node_modules 目录下有 6k+ 文件, 多来几个站点真的是伤不起. ~~反正博客建好了也不一定会更新, 用啥都一样, hugo能节省几千个inode呢😂.~~

hugo 初探

hugo 搭建博客的方式和 hexo 差不多, 都是由 hugo/hexo 渲染 markdown 文档, 生成一系列的静态页面. 可以选择将生成的页面部署在 Github Pages 上面.

安装hugo

有多种安装方式:

下载预编译好的二进制文件, 解压即可使用.
从源代码编译, 需要安装 golang. 一开始我使用该方式, 然后发现 github 最近由于不可描述的原因, 相当慢, 只能挂代理.
使用发行版包管理器提供的包, 可以使用 bash 的 Tab 补全. 缺点是版本可能相对更旧一些.
使用 snap 包, 更新比发行版包管理器提供的包快. 但是发现 Windows 10 wsl 里面似乎没法使用 snap?

最后选择放弃自己编译, 使用 Ubuntu 18.04 仓库里面提供的包, 版本也不算太旧. 可能 Ubuntu 18.04 才出来的原因吧.

apt-get update
apt-get install hugo

快速上手

初始化站点

# 进入放网站源文件目录
cd /some/where
# 初始化一个网站
hugo new site migueltek.com

cd migueltek.com

在该文件夹下已经有一些必需的文件(夹)了.

配置一个主题

接下来配置一个主题, 配置主题前我先将网站加入到版本管理中, 方便后续的修改等.

这里使用 Mainroad 主题, 更多主题可以在 themes.gohugo.io 上查看.

# 将网站加入 git 版本管理
git init
# 下载主题
git submodule add https://github.com/vimux/mainroad themes/mainroad

如果不需要使用 git 版本管理可以直接到 github 上下载 zip 源码, 解压到 themes/ 文件夹即可.

配置主题和 hugo

修改 config.toml, 直接贴配置:

# 选择主题
theme = "mainroad"
# 语言
languageCode = "zh-cmn"
# 如果使用了中文, 设置下面的选项帮助 hugo 正确统计文章字数等
hasCJKLanguage = true
enableEmoji = true

baseURL = "/"               # 网站的域名
title = "网站的标题"
paginate = "10"             # 每页多少个主题


[Author] # Used in authorbox
    name = "站长昵称"
    bio = '个人经历'
    avatar = "img/avatar.png"   # 头像, 存放在 主题或者网站的 static/ 目录下

[Params]
    subtitle = "网站的副标题"    # Subtitle of your site. Used in site header
    description = "Miguel's Personal blog about everything"    # Description of your site. Used in meta description
    opengraph = false    # 不使用 FaceBook 的 OpenGraph
    twitter_cards = false    # 不显示 twitter 链接
    readmore = true    # 显示 "继续阅读按钮"
    leftsidebar = false    # 将侧边栏移动到左边
    authorbox = true    # 在页面底部显示站长信息
    post_navigation = true    # Show post navigation at bottom of pages if true
    postSections = ["post"]    # the section pages to show on home page and the "Recent articles" widget
    #postSections = ["blog", "news"]    # alternative that shows more than one section's pages
    dateformat = "2006-01-02"    # change the format of dates

[Params.widgets]
    search = true                           # Enable "Search" widget
    recent_articles = true                  # Enable "Recent articles" widget
    recent_articles_num = 5                 # Set the number of articles in the "Recent articles" widget
    categories = true                       # Enable "Categories" widget
    tags = true                             # Enable "Tags" widget
    tags_counter = false                    # Enable counter for each tag in "Tags" widget (disabled by default)

    # Enable "Social" widget, if any of "social_*" set a value
    # social_facebook = "username"
    # social_twitter = "username"
    # social_linkedin = "username"
    social_github = "GITHUB用户名"
    social_email = "邮箱地址"
    # social_google_plus = "profileid"

创建一个测试页面

在站点目录下运行:

hugo new post/hugo.md

注意: 这里官网写的文档是 hugo new posts/my-first-post.md 似乎 posts 是错误的? 还是主题影响的?

markdown 文件位于 content/post 目录下, 编写 markdown 文件, 写完后将头部的 draft: true 修改为 draft: false.

运行 hugo 的测试服务器: hugo server -D , 在浏览器中打开 http://localhost:1313 即可测试.

生成发布所需的静态站点

在站点目录下运行:

hugo --cleanDestinationDir

默认会将文件生成在 public/ 文件夹中, 请注意根据需要配置你的 .gitignore 文件.

注意: 以下标签的文章不会被编译:

Content with a future publishdate value
Content with draft: true status
Content with a past expirydate value

自定义的静态文件可以存放在站点的 static/ 目录下, 在生成站点时会将 static/ 目录下文件全部复制到 public/ 目录下, 该目录的优先级最高, 会替换主题的 static/ 已有的文件.

魔改

修改主题的翻译

主题目录中有 i18n/en.yaml 将里面的短语翻译后另存为i18n/zh-cmn.yaml即可, 自定义的 copyright 信息也可以在这里修改.

编辑 config.toml, 添加:

DefaultContentLanguage = "zh-cmn"

替换 Google的CDN

主题的 layouts/partials/header.html 里面:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700">

这一行会导致国内打开页面奇慢无比. 几个解决方案:

替换 url 为国内的替代CDN.
直接删除/注释掉这一行, 使用浏览器默认的字体.
手工将这个 css 和其需要的 woff2 字体下载保存, 修改 css 的url, 由网站提供这些资源.

记得顺便将这两行删除/注释掉, 虽然不影响:

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">

添加代码语法高亮

我博客中需要插入一些代码文本, 默认的显示不够漂亮, hugo 的语法高亮没测试, 我直接使用 highlight.js 库完成:

首先在 highlightjs.org 下载 highlight.min.js, 保存到主题的 static/js/ 目录.

然后在 github 下载一个合适的代码高亮主题, 保存到主题的 static/css/highlight.min.css

修改主题的 layouts/partials/header.html , 在 <head> 标签中添加:

<link rel="stylesheet" href="/css/highlight.min.css">

编辑 layouts/partials/footer.html, </body> 标签前添加:

<script type="text/javascript" src="/js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

其他 hugo 的配置

permlink 配置, 修改 config.toml :

[permalinks]
    post = "/:year/:month/:day/:title/"

更多标签可以在 hugo 官网查看.

给主题添加菜单:

首先创建 about页面并加入自己的联系方式:

hugo new about/_index.md

修改 config.toml, 添加:

[menu]
    [[menu.main]]
        identifier = "categories"
        name = "分类"
        url = "/categories"
    [[menu.main]]
        identifier = "tags"
        name = "Tags"
        url = "/Tags"
    [[menu.main]]
        identifier = "about"
        name = "联系我"
        url = "/about/"

文章的 Tags 和分类:

在文章的头部加入:

categories:
  - "分类1"
  - "cata n..."
tags:
  - "标签1"
  - "标签2"
  - "标签n"

文章的摘要:

在 markdown 正文中使用

<!--more-->

来分隔首页中显示的摘要的内容.

github CNAME配置:

在 hugo 站点 static 目录下创建 CNAME 文件, 内容是站点的域名.

hugo
博客