私が使用しているテーマは PaperMod です。本記事ではそれを例にします。
すべてのパスは相対パスを使用する必要があります（先頭のスラッシュを付けないでください）！
目次#
記事ページに目次を表示する場合は、以下の設定に注意してください：
params:
showToc: true # グローバルに目次を表示
tocopen: true # グローバル目次を展開（目次はデフォルトで折りたたまれたリスト）
多言語#
ここでの設定は問題が発生しやすいです。私のように多言語ブログを好む場合は、以下の設定に注意してください：
defaultContentLanguage: zh-cn
defaultContentLanguageInSubdir: true
defaultContentLanguage: zh-cn
- ウェブサイトのデフォルト言語を簡体字中国語に設定
- Hugo が生成する URL 構造に影響
- デフォルトコンテンツの言語識別子を決定
上記の設定は変更しないでください、デフォルト言語を変更する必要がある場合を除いて。
defaultContentLanguageInSubdir: true
- デフォルト言語コンテンツがサブディレクトリに配置されるかどうかを制御
- true: デフォルト生成パスは zh-cn/posts/
- false: デフォルト生成パスは posts/
例：
# defaultContentLanguageInSubdir: true の場合
public/
├── zh-cn/ # デフォルト言語（中国語）コンテンツ
│ └── posts/
└── en/ # その他の言語コンテンツ
└── posts/
# defaultContentLanguageInSubdir: false の場合
public/
├── posts/ # デフォルト言語（中国語）コンテンツ
└── en/ # その他の言語コンテンツ
└── posts/
多言語コンテンツディレクトリを設定する必要があります：
languages:
zh-cn:
languageName: "簡体中文"
contentDir: "content/zh-cn" # content/<lang>
# ... 多言語設定が必要な設定はここに書くことができます
en:
languageName: "English"
contentDir: "content/en"
# ...
多言語設定の下で、search.md と archive.md の有効パスは：
content/
├── zh-cn/
│ ├── posts/
│ ├── search.zh-cn.md # search.<lang>.md
│ └── archive.md
└── en/
├── posts/
├── search.en.md
└── archive.md
上記の二つの URL は hugo.yaml で一般的な設定を維持すれば大丈夫です：
languages:
zh-cn:
menu:
main:
- identifier: "search"
name: "検索"
url: "search"
weight: 1
- identifier: "archives"
name: "アーカイブ"
url: "archives"
weight: 2
検索#
検索機能をサポートするためには、hugo.yaml で以下の設定を行う必要があります：
outputs:
home:
- HTML
- RSS
- JSON # JSON は検索をサポートするための重要な要素
フォント#
私は英語に Ubuntu Mono、中文に HarmonyOS Sans SC、コードに JetBrains Mono を使用したいので、以下の設定を行いました。
新しく themes/PaperMod/assets/css/extended/fonts.css を作成：
@import url('https://cdn.jsdelivr.net/npm/ubuntu-mono/css/ubuntu-mono.min.css?display=swap');
@import url('https://cdn.jsdelivr.net/npm/harmonyos-sans-font/css/harmonyos-sans.min.css?display=swap');
@import url('https://cdn.jsdelivr.net/npm/jetbrains-mono/css/jetbrains-mono.min.css?display=swap');
body {
font-family: "Ubuntu Mono", "HarmonyOS Sans SC", sans-serif;
}
code, pre {
font-family: "JetBrains Mono", monospace;
}
コードブロックの背景色#
デフォルトのコードブロックの背景色は明るさが非常に低い（非常に黒い）ので、少し変更しました。
themes/PaperMod/assets/css/common/post-single.css の 206 行目で、--code-block-bg 変数がコードブロックの背景色を決定しています：
.post-content pre code {
display: grid;
margin: auto 0;
padding: 10px;
color: rgb(213, 213, 214);
background: var(--code-block-bg) !important;
border-radius: var(--radius);
overflow-x: auto;
word-break: break-all;
}
全体を検索したところ、themes/PaperMod/assets/css/core/theme-vars.css にこの変数が二箇所宣言されていることがわかりました：
:root {
...
--code-block-bg: rgb(43, 43, 43);
...
}
.dark {
...
--code-block-bg: rgb(43, 43, 43);
...
}
これをすべて rgb(43, 43, 43) に変更すれば大丈夫です。
コメント#
私は Giscus を使用しています。これは GitHub Discussions を利用したコメントシステムです。
以下を確認してください：
- ブログリポジトリは公開されている必要があります。そうでないと、訪問者は Discussions を見ることができません。
- giscus アプリがインストールされている必要があります。そうでないと、訪問者はコメントや応答を行うことができません。
- Discussions 機能がリポジトリで有効化されている必要があります。
その後、Giscus ウェブサイトにアクセスし、要求に従って設定を行ってください。
設定が完了すると、「giscus を有効にする」というタイトルの下に以下のような内容が表示されます：
<script src="https://giscus.app/client.js"
data-repo="[ここにリポジトリを入力]"
data-repo-id="[ここにリポジトリ ID を入力]"
data-category="[ここにカテゴリ名を入力]"
data-category-id="[ここにカテゴリ ID を入力]"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
crossorigin="anonymous"
async>
</script>
新しく layouts/partials/comments.html を作成し、得られた <script> タグをコピーして貼り付けます。
hugo.yaml でコメントを有効にしていることを確認してください：
params:
comments: true
プッシュ#
hugo -D コマンドを実行すると、Hugo は public ディレクトリに静的ブログを構築します。毎回構築前に一般的に public を削除して、新しい構築内容に問題がないことを確認します。
この場合、私は静的ブログのみをリポジトリにデプロイしたいので、Hugo フレームワーク全体ではなく、シェルスクリプトを書きました：
@echo off
hugo -D
cd public
git init
git remote add origin git@github.com:<user>/<repo>.git
git checkout -b main
git fetch
git add -A
git commit -m "temp"
git reset --soft origin/main
git commit -m "update %date%"
git push
cd ..
メンテナンスが不便だったので、同じリポジトリ内にソースブランチとデプロイブランチを別々に作成する方法に変更しました。そこで：
# メインリポジトリに public ブランチを作成
git checkout --orphan public
git reset --hard
git commit --allow-empty -m "Init public branch"
git push origin public
git checkout main
# public ディレクトリを public ブランチに関連付け
git worktree add -B public public origin/public
# ウェブサイトを生成してプッシュ
hugo -D
cd public
git add -A
git commit -m "Push %date%"
git push origin public
cd ..
Cloudflare Pages の CI/CD を組み合わせることで、スクリプト一つでワンクリックで更新をプッシュできます。
hugo.yaml に baseURL を設定しないでください。これにより、すべてのデプロイされたユニークなプレビュー URL が baseURL にリダイレクトされます。
hugo.yaml の例#
これは私が使用している hugo.yaml です。