Hugo で画像を含んだ新規投稿

2023年11月17日 04:05

Hugo での新規投稿、画像を含んだ投稿について書いた。

実際に Hugo でブログを運用していくなかで、その使い方がさらに分かったのでまとめておく。

環境：Hugo（heyo テーマ）

僕は画像を含む投稿では１投稿ごとにディレクトリを作るが、画像を含まない投稿ではディレクトリを作らないことにしている。

だから画像を含まない投稿の場合、以下のコマンドで新規投稿を追加している。

$ hugo new post/2023/2023-11-13_sample-post.md

こうすることで、/content/post/2023/2023-11-13_sample-post.md が作成されるので、それを編集すればいい。ファイル名に日付を入れることでディレクトリ内が時系列に整理されるようにしているわけだ。

では画像を含む投稿でディレクトリを作りたい場合はどうすればいいか。以下のコマンドを実行する。

$ hugo new post/2023/2023-11-13_sample-post/index.md

これで以下のようなディレクトリおよび index.md が作成される。

content
└── post
    └── 2023
        └── 2023-11-13_sample-post
            └── index.md

僕は画像ファイルを以下のような感じで 2023-11-13_sample-post ディレクトリに置く。

content
└── post
    └── 2023
        └── 2023-11-13_sample-post
            ├── index.md
            └── sample.jpg

画像を表示するには、冒頭のリンクではルートからパスをしていするように書いていたが、実際はそのまま画像ファイル名を指定すればいいので簡単だ。

<img src="image.jpg" width="100%">

参考：
Hugoでpermalinksを設定しているときの画像URLの不具合と修正方法 | 反面教師あり学習
https://blog.eqseqs.work/2021/05/15/133033/

Hugo で画像ファイルを Markdown ファイルと同じディレクトリに置く (Page Bundle) - まくまく Hugo ノート
https://maku77.github.io/p/9n8p6n4/

[Hugo]Hugoを使いこなすためのオススメファイル構造 - CPX
https://cpx.business/articles/file-structure-for-mastering-hugo/

いいなと思ったら応援しよう！