1. 简介
hugo为使用go语言开发的博客生成程序,支持多种模板,主题,本地运行,将markdown转换为一个网站,适合做文档网站,博客等。 hugo在github上有超过70W星。 Visit the Hugo website!
2. 下载
https://gohugo.io/
3. 安装运行
解压后,仅有一个20M左右的exe文件,在Powershell中执行即可。
./hugo.exe new site quickstart #quickstart为你的站点名
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke #你可能需要配置git代理,请参考https://www.cnblogs.com/jopny/p/18298798/Git-Set-Proxy-Server
echo "theme: 'ananke'" >> hugo.toml # 指定当前Theme
hugo server #生成,并开启一个Web服务,默认Url:http://localhost:1313/
增加Theme ananke
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
增加Theme ananke
git submodule add https://github.com/FarseaSH/hugo-theme-moments.git themes/moments
4. 页面配置
4.1 content文件下为带生成的markdown内容。
以下是一个.md文件的头
--- # 前面不要有空行,否则不能高亮显示。这里不要使用+++,否则预览时会front matter不会被隐藏,亦不会高亮显示front matter内容
title: 'Git代理设置'
description: '1.设置临时代理,取消临时代理。2. 设置永久代理。3. SSL设置'
categories: ['Development', 'Tools']
slug: 'git-proxy-config-ssh'
tags: ['git', 'ssh', 'proxy', 'setting']
date: 2024-07-12T23:02:44+08:00 # data是未来日期的,不会被生成,即不显示。
draft: false
isCJKLanguage: true #有此项设置的SummaryLength才有用
summary: '1.设置临时代理,取消临时代理。2. 设置永久代理。3. SSL设置' # 这里是自定义的文章列表中显示的摘要
featured_image: 'Pickup-roller.png' # 不要加./这种相对路径,否则生成路径在首页和详情页不同,导致无法显示。
---
详情页模板路径:
themes\ananke\layouts\page\single.html
4.2 首页显示的列表,默认是最新的三个,包括content文件下的所有内容
4.3 路径处理
例如:
content/
└── posts/
└── avif-maker/ <-- 页面束
├── post-x.md <-- 改为index.md
└── avif-maker.jpg <-- 页面资源
生成后的Url: https://xx.com/posts/avif-maker/psot-x/ 页面中插入图片:
![制作avif动画/动图](avif-maker.webp "制作avif动画/动图") # 这里尽量不要使用./这种相对路径,如果使用,显示没有问题,就是其路径是完整的加了http://example.com:1313/这种完整路径。
此时的图片链接错误,不能显示出来。如果路径改成../avif-maker.webp,最然生成页面能显示出来了,但markdown编写时的预览页面显示不出来。
如果将post-x.md改为index.md,
content/
└── posts/
└── avif-maker/ <-- 页面束
├── index.md <-- 改为index.md
└── avif-maker.jpg <-- 页面资源
则生成的Url为:
https://xx.com/posts/avif-maker/
此时使用图片路径./avif-maker,则预览和生成结果均能正常显示。
4.4 文件夹和文件名可以用大写
4.5 提示public下某个文件找不到
删除public下所有文件,然后重新生成。
content下文件和文件夹名称可以用大写。
5. hugo.toml
baseURL: 'https://www.yourdomain.xyz/'
languageCode: 'zh-cn'
title: 'XXXX小站'
theme: 'ananke'
[params]
subtitle: 'The Best Widgets on Earth'
[params.contact]
email: 'info@example.org'
phone: '+1 202-555-1212'
[menus]
[[menus.main]]
name: '博客'
pageRef: '/posts'
weight: 9
[[menus.main]]
name: '科技'
pageRef: '/tech'
weight: 10
[[menus.main]]
name: 'About'
pageRef: '/about'
weight: 20
[mediaTypes]
[mediaTypes.'image/avif']
suffixes: ['avif']
summaryLength: 20
hasCJKLanguage: true
问题解决
1. Google Analytics
2. Disqus
内网不能访问
3. 增加显示更新时间
hugo.toml增加以下配置:
[frontmatter]
lastmod = ['lastmod', ':git', ':fileModTime', 'date', 'publishDate']
修改single.html模板
<time class="f6 mv4 dib tracked">
- {{ i18n "pageUpdated" }} {{ .Lastmod | time.Format (default "January 2, 2006" .Site.Params.date_format) }}
</time>
4. 多语言
themes\ananke\i18n
5. 改详情页字体,自定义css
增加\assets\ananke\css\custom.css
.my_post_content_classes {
font-family: "Segoe UI", SegoeUI, "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;
word-break: break-all; /* 解决连续无空格链接不换行问题 */
}
增加hugo.toml配置项:
[params]
custom_css = ["custom.css"]
post_content_classes = "my_post_content_classes"
对于标题,删除athelas即可
<h1 class="f1 athelas mt3 mb1">
{{- .Title -}}
</h1>
6. sitemap.xml去除tags, categories
在themes/yourthemename/layout/_default 下,增加sitemap.xml,复制以下内容进去:
{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">{{ range .Data.Pages }}{{ if not (or (hasPrefix .RelPermalink "/tags") (hasPrefix .RelPermalink "/categories")) }}
<url>
<loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
<lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
<changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
<priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
<xhtml:link
rel="alternate"
hreflang="{{ .Language.Lang }}"
href="{{ .Permalink }}"
/>{{ end }}
<xhtml:link
rel="alternate"
hreflang="{{ .Language.Lang }}"
href="{{ .Permalink }}"
/>{{ end }}
</url>{{ end }}{{ end }}
</urlset>
关键的就是这行:
{{ range .Data.Pages }}{{ if not (or (hasPrefix .RelPermalink "/tags") (hasPrefix .RelPermalink "/categories")) }}
7. 自定义robots.txt, 禁止搜索引擎收录tags,categories
打开:\themes\yourthemename\robots.txt, 增加两行Disallow:/categories/
User-agent: *
{{/* robotstxt.org - if ENV production variable is false robots will be disallowed. */ -}}
{{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") -}}
Disallow: /categories/
Disallow: /tags/
Sitemap: {{ "/sitemap.xml" | absURL }}
{{ else -}}
Disallow: /
{{ end -}}