当ブログのチートシート
自分が参照するためのもの。
ブログの構成
blog_root/ <-- ルートディレクトリ（プロジェクトルート）
├── .git/
├── archetypes/
│ └── default.md <-- 新規記事作成時のフロントマター（TOML）テンプレート
├── assets/ <-- テーマのCSSやJSなどを拡張・カスタマイズする領域(未使用)
├── content/ <-- 記事の原稿置き場
│ ├── _index.md <-- トップページ（ホーム）の文面やメタデータを制御するファイル
│ ├── posts/ <-- postsカテゴリー（ブログ部分）
│ │ ├── example/ <-- 記事フォルダ（ページバンドル）
│ │ │ ├── index.md <-- 記事本文（ draft: false で公開 ）
│ │ │ └── example.png <-- 記事内の画像（ファイル名で直接指定 ）
│ └── diary/ <-- diaryカテゴリー（日常・雑記部分）
│ └── _index.md <-- カテゴリ内の記事一覧ページを制御するファイル(現在はdiaryカテゴリにのみ配置している)
├── data/ <-- サイト全体で使い回すデータ（TOML/YAML/JSONなど）(未使用)
├── i18n/ <-- 多言語対応（翻訳ファイル）が必要な場合に使うフォルダ(未使用)
├── layouts/ <-- サイトのデザイン・HTML骨組みを上書き（オーバーライド）する領域
├── static/ <-- ファビコンや全ページ共通の静的ファイル置き場(未使用)
├── themes/
│ └── hugo-blog-awesome/ <-- 適用中のテーマ（正式なGitサブモジュールとして連動）
├── .gitignore
├── .gitmodules <-- テーマを外部リポジトリと紐付けるサブモジュール設定
└── hugo.toml <-- サイト名やメニュー設定を行う、ブログ全体の心臓部ファイル（TOML形式）
ほとんどGeminiが描いてくれた。
テーマについて
他人が作成したテーマのリポジトリを、themesの下にサブモジュールとして登録している。
そのため、テーマを編集するときはこれを直接編集するのではなく、編集したい箇所の対象ファイルをlayoutsの下に、全く同じ階層を再現してコピー&ペーストしてから、そのファイルを編集する。ビルドの際にはthemesよりもlayoutsに書いてあることが優先される。
もしthemesの中身を編集してしまった場合、編集が反映されないばかりかビルドの永続的なエラーに繋がる(らしい)。
また、サブモジュールとしてテーマを導入しているため、リモートのリポジトリ上ではthemesは空であり、新しい環境などでクローンをする際にはgit clone --recursive <リポジトリのURL>と --recursiveオプションを付ける必要がある。
画像を貼る
記事フォルダ内に貼りたい画像を配置する。
そのまま貼る
Shiftを押しながらドラッグして画像をVSCodeにコピーしたときに自動で生成されたままにするとき。(テーマの仕様で、このとき設定したALTテキストは実際には表示されない)
画像の下に文章を入れる
Hugoのショートコードを使用。
{{< figure src="example.png" caption="任意の文字列" title="任意の文字列(こっちはあまり使わないかも)" >}}
動画を埋め込む
HTMLタグを使用。
<video src="example.mp4" controls width="100%"></video>
記事にサムネイル画像を設定する
フロントマターに次のパラメータを記述。
テーマ的には記事一覧にサムネイルが表示されることはないが、SNSに共有した際には表示される。
images = ["(カテゴリフォルダ)/(記事フォルダ)/example.png"]
ハイパーリンク
ブログ内のページ
[任意の文字列]({{< relref "(content以下の相対パス)" >}})
外部サイト
[任意の文字列](https://example.com)