1. Top
  2. tech
  3. このhugoブログ構成について

このhugoブログ構成について

Publish date:
Tags:
hugo
Photo by Sigmund on Unsplash

このブログの構成について書いてみる。

構成

hugoについて

個人的に以下の観点で構成を考えた。

あたりを満たせるちょうどよいのがhugoだったのでhugoにしてみた。今の所良さそうな雰囲気。

つまずきポイント

いくつかつまずきポイントがあった。

ローカル環境

もともとhomebrewでnodebrewを入れていたが、個別でnodeのversionを固定したいとこがあり、nodenvへの変更をした。 .node-version もリポジトリに入れてしまうことで対応。

公開時にSCSSでエラー

実際に公開しようとGitHub Actionsを設定して公開しようとしたら以下エラーが発生してhugo buildに失敗。

error: failed to transform resource: TOCSS: failed to transform

hugoでSASS/SCSSを利用する場合、extendedバイナリを利用する必要がある。 GitHub Actionsで peaceiris/actions-hugo を使用してhugo環境セットアップをしていた。extendedバイナリを利用する場合、extended オプションが必要だった(default: false)。以下のように明示的に指定することで解決。

- name: Setup Hugo
  uses: peaceiris/actions-hugo@v2
  with:
    hugo-version: '0.83.0'
    extended: true

OG情報

デフォルトのOG画像とかfaviconどうしようかなと思ったが、ここに時間をかけてしまうとずっとできないままになってしまう。 Hatchfulというロゴとか作ってくれるサービスを使って雑に作った。

faviconはFavicon.ico & App Icon Generatorを利用。linkタグも作ってくれるので便利。

誰かに作ってもらうのもよいかもしれない。続いたら考える。

コンテンツ階層

これはとても悩んだ。最初カテゴリとタグを作ろうと意気込んでhugoの設定やテーマのカスタマイズをしていた。 ふとカテゴリとタグに入るものを整理したところ、カテゴリは必要ないことに気がついた。

勢いで作っていたけど、やはり情報設計大事だと改めて思う。hugo的にも管理しやすい構成である必要もあったので、以下の画像管理にも関わってくるのでドキュメントをいろいろ調べた結果 Page Bundles にたどり着く。

画像管理

データ移行のしやすさを考慮して画像管理がしたい。このブログに飽きたときに移行させたい。

雑然と画像フォルダに画像を入れてコンテンツに掲載する形だと、画像フォルダが大変なことになる。 かと言って、コンテンツごとにフォルダを作成する運用だと毎回コンテンツに画像パスを書きこまないといけなくてだるい。 よい感じに画像をコンテンツに関連させて管理したい。

そこでたどり着いたのが Page Bundles での管理方法。

以下のような階層構造のことを Page Bundles と呼び、 _index.md ファイルがある階層を Branch Bundles、 index.md ファイルがある階層を Leaf Bundles と呼ぶ。以下のような階層にした。

content
├── articles
│   ├── _index.md
│   ├── first-post
│   │   ├── index.md
│   │   └── image1.jpg
│   └── xxxx
│       ├── index.md
│       └── image2.jpg
...

こうすることで、index.mdには画像名そのままで画像を掲載でき、かつhugo的にも画像をPage Resourceとして扱え、Image Processingでリサイズなどの加工が行えるようになる。画像最適化ができかつ画像管理的にも楽になるのでPage Bundles方式での管理にした。

Zone Apex

取得できるドメインをまず探して決めてから作り始めたドメイン駆動。 gorou.style そのまま公開する想定で作業を進めていざ公開というタイミングで、GitHub PagesのCNAMEが設定できないことに気がつく。

設定できる方法がありそうではあるが、そこまでこだわりはなかったのでwwwありでの公開にした。 GitHub Pages設定でInvalidDNSErrorがでており、Zone Apexの設定をしなければいけない雰囲気なのだけど解決方法がまだ分かっていない。

まとめ

もうちょっと気軽にかける仕組みを模索したい。

参考URL