使用hugo生成静态个人博客,速度快,无需安装

BKT 发表于 - 4 分钟阅读 - 1815 个字

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 -}}
comments powered by Disqus