Как я настроил блог на Hugo

В этом посте я кратко, без подробных объяснений собрал все моменты, которые пришлось сделать, чтобы привести Hugo с темой PaperMod к тому виду, который меня устроил.

Тут описаны моменты, которые касаются только Hugo. Стоит помнить, что помимо настройки Hugo была еще настройка веб-сервера Nginx и сертификата (через certbot).

Hugo версия

требуется Hugo Extended https://github.com/gohugoio/hugo

у меня сейчас такая:

PS C:\Users\User\Projects\Blog> hugo version
hugo v0.147.4-84c8426f328a946b2e10611431c450b352cecd11+extended windows/amd64 BuildDate=2025-05-20T10:41:19Z VendorInfo=gohugoio

Подправить тему PaperMod

В Hugo после версии 0.146. изменилась логика как работают темы. PaperMod, который я качал не вносил изменений. Ошибка выскакивала только при генерации конечного сайта. Надо сделать, чтобы было как здесь: https://github.com/adityatelange/hugo-PaperMod/issues/1719#issuecomment-2797327929

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 3e55c67..ae6450a 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -150,8 +150,8 @@
 
 {{- /* Misc */}}
 {{- if hugo.IsProduction | or (eq site.Params.env "production") }}
-{{- template "_internal/google_analytics.html" . }}
-{{- template "partials/templates/opengraph.html" . }}
-{{- template "partials/templates/twitter_cards.html" . }}
-{{- template "partials/templates/schema_json.html" . }}
+{{- partial "google_analytics.html" . }}
+{{- partial "templates/opengraph.html" . }}
+{{- partial "templates/twitter_cards.html" . }}
+{{- partial "templates/schema_json.html" . }}
 {{- end -}}
diff --git a/layouts/partials/templates/schema_json.html b/layouts/partials/templates/schema_json.html
index dc3bfd6..8a4efb4 100644
--- a/layouts/partials/templates/schema_json.html
+++ b/layouts/partials/templates/schema_json.html
@@ -85,7 +85,7 @@
     {{ (path.Join .RelPermalink .Params.cover.image ) | absURL }},
     {{- end}}
   {{- else }}
-    {{- $images := partial "partials/templates/_funcs/get-page-images" . -}}
+    {{- $images := partial "templates/_funcs/get-page-images" . -}}
     {{- with index $images 0 -}}
   "image": {{ .Permalink }},
     {{- end }}
diff --git a/layouts/partials/templates/twitter_cards.html b/layouts/partials/templates/twitter_cards.html
index 6b0d59b..a6e1d05 100644
--- a/layouts/partials/templates/twitter_cards.html
+++ b/layouts/partials/templates/twitter_cards.html
@@ -6,7 +6,7 @@
 <meta name="twitter:image" content="{{ (path.Join .RelPermalink .Params.cover.image ) | absURL }}">
 {{- end}}
 {{- else }}
-{{- $images := partial "partials/templates/_funcs/get-page-images" . -}}
+{{- $images := partial "templates/_funcs/get-page-images" . -}}
 {{- with index $images 0 -}}
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:image" content="{{ .Permalink }}">

Правильная вставка ссылок и картинок

ссылки на другие посты нужно линковать через /posts/topic/
ссылку на картинку давать так: ![схема дел по Форстеру](shema-todo.png)

Переименовывать залинкованные файлы картинок

Через VSCode, если на ссылке нажать F2 (Rename symbol)

Оптимизация картинок

чтобы разобраться со сжатием картинок в блоге надо понять как это работает в простом html. Написал про это отдельный пост

Ширина текста

CSS в PaperMod, где происходит описание ширины текста лежит здесь

>C:\temp\site\themes\PaperMod\assets\css\core

Счетчик яндекс.метрики

https://mistikan.gitlab.io/notes/posts/add-yandex-metrika-on-hugo/

Ошибка timeout при генерации сайта

https://gohugo.io/getting-started/configuration/#timeout

Меню верхнее

https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs/3350876b2b79e2f3667e070402100366a0da787b#add-menu-to-site

VS Code настройка

нужно делать папку content как рабочую в VS Code. Это нужно для того, чтобы когда линкуешь путь в markdown линках через слэш ‘/’, то путь в подсказке выскакивал в posts, а то не будут ссылки работать. Правильно будет когда путь идет так:

[text for link](/posts/folder_of_post/)

Подсветка кода

добавить в

>\hugo.toml

[markup.highlight]
codeFences = true
guessSyntax = true
lineNos = true #если это не поставить, то у Hugo будет свой код-хайлайт
noClasses = false

[params.assets]
disableHLJS = true

можно задавать параметры определённого куска кода добавляя это в конце строки:

```go {linenos=inline hl_lines=[3,"6-8"] style=emacs}
```

на будущее вот еще полезная ссылка, но вроде этот файл мне не пригодился. https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs/3350876b2b79e2f3667e070402100366a0da787b?ysclid=mbmdiv2u3x393810235#using-hugos-syntax-highlighter-chroma

Комментарии в конце поста

Необходимо подправить html-шаблон поста

>\themes\PaperMod\layouts\_default\single.html

В нём вставляем до начала описания футера, но после секции post-content:

 1<div class="post-content">
 2    {{- if not (.Param "disableAnchoredHeadings") }}
 3    {{- partial "anchored_headings.html" .Content -}}
 4    {{- else }}{{ .Content }}{{ end }}
 5  </div>
 6  {{- end }}
 7  <p></p>
 8  <p></p>
 9👉 💬 Отправить <a href=https://t.me/noiamnot><u> коммент мне в ТГ</u> </a> или <a href="mailto:breakss+blog@yandex.ru?subject={{ replace (printf "Re: %s" .Page.Title) "\"" "'" }}"> <u> письмом на почту</u>  💌 </a>
10  <footer class="post-footer">
11    {{- $tags := .Language.Params.Taxonomies.tag | default "tags" }}
12    <ul class="post-tags">
13      {{- range ($.GetTerms $tags) }}
14      <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
15      {{- end }}
16    </ul>
17    {{- if (.Param "ShowPostNavLinks") }}
18    {{- partial "post_nav_links.html" . }}
19    {{- end }}
20    {{- if (and site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
21    {{- partial "share_icons.html" . -}}
22    {{- end }}
23  </footer>

Сделать, чтобы шапка в новых постах была по шаблону

>C:\temp\site\themes\PaperMod\archetypes\default.md

+++
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
tags = ['']
categories = ['']
ShowToc = true
TocOpen = true
date = {{ .Date }}
draft = true
+++

hugo.toml выглядит так

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66


baseURL = 'https://blog.shulep.ru'
languageCode = 'ru-ru'
defaultContentLanguage = 'ru'
enableRobotsTXT = true
title = 'Извини, увлекся'
theme = "PaperMod"
timeout = '360'

[markup.goldmark.extensions.extras.mark]
enable = true

[markup.highlight]
lineNos = true

[imaging]
quality = 90

[params]
defaultTheme = 'auto'
ShowReadingTime = true
ShowPostNavLinks = true
ShowCodeCopyButtons = true

[params.analytics.yandex]
SiteVerificationTag = "99954298"

[params.homeInfoParams]
Title = "Что тут происходит? 🐤"
Content = "Привет посетителям этого сайта, написанного живым человеком. Я постоянно разбираюсь в запутанных неизвестных вещах, которые мне интересны и увлекаюсь чем-нибудь новым. В какой-то момент я решил записывать результаты своих увлечений и размышления их сопровождающие. Так и появились заметки в этом блоге -- возможность поделиться с другими людьми тем, что я узнал. Обратите внимание на меню в верхней части - там всё отсортировано по хронологическому порядку, ключевым словам и темам. Кнопки можно использовать, чтобы подписаться и не потерять связь."

[[params.socialIcons]]
name = "Telegram"
url = "https://t.me/+dTTjGWhxwjU5NTc6"

[[params.socialIcons]]
name = "Email"
url = "mailto:breakss+blog@yandex.ru"

[[params.socialIcons]]
name = "RSS"
url = "/index.xml"

[[params.author]]
email = "breakss+blog@yandex.ru"

[taxonomies]
category = 'categories'
tag = 'tags'

[[menu.main]]
identifier = "archives"
name = "Все посты"
url = "/archives/"
weight = 10

[[menu.main]]
identifier = "Tags"
name = "Теги"
url = "/tags/"
weight = 20

[[menu.main]]
identifier = "categories"
name = "Интересы"
url = "/categories/"
weight = 30

favicon

Фавиконы сгенерировал на сайте https://favicon.io/

Результат генерации положил в папку

\static

конкретно положил вот эти версии

apple-touch-icon.png
favicon.ico
favicon-16x16.png
favicon-32x32.png
site.webmanifest - этот файл пока не знаю зачем

Больше деталей здесь

CSS-стили дизайна темы

находятся здесь

>\themes\PaperMod\assets\css\core\themevars.css

Вставка счетчика метрики

в PaperMod есть специальный параметр, в который можно вставить номер счетчика от разных аналитических систем. Я вставил туда номер счетчика от Яндекса, но Яндекс меня не видел.

hugo.toml:

[params.analytics.yandex]
SiteVerificationTag = "99954298"

Поэтому я пошёл в настройки счётчика своего в Яндексе, скопировал его код и вставил его после этих строк

{{- if site.Params.analytics.yandex.SiteVerificationTag }}
<meta name="yandex-verification" content="{{ site.Params.analytics.yandex.SiteVerificationTag }}">

Теперь все html-страницы стали генерироваться с необходимым кодом в head-разделе.

Hugo версия#

Подправить тему PaperMod#

Правильная вставка ссылок и картинок#

Переименовывать залинкованные файлы картинок#

Оптимизация картинок#

Ширина текста#

Счетчик яндекс.метрики#

Ошибка timeout при генерации сайта#

Меню верхнее#

VS Code настройка#

Оглавление#

Подсветка кода#

Комментарии в конце поста#

Сделать, чтобы шапка в новых постах была по шаблону#

hugo.toml выглядит так#

favicon#

CSS-стили дизайна темы#

Вставка счетчика метрики#