はじめに
Hugo
のテーマをJane
からStack
に変えたのでメモ書き
環境
Windows 11 Professional
Hugo-extended v0.131.0
WSL2 Ubuntu 24.04 LTS
Docker Desktop 4.34.2 (167172)
テーマ変更に関連する作業
まずは、Stack
のテーマのGetting Started
を行う。
https://stack.jimmycai.com/guide/getting-started
Stackのテーマをgit submoduleで入れる
ルートディレクトリで下記を実行し、テーマを入れる。
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
これに伴い、.gitmodule
の jane
を削除しておく。
-[submodule "themes/jane"]
- path = themes/jane
- url = https://github.com/xianmin/hugo-theme-jane.git
config.yamlを変更する
exampleSite/hugo.yaml
をコピーしてきて config/_default/config.yaml
とする。
サイトのURL/タイトルの変更
-baseurl: https://example.com/
+baseurl: https://blog.k-bushi.com/
- title: Example Site
+ title: かつおぶしのブログ
-copyright: Example Person
+copyright: kbushi
-DefaultContentLanguage: en
+DefaultContentLanguage: ja
- hasCJKLanguage:false
+ hasCJKLanguage:true
hasCJKLanguage
は https://maku77.github.io/p/rqcwgyj/#google_vignette を参照して、true
にした。
日本語の文字数を正しくカウントしてくれるようだ。
言語の変更
-languageCode: en-us
+languageCode: ja-JP
languages
に関しては、en
, zh-cn
, ar
を消して、ja
のみにした。
多言語対応する場合は、残しておいてよい。
自分のブログは、多言語対応できていないので ja
のみとした。
+languages:
+ ja:
+ languageName: 日本語
+ title: かつおぶしのブログ
+ weight: 1
+ params:
+ description: 技術ブログ
GoogleAnalyticsの設定
googleAnalytics
のid
に設定する。
services:
googleAnalytics:
+ id: G-XXXXXXXX
ページネーションの設定
1ページにどれくらいの記事を表示するかの設定
pagination:
- pagerSize: 3
+ pagerSize: 5
記事のURLのパス設定
Jane
で使っていたURLのパスと同じ(Hugo
のデフォルト)にしたいので、下記のように設定した。
permalinks:
- post: /p/:slug/
+# post: # postのURLはコンテンツのディレクトリの階層として自動で生成させる
page: /:slug/
これによって、ディレクトリの階層をもとにURLが生成されるのでこうした。
ブログのプロフィール設定
ブログの左上にあるプロフィールやアバター画像とかの設定
params:
...
sidebar:
- emoji: 🍥
+ emoji:
- subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ subtitle: やったことの備忘録をまとめたり
avatar:
enabled: true
- local: true
+ local: false
- src: img/avatar.png
+ src: /images/avatar.png
ブログのコメントの設定
コメントは利用していないので、false
にした。
comments:
- enabled: true
+ enabled: false
ウィジェットの設定
右にあるウィジェットの設定
タグクラウドを表示したいので追加した。
widgets:
homepage:
- type: search
- type: archives
params:
limit: 5
- type: categories
params:
limit: 10
- type: tag-cloud
params:
limit: 10
page:
- type: toc
- type: categories
params:
limit: 10
+ - type: tag-cloud
+ params:
+ limit: 10
OGPの設定
Twitter
のIDを入力した。
opengraph:
twitter:
- site:
+ site: katsuobushiFPGA
card: summary_large_image
ダークモード/ライトモードの設定
ダークモード、ライトモードが選べるが、ダークモードにすると一部の mermaid
形式の図がまともに見えないので、ライトモードだけにした。
このあたり改善出来たら、この機能をONにするかも。
colorScheme:
# Display toggle
- toggle: true
+ toggle: false
# Available values: auto, light, dark
- default: auto
+ default: light
カスタムメニュー設定
左に表示される、カスタムメニューを追加した。Home
を表示させたいので、下記のように設定
menu:
- main: []
+ main:
+ - identifier: home
+ name: Home
+ url: /
+ weight: -100
+ params:
+ icon: home
+ newTab: false
ソーシャルリンク設定
ソーシャルネットワークサービスのリンク設定
social:
- identifier: github
name: GitHub
- url: https://github.com/CaiJimmy/hugo-theme-stack
+ url: https://github.com/katsuobushiFPGA
params:
icon: brand-github
- identifier: twitter
name: Twitter
- url: https://twitter.com
+ url: https://twitter.com/KatsuoBushiFPGA
params:
icon: brand-twitter
コードのハイライト設定
コードに行番号を表示させたくないので修正した。
markup:
...
highlight:
noClasses: false
codeFences: true
guessSyntax: true
lineNoStart: 1
- lineNos: true
+ lineNos: false
- lineNumbersInTable: true
+ lineNumbersInTable: false
tabWidth: 4
pageの作成
exampleSite
を見ると、ディレクトリ構造が少し変わっているのでちょっと修正した。
content
以下に、直接.md
ファイルを置いていたのだが、content/page
以下に固定ページを置くようなので、ここに入れた。
content
├── page
│ ├── about
│ │ └── index.md
│ ├── archives
│ │ └── index.md
│ ├── search
│ │ └── index.md
│ ├── tag-cloud
│ │ └── index.md
│ └── watch-list
│ └── index.md
exampleSite
にある、index.md
をそのまま持ってきているので中身は以下になっている。
---
title: "Archives"
date: 2019-05-28
layout: "archives"
slug: "archives"
menu:
main:
weight: -70
params:
icon: archives
---
OGPについて修正
Stack
ではどうやらOGP
を自動で設定してくれるらしいが、Jane
の時に使っていたOGP
画像を生成してそれを使う仕組みを使いたいので修正する。
layouts/_internal/opengraph.html
をlayouts/partials/head/opengraph/include.html
にパスを変更した。include.html
は以下のようになっている。
<!-- General -->
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}" />
<meta property="og:site_name" content="{{ .Site.Title }}" />
<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ with .Description -}}{{ . }}{{ else -}}{{ if .IsPage }}{{ substr .Summary 0 300 }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
<meta property="og:image" content='
{{ if .Params.thumbnail -}}
{{ .Params.thumbnail|absURL }}
{{- else if and .File (hasPrefix .File.Path "post") -}}
{{ path.Join "tcard" (print .File.BaseFileName ".png") | absURL }}
{{ else -}}
{{ "images/card.png" | absURL }}
{{ end -}}
' />
static/tcard/xxxx.png
に生成されたOGP用の画像があるのでこれを参照するようになっている。
詳しくは、
HugoでOGPとXのカード設定を行うを参照。
フォントの修正
layoyts/partials/head/custom.html
を作成して、下記のように設定
Noto Sans JP
を使うようにした。
<style>
:root {
--ja-g-font-family: 'Noto Sans JP', '游ゴシック', '游ゴシック Medium',
'Yu Gothic Medium', '游ゴシック体', 'Yu Gothic', YuGothic,
'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo';
--article-font-family: var(--ja-g-font-family), var(--base-font-family);
--base-font-family: var(--ja-g-font-family), 'Lato', var(--sys-font-family),
var(--zh-font-family), sans-serif;
--code-font-family: 'Ricty Diminished', Menlo, Monaco, Consolas,
'Courier New', monospace;
--article-line-height: 1.9;
}
</style>
<script>
(function () {
const customFont = document.createElement('link');
customFont.href =
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap';
customFont.type = 'text/css';
customFont.rel = 'stylesheet';
document.head.appendChild(customFont);
})();
</script>
解決したいこと
- CloudflareのDNSのCNAMEレコードに
netlify
のホスト名を指定しているが、Cloudflareのプロキシを経由すると、ちらつきが発生する。
参考
Hugo Stackテーマのカスタマイズ
https://notes.nakurei.com/post/customize-stack-theme/Hugo × Cloudflareで簡単ブログ構築
https://zenn.dev/seita1996/articles/hugo-markdown-blog非エンジニアの初心者がHugo(テーマStack)+GitHub Pagesでブログを開設するまで
https://miiitomi.github.io/p/hugo/Pelican から Hugo への移行検討
https://hugo.ainoniwa.net/p/2022-10-31/Code block render hooks
https://gohugo.io/render-hooks/code-blocks/
おわりに
Hugo
のテーマをJane
からStack
に変えたので備忘録として記載した。Jane
の最新のバージョンで思った以上に変わってしまっていたので他にいいテーマを探した結果Stack
にした。
古い記事のFront matter
がJane
の時のままなので、ちょこちょこ直していきたい。