Hugo 项目探索

Hugo 框架探索

仓库目录结构构建

先来探索一下 Hugo 博客框架

先是在 posts 目录下创建了嵌套的文件夹放置 md 文件，发现本地hugo构建出的网页可以检测到文章

首先我一个个删除文件夹，发现 public 和 resources 这两个文件夹是在本地构建的时候生成的最终展示用的静态页面，还有 .hugo_build.lock 也需要被删除

而对我来说目前真正实际有用的就只有 themes 和 content 两个文件夹。

其它文件夹在最后真正部署在vercel上的时候直接删除掉，所以需要在推送这个仓库之前弄一个脚本清除掉多余的文件，保留仓库的纯净。

果然，删除了那些东西也可以正常在vercel上构建，不过我发现嵌套的文件夹文章没有了，可能是不支持中文文件夹的原因。我再建一个英文文件夹中文文章，和英文文件夹英文文章，还有中文在根目录的文章试一试

结果出来了，看来是vercel上面的部署不支持中文目录，这个问题影响不大，目录我可以接受用纯英文

---

主题选择

选了半天，没发现特别满意的，想自己做，不过对静态界面和 hugo 还一窍不通。最后选了stack主题，就是现在用的这个，还是挺不错的，该有的都有。

---

主题功能配置

配置文件如下，目前我会用到的基本功能，比如分类、时间归档、搜索、评论、目录结构、公式显示，靠改配置文件都能实现，还挺方便的，后面有空再搞搞自定义。

toml复制
baseURL = 'https://blog.hicky.top'
languageCode = 'zh-cn'
title = 'Corn 的自留地'
theme = 'hugo-theme-stack'

[markup]
  [markup.highlight]
    noClasses = false # 代码块可以被深色浅色改变样式
  [markup.tableOfContents]
    startLevel = 2
    endLevel = 4
    ordered = true

[params]
  mainSections = ["posts"] # 主页面主块
  
  [params.widgets]
    homepage = [ # 主页面的其它组件
      { type = "search" },
      { type = "archives", params = { limit = 10 } },
      { type = "categories", params = { limit = 10 } },
      { type = "tag-cloud", params = { limit = 10 } }
    ]
    page = [
      { type = "toc" } # 文章目录
    ]

  [params.article]
    toc = true # 文章目录

  [params.comments] # 评论支持
    enabled = true
    provider = "utterances"

    [params.comments.utterances]
      repo = "hi-cky/blog-comments"
      issueTerm = "pathname"
      label = "💬评论"

  math = true # 启动数学公式支持

---

Vercel 配置流程

Framework	选择 Hugo
Build Command	覆盖为 hugo --gc --minify（启用垃圾清理和压缩）
Output Directory	填写 public（Hugo 默认输出目录）

设置环境变量：

变量名	值	获取方式
CONTENT_REPO	你的GitHub用户名/blog-content	-
GITHUB_TOKEN	ghp_********	GitHub Token 创建页面 (需 repo 权限)
HUGO_VERSION	0.146.0（指定版本避免兼容问题)	-

配置构建命令：

设置项	值
Install Command	git clone https://[email protected]/$CONTENT_REPO.git /tmp/content
Build Command	hugo --gc --minify --contentDir /tmp/content
Output Directory	public