↓跳过正文
  1. Teches/
  2. 前端/
  3. Hugo/

Hugo博客搭建记录

技 hugo 前端 learning
·226 字·2 分钟
目录

环境准备
#

  1. 设备：ubuntu
  2. github地址：https://github.com/gohugoio/hugo
  3. 安装：
</> shell
1wget https://github.com/gohugoio/hugo/releases/download/v0.147.9/hugo_extended_0.147.9_Linux-64bit.tar.gz
2tar -xvzf hugo_extended_0.147.9_Linux-64bit.tar.gz
3sudo su
4mv hugo /usr/bin

Start!
#

1. 基础
#

1. 创建新博客
#

</> shell
1hugo new site siteproducer

2. 重要配置&配置逻辑链
#

2. 使用stack主题
#

</> shell
1git submodule add https://github.com/CaiJimmy/hugo-theme-stack themes/hugo-theme-stack

Hugo Tricks
#

1. 自定义样式
#

1. 样式覆盖规则：后引入覆盖前引入
#

  1. params.yaml配置中指定自定义custom_css
</> yaml
1custom_css: ["scss/custom.scss"]
  1. assets/custom.scss中
</> scss
1// 引入主题样式
2@import "general";
3// 引入你的自定义覆盖
4@import "custom-markdown"; // 无下划线、无扩展名

2. 自定义鸿蒙字体
#

  1. 下载鸿蒙字体
  2. 解压到siteproducer/assets/fonts目录
  3. 在assets/scss/中创建_fonts.scss，并在scss/custom.scss中引用

font.scss

</> scss
 1@font-face {
 2    font-family: 'HarmonyOS_Sans_SC_Medium';
 3    font-style: normal;
 4    font-display: swap;
 5    src: url('{{ (resources.Get "fonts/HarmonyOS_Sans_SC_Medium.woff2").RelPermalink }}') format('woff2');
 6}
 7@font-face {
 8  font-family: 'JetBrainsMono Regular';
 9  font-style: normal;
10  font-display: swap;
11  src: url('{{ (resources.Get "fonts/JetBrainsMono-Regular.woff2").RelPermalink }}') format('woff2');
12}
13
14:root {
15  --font-sans: 'HarmonyOS_Sans_SC_Medium', system-ui, -apple-system, sans-serif;
16  --font-mono: 'JetBrainsMono Regular', monospace;
17}
18body {
19  font-family: var(--font-sans);
20  line-height: 1.6;
21  color: #333;
22}
23
24code, pre {
25  font-family: var(--font-mono);
26}

custom.scss

</> scss
1@import "fonts";

3. blowfish theme 打开默认文档大纲
#

  1. md Front Matter中设置对应toc变量，不同主题可能使用不同Front Matter变量
</> yaml
1# bluefish 使用showTableOfContents
2showTableOfContents: true
3# 默认使用toc
4toc: true
  1. params.yaml中设置
</> yaml
1smartTOC: true

2. 分级目录
#

  1. 主题默认支持分级目录，但子目录不一定有独立样式，需要每一层子目录中创建
    _index.md
</> markdown
1---
2title: "title"
3description: "desc"
4---
  1. 使用deepseek自定义list.html覆盖主题提供的样式

todo
#

  1. 分级目录、tag云图
  2. markdown代码块左上角显示代码语言，右上角复制按钮
  3. 文档大纲-done
  4. 文档字数正确记数
  5. markdown 代码块渲染
  6. 文章标签
  7. markdown代码块功能优化
    1. 取消单独折叠按钮
    2. </> 区
      • 增加折叠功能
      • 增加悬浮伸缩动画效果
    3. 代码语言（hint）中文独立样式，支持markdown渲染
    4. 自动换行按钮
  8. tag筛选搜索器