Hugo基本使用
概要：
了解hugo基本使用，通过hugo搭建个人blog
参考
【hugo 】https://gohugo.io/
-https://gohugo.io/functions/
-https://gohugo.io/variables/
【GO模板语法】https://www.topgoer.com
【github集成】https://github.com/peaceiris/actions-gh-pages
【hugo theme】
https://themes.gohugo.io/https://github.com/CaiJimmy/hugo-theme-stackhttps://github.com/dillonzq/LoveIthttps://github.com/hugo-fixit/FixIthttps://github.com/henriksommerfeld/blog-hugo
1.hugo结构说明
# 站点结构
├── archetypes # 原型
├── config.toml # 站点配置
├── content # 站点内容目录
├── data # 数据模板
├── layouts # 站点布局模板
├── static # 静态内容
└── themes
# 内容目录
content
└── post
├── first-post
│ ├── images
│ │ ├── a.jpg
│ │ ├── b.jpg
│ │ └── c.jpg
│ ├── index.md (root of page bundle)
│ ├── latest.html
│ ├── manual.json
│ ├── notice.md
│ ├── office.mp3
│ ├── pocket.mp4
│ ├── rating.pdf
│ └── safety.txt
└── second-post
└── index.md (root of page bundle
# 文章描述
categories = ["目录1", "目录2"]
date = "日期+时间"
description = "描述"
slug = "spf13-vim-3-0-release-and-new-website"
tags = ["标签1", "标签2"]
title = "标题"
2.基本使用
# window版本下载`https://github.com/gohugoio/hugo/releases/download/v0.83.1/hugo_extended_0.83.1_Windows-64bit.zip`
# 配置环境变量
path /hugo_path/
# 创建站点
hugo new site quickstart
cd quickstart
# 添加主题/展示模板
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo theme = \"ananke\" >> config.toml
# 新建文章
hugo new posts/my-first-post.md
# 发布预览
hugo server -D #默认输出静态文件到./public目录下，或者使用参数指定public目录路径(-d/--destination flag to change it, or set publishdir in the config file).
访问 http://localhost:1313
# 发布静态文件到github
上传public下的文件到 `https://github.com/username/username.github.io`
访问 `https://username.github.io`
集成github pages
[源] hugo repository:qiaomingzi/limz-blog-hugo
[目标] gitpages repository: qiaomingzi/qiaomingzi.github.io
[1]生成密钥key
ssh-keygen -t rsa -b 4096 -C "github邮箱" -f gh-pages -N ""
[2]配置limz-blog-hugo/setting/Deploy keys新增公钥
key:刚才生成的公钥(gh-pages.pub)
[3]配置qiaomingzi.github.io/setting/Secrets新增密钥
name:ACTIONS_DEPLOY_KEY
value:刚才生成的密钥(gh-pages)
[4]创建文件limz-blog-hugo/.github/workflows/gh-pages.yml
name: github pages
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v2
- name: Setup Node
uses: actions/setup-node@v2.1.2
with:
node-version: '12.x'
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.83.1'
- name: Cache dependencies
uses: actions/cache@v2
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm run install:prod
- run: npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
# github_token: ${{ secrets.GITHUB_TOKEN }}
external_repository: qiaomingzi/qiaomingzi.github.io
publish_branch: master # default: gh-pages
publish_dir: ./public
[5]limz-blog-hugo/Actions查看或触发发布
git push 触发发布，可以在github上查看发布结果
3.hugo命令
hugo is the main command, used to build your Hugo site.
Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.
Complete documentation is available at https://gohugo.io/.
Usage:
hugo [flags]
hugo [command]
Available Commands:
check Contains some verification checks
config Print the site configuration
convert Convert your content to different formats
env Print Hugo version and environment info
gen A collection of several useful generators.
help Help about any command
import Import your site from others.
list Listing out various types of content
new Create new content for your site
server A high performance webserver
version Print the version number of Hugo
Flags:
-b, --baseURL string hostname (and path) to the root, e.g. https://spf13.com/
-D, --buildDrafts include content marked as draft
-E, --buildExpired include expired content
-F, --buildFuture include content with publishdate in the future
--cacheDir string filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
--cleanDestinationDir remove files from destination not found in static directories
--config string config file (default is path/config.yaml|json|toml)
--configDir string config dir (default "config")
-c, --contentDir string filesystem path to content directory
--debug debug output
-d, --destination string filesystem path to write files to
--disableKinds strings disable different kind of pages (home, RSS etc.)
--enableGitInfo add Git revision, date and author info to the pages
-e, --environment string build environment
--forceSyncStatic copy all files when static is changed.
--gc enable to run some cleanup tasks (remove unused cache files) after the build
-h, --help help for hugo
--i18n-warnings print missing translations
--ignoreCache ignores the cache directory
-l, --layoutDir string filesystem path to layout directory
--log enable Logging
--logFile string log File path (if set, logging enabled automatically)
--minify minify any supported output format (HTML, XML etc.)
--noChmod don't sync permission mode of files
--noTimes don't sync modification time of files
--path-warnings print warnings on duplicate target paths etc.
--quiet build in quiet mode
--renderToMemory render to memory (only useful for benchmark testing)
-s, --source string filesystem path to read files relative from
--templateMetrics display metrics about template executions
--templateMetricsHints calculate some improvement hints when combined with --templateMetrics
-t, --theme strings themes to use (located in /themes/THEMENAME/)
--themesDir string filesystem path to themes directory
--trace file write trace to file (not useful in general)
-v, --verbose verbose output
--verboseLog verbose logging
-w, --watch watch filesystem for changes and recreate as needed
Use "hugo [command] --help" for more information about a command.
模板
Hugo 使用Go html/template和text/template 库作为模板的基础，详细请参考https://pkg.go.dev/text/template
4.问题
1.ERROR 2021/05/08 14:30:50 TOCSS: failed to transform “styles/print-bundle.scss” (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS.
确认下载的hugo版本呢是hugo_extend版本 而不是标准版本
2.Hugo - Failed to find a valid digest in the ‘integrity’ attribute for resource
I replaced:
integrity=“J6YEe5hjKuk/TENUR7jEMr6VNR4lwN8iVpSGj1g8MU4=”
with:
integrity=""
in the css tag of every single index.html file.
This worked, although I found a solution to do this automatically and skip the error in the first place.
Solution(!) - Update: It looks like the head.html file under the assets folder has the following structure:
{{- $stylesheet := (resources.Match "css/*.css") | resources.Concat "assets/css/stylesheet.css" | minify | fingerprint -}}
<link href="{{ $stylesheet.Permalink }}" integrity="{{ $stylesheet.Data.Integrity }}" rel="preload stylesheet" as="style">
blog-hugo blog-hugo\layouts\partials\head.html
hugo-clarity hugo-clarity\layouts\partials\math.html themes\hugo-clarity\layouts_default\baseof.html
npm install 错误 Cannot read properties of null (reading ‘pickAlgorithm’)
’npm cache clear –force’