本文是基于我个人在使用Hugo建站过程中所遇到的问题总结而成。在Debug过程中主要依赖于Google + Github + YouTube + ChatGPT，在此也要感谢诸多前辈和技术大牛们在网上的无私分享。

主题设置

在Hugo 的主题展示区可以找到完整的主题列表。在选择主题时，除了选择自己喜欢的风格，建议也尽量选择开发者仍在积极维护的主题。如果主题的更新时间过于out-of-dated, 可能无法适配于Hugo的最新版本。此处也要提醒如果网站已经相对完善并上线，那么在本地的Hugo更新则需要非常谨慎。如果升级了Hugo却发现无法渲染主题则会非常麻烦。Mac 用户尤其需要注意，downgrade Hugo 是很难实现的。也建议每次要升级前要记录下当前与自己主题相配合的Hugo 版本， 以备不时之需。

查看Hugo 版本的方法：

$ hugo version

另外，在下载主题时，一般建议使用 git submodule add 这样可以实现主题的及时更新。但需要注意，如果有使用不同设备操作，那么在新设备 git clone 自己的repo 之后，也需要 git submodule init, 不然是无法在新设备渲染网站的。具体步骤如下：

$ git clone https://github.com/user/repo.git
$ git submodule init
$ git submodule update --remote --merge

文章设置

使用命令hugo new content posts/my-first-post.md 可以在路径 content/posts 下产生一个markdown 文件。这里建议加入几个参数：

  • slug: 设置slug的目的是优化固定连接，也就是防止文章的链接复制到剪贴板之后所有中文部分变成某种“乱码”。在设置了slug 之后，记得再去Config 中修改permlinks的格式。更多关于slug的说明，可以参考此教程。
  • categories 和 tags 都是帮助我们更好的组织管理网站上的文章。大部分的主题在自己的Config file里都已经把 Category 和 Tag 放在了Menu下面，所以只要我们在文章的参数里写了相应的值，文章就会自动出现在这些不同的类别和标签下面了。（当然Tag 和 Category也可以只选择一个。）
---
title: "my-first-post"
slug: "first-post"
date: 2024-03-02T19:20:54-08:00
draft: true
tags:
  - Hugo
  - Blog
categories：
	- 
---

Config.toml下面 Permlink、Category 和 Tag的设置可以参考:

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

[[menu.main]]
  name = "分类"
  weight = 3
  identifier = "categories"
  url = "categories/" 
  
 [[menu.main]]
  name = "标签"
  weight = 4
  identifier = "tags"
  url = "tags/"

字体设置

本网站使用的字体为霞鹜文楷。在Hugo 网站使用霞鹜文楷有两个步骤：

  • Step 1: 在 layouts/partials/head.html 加入在线字体链接：

    <link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont/style.css" media="print" onload="this.media='all'">

  • Step 2: 在 .css file 所有的 font-family 处添加霞鹜文楷：

    body {
  /* Screen version */
  font-family: "LXGW WenKai Screen", sans-serif;
}

添加评论

尽管 Hugo 提供了方便的 Disqus shorcode , 但 Disqus 的界面浮夸且必须接受广告协议，所以不是个好选择。目前发现的最好选择是Twikoo + Vercel，请参见官方详细的使用说明 和 视频教程。

在配置好自己的environment ID之后，如果使用的主题没有支持 Twikoo 则需要通过CDN 引入。方法是在 layouts/posts/single.html (也可能是layouts/partials/footer.html, 依据不同主题会有所不同）加入官方指导的代码 (此处只需替其中的environment ID)：

<div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/1.6.31/twikoo.all.min.js"></script>
<script>
twikoo.init({
  envId: '您的环境id', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
  el: '#tcomment', // 容器元素
  // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
  // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
  // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
})
</script>

在前端也配置成功Twikoo之后， 可参考教程进行Twikoo的界面和邮件提醒设置。

使用图床

使用图床主要有两个好处：

  • 方便文章的移动和分享
  • 不占用本地空间

Github 作为搭建图床的选择优点在于简单快速完全免费，但缺点是有时Github会被国内block, 且作为储存地点的Repo必须设置为"public"。具体步骤可以参考 GitHub + PicGo 教程。需要注意的是在配置PicGo时 “设定仓库名称” 需要的格式必须是： username/reponame，不能只写 reponame。

另外也可以考虑 Backblaze + Cloudflare + PicGo, 可参见教程。

其他有用资源