hugo 的优势

  • 构建速度真的很快
    • 使用 LiveReload 明显可以感觉受到，基本每次保存就马上刷新
    • 修改大多数文件都可以直接预览，hexo 和 jekyll 都需要重启 server
    • 主题多
      • 但是写法和 hexo 与 jekyll 相差比较大，上手可能会比较慢
    • 基础功能直接集成
      • 网站地图
      • 别名重定向
      • 阅读分钟、字数统计
      • Disqus
      • 谷歌分析
      • RSS
    • 多语言官方文档比较详细
    • 其他大家都有的优势
      • 跨系统，支持 macOS、Windows、Linux
      • 在很多平台托管网站：gitlab、github、Netlify、AWS、Azure、Cloudflare

安装 Hugo

  • MacOS 安装过程需要使用 终端.app 可在启动器中找到
  • Windows 安装过程需要使用 cmd 可 Win + R 键入 cmd 启动 cmd （也可以使用 PowerShell）

检查 hugo 是否安装

安装完后检查安装版本（有即是安装成功）

hugo version

&返回信息每个人电脑可能略有不同 hugo v0.117.0+extended darwin/amd64 BuildDate=unknown VendorInfo=macports

MacOS 方式1：使用 Homebrew 进行安装

brew install hugo

MacOS 方式2：使用 MacPorts 进行安装

sudo port install hugo

MacOS 方式3：使用 go get 进行安装

go get -u -v github.com/gohugoio/hugo

Windows 方式1：使用 Chocolatey 安装

choco install hugo-extended
  • 安装 Chocolatey https://chocolatey.org/

Windows 方式2：使用 Scoop 安装

scoop install hugo-extended
  • 安装 Scoop https://scoop.sh/

Windows 方式3：使用 Winget 安装

winget install Hugo.Hugo.Extended
  • 安装 Winget https://learn.microsoft.com/en-us/windows/package-manager/

升级更新 Hugo

Windows 使用 Scoop 升级更新 Hugo

scoop update hugo-extended

macOS 使用 升级更新 Hugo

可以直接使用 安装的命令或方式。

比如使用 MacPorts 更新

sudo port install hugo

如果提示更新 MacPorts ，请先用下面命令更新 MacPorts 再用 hugo 安装命令更新 hugo

sudo port selfupdate
sudo port upgrade outdated

本地快速创建站点命令脚本

  • 请先安装 hugo
  • 以下命令会会在终端当前路径创建一个my1px的文件夹并开始安装hugo
  • 并且自动下载和使用paper主题
  • 并运行
hugo new site my1px
cd my1px
git init

使用 paper 主题

git submodule add https://github.com/nanxiaobei/hugo-paper.git themes/paper
echo "theme = 'paper'" >> hugo.toml
hugo server

使用其他主题，使用 PaperMod 主题

git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
echo "theme = 'PaperMod'" >> hugo.toml
hugo server --disableFastRender

本地创建站点项目

  • 便于管理请先在终端进入特定目录
  • 下面命令中的 my1px 是创建站点项目的文件夹名字，可以修改
hugo new site my1px

&返回以下信息表示安装成功 Congratulations! Your new Hugo site is created in…

安装主题

先初始化 git

git init

然后可以去 Github：hugo-theme 找一个喜爱的主题，下面以 为例，进行安装

可以直接复制 Code 按钮里面的 .git 地址或者提取主题页面 README.md 文档中的 git clone 链接，替换下面的 git 链接

git submodule add https://github.com/kishaningithub/hugo-creative-portfolio-theme.git themes/ananke

&下载完后会返回以下类似内容（最后一行） Resolving deltas: 100% (343/343), done.

配置主题参数

config.toml 文件中存放了主题的相关配置，按需调整即可

发布内容

可在 /content/posts/ 创建 .md 文档

如果目录不存在，请手动创建。

文章放在其他路径下，一般主题都不会显示

本地运行 Hugo

hugo server -D

运行成功会返回一个链接，浏览器打开链接即可看到自己的本地站点（每个人生成的链接可能略有不同） Web Server is available at http://localhost:1313/ ….

在 server 后面加 -D 会解析草稿，草稿文章在头部用draft: true注明

调试主题查看实时预览（修改后立即看效果）

hugo server --disableFastRender

Hugo 本地生成 HTML

hugo

Front Matter

Hugo 的文章、页面 支持使用 TOML、YAML、JSON 格式写 Front Matter

除了一般常用的 title data 还有很多内置的参数，以下为 hugo Front Matter 不完全参数（YAML 格式）。

---
title: "文章标题"
description: "文章的描述信息"
tags: [ "标签1", "标签2", "标签3" ]
categories: [ "分类1", "分类2" ]
keywords: [ "Hugo", "keyword" ]
date: 2023-04-06
lastmod: 2023-12-23
# CJKLanguage: Chinese, Japanese, Korean
isCJKLanguage: true

# 如果draft为true，除非使用 --buildDrafts 参数，否则不会发布文章
draft: false

# 设置文章的过期时间，如果是已过期的文章则不会发布，除非使用 --buildExpired 参数
expiryDate: 2020-01-01

# 设置文章的发布时间，如果是未来的时间则不会发布，除非使用 --buildFuture 参数
publishDate: 2020-01-01

# 排序你的文章
weight: 40

# 使用这两个参数将会重置permalink，默认使用文件名
url: 
slug: 

# 别名将通过重定向实现
aliases:
  - 别名1
  - /posts/my-original-url/
  - /2010/01/01/another-url.html

# type 与 layout 参数将会改变 Hugo 寻找该文章模板的顺序，将在下一节细述
type: review
layout: reviewarticle

# 三个比较复杂的参数
taxonomies:
linkTitle: 
outputs:
# 实验性的参数
markup: "md"

# 你还可以自定义任何参数，这些参数可以在模板中使用
include_toc: true
show_comments: false
---

部分信息源自： https://olowolo.com/post/hugo-quick-start/

自动生成 slug

通过修改 archetypes/default.md 中 slug 参数的值，预设我们通过 hugo new 新文章.md 命令新建文章时自动生成 slug

使用时间戳作为文章的 slug

  • 缺点，同一时间创建多个文章 slug 会重复
slug: "{{ (time .Date).Unix }}"

使用文件路径文件名生成 md5 作为文章的 slug

根据路径生成 md5 ，长度为 32 位，所以不同路径相同文件名是不会重复的。

  • 举例
    • hugo new 像素指南1px.run.md → c992ae376e54ee77dc1db8c9011b587d
    • hugo new test/像素指南1px.run.md → 86a2881f399837db73cb2bad9ae4b876
slug: {{ .UniqueID }}

32位太长减小长度

根据路径生成 md5 默认有32位，以下代码默认取前6位，这样做虽然 slug 重复的概率还是极小，但是还是加大了重复的概率

slug: {{ substr (.UniqueID) 0 6 }}

使用文件路径文件名生成 md5 作为文章的 slug

  • 缺点，同一时间创建多个文章如果文件名相同 slug 会重复

时间 + 文章名生成字符串后 md5 加密后取 5-12 位，则长度为8位。代码中 4 代表从第5位开始取，8表示长度 8位。

slug: {{ substr (md5 (printf "%s%s" .Date (replace .TranslationBaseName "-" " " | title))) 4 8 }}

主题模板自定义

自带 Front Matter 参数如何在模板调用

. + 参数名 的组合，参数名第一个字母必须大写，用{{ }}包含起来，如:

标题

{{ .Title }}

简介描述

{{ .Description }}

hugo 文章页面中自定义 Front Matter 如何使用在模板调用

以下示例，在 posts 文件夹中的文章的 Front Matter 新增了一个 image 参数，用作文章的封面或者内容插图。

如果有配置 image 就显示图片，如果没有配置就不添加图片

  {{ if .Params.image }}
      <img src="{{ .Params.image }}" alt="{{ .Title }}">
  {{ else }}
  {{ end }}

hugo 站点配置（yml格式）

指定默认语言

defaultContentLanguage: zh

zh 为语言列表中特定的语言

默认语言的文件（文章）是否存放在根目录

defaultContentLanguageInSubdi: true

false 不使用子目录，示例：/post/my--post/ true 使用子目录，示例：/zh/post/my--post/

指定中文和英文文章内容存放目录

languages:
  zh:
    languageName: "中文"
    weight: 1
    contentDir: "content/zh"

  en:
    languageName: "English"
    weight: 2
    contentDir: "content/en"

zh、en作为对应语言的根目录，在这个目录中创建一个posts文件夹，hugo 就能自动识别里面的文章了，按语言识别。

回到顶部

Copyright © 2017-2024 1px.run (像素教程) Distributed by an MIT license.

Site updated at 2024-11-15 11:26