最近翻看了几年前搭建的Hexo博客,想要将其重新部署到服务器上,却发现了一个大问题。

之前的Hexo版本太旧,重新安装最新的版本后,很多依赖报错,甚至无法重新启动,折腾了许久也未能成功。考虑到重新搭建环境也并非易事,便萌生了迁移到Hugo的想法。

和基于NodeHexo不同,基于Go语言的Hugo有几个显著的特点。

  1. 没有繁琐的依赖,只需下载Hugo软件即可运行,升级版本无需考虑插件的不兼容性。
  2. 社区十分活跃,安装过程有问题可以快速找到答案。
  3. 渲染速度非常快,并拥有草稿和热加载功能,修改保存后页面实时生效。
  4. Hexo迁移也非常方便,几乎不需要进行特殊配置。

本文重点说明使用PaperMod主题配置中解决的几个问题。

基础配置

安装Hugo并进行基础配置

需要注意:Hugo目前站点配置和主题配置并未分开,修改配置时请酌情考虑备份。

//安装hugo
brew install hugo

//创建新项目
hugo new site blog

//添加主题
cd blog
git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

//修改配置
echo theme = \"PaperMod\" >> config.toml

//启动
hugo server -D

//新建文档
hugo new post/my-first-post.md

PaperMod主题配置

中文标签目录

Hugo默认创建了categorytag两个分类层级,如果想要使用中文名称,需要进行配置。

taxonomies:
  category: 分类    //对应菜单url
  tag: 标签         //对应菜单url
menu:
  main: 
    - name: 分类
      url: 分类
      weight: 20
    - name: 标签
      url: 标签
      weight: 5
    - name: 存档
      url: archives
      weight: 5

针对PaperMod主题,如果需要支持中文,需要在配置中增加中文设置,修改文章后缀为.zh.md后,文章便会自动归类为不同语言。如果需要自定义新的分类层级,比如archives, 需要新建content/arvhives.md文件。中文配置为增加arvhives.zh.md文件。archives.md文件内容可参考该主题官方说明文档。

languages:
  zh:
    languageName: 中文
    weight: 1
    taxonomies:
      category: 分类
      tag: 标签
    menu:
      main:
        - name: 存档
          url: archives
          weight: 5
        - name: 分类
          url: 分类
          weight: 20
        - name: 标签
          url: 标签
          weight: 10
  en:
    languageName: English
    weight: 2
    taxonomies:
      category: categories
      tag: tags
    menu:
      main:
        - name: Archives
          url: archives
          weight: 5
        - name: Tags
          url: tags
          weight: 20
        - name: Categories
          url: categories
          weight: 10

增加评论系统

使用utterances评论系统,简单易上手,配置可参考utteranc.es

  1. 新建GitHub公开项目,例如owner/repo
  2. 安装utterances应用,并配置owner/repo项目的可访问权限。
  3. 访问utteranc.es地址,按照页面说明填写配置后,会生成如下所示的配置代码。
<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>
  1. 新增layouts/partials/comments.html,将生成代码拷贝到comments.html中,并在配置文件中启用评论配置
params:
  comments: true
  1. 配置成功,查看博客是否正常。