exampleSiteのローカルサーバ起動やビルドを1行で実行する

Hugoのテーマ作成時、テーマのリポジトリ内にexampleSiteを配置した状態で、以下を実現する方法を探しました。

  • テーマ開発時、リポジトリ構成のまま動作確認(hugo serverを実行)できるようにする
  • exampleSiteを使って、Netlifyへデモサイトをビルド・デプロイする
  • 公式テーマリストへの登録要件を満たすリポジトリ構成

解決したい問題

Hugoのテーマを公開する際、hugoBasicExampleの構成がテーマに合わない場合は、サンプルをexampleSiteとして含める必要があります。

以下、exampleSiteを入れたリポジトリの例としてInkblottyを使用します。 https://github.com/tosi29/inkblotty

このテーマ(Inkblotty)を例にすると、Hugoでサイトを構築する場合は以下のような構成を作ることになります。

root/
 ├ themes/
 │ └ inkblotty/
 │  └ ...
 ├ content/
 │ └ post/
 │  └ ...
 ├ config.toml
 └ ...

この構成では、roothugohugo serverを実行することでビルドやローカルサーバ起動ができます。

一方、テーマのリポジトリは以下の構成を取ります。

inkblotty/
 ├ exampleSite/
 │ ├ content/
 │ │ └ post/
 │ │  └ ...
 │ └ config.toml
 └ ...

ここでexampleSite以下の構成は前述のroot以下に対応しており、このままではhugohugo serverを正しく実行することができません。
しかし動作確認用のローカルサーバ起動や、ビルド・デプロイのためにディレクトリ構成を変更するのもイマイチなので、手軽に実行する方法を探しました。

exampleSiteでテーマの動作確認を行う方法

テーマのルートディレクトリ(前述の例ではinkblotty)で、以下のように記事やコンフィグファイルを指定して実行すればOKです。

hugo server -c ./exampleSite/content/ --config ./exampleSite/config.toml
これでテーマの開発中にも容易にhugo serverが実行できるようになります。

exampleSiteをビルドする方法

同様に、exampleSiteをビルドしたい場合は、以下を実行すればOKです。

hugo -c ./exampleSite/content/ --config ./exampleSite/config.toml --baseURL https://hugo-theme-inkblotty.netlify.com/

baseURLにはデプロイ先のURLを指定しており、今回はNetlifyを指定しています。
これは./exampleSite/config.tomlの中ではbaseURL = "https://example.com/"を指定する必要がある1ため、その設定を上書きしています。

これならNetlifyでビルドコマンドを記述する際も一行で指定できるので、デモサイトを容易に公開できるようになります。

所感

実はやや諦め気味だったのですが、hugo helpを実行して試行錯誤したらさくっと解決しました。
終わってみればhugoのオプションを指定しただけだったので、公式情報を読む重要性を再認識しました。

HugoとNetlifyはとても相性がよいので、今後このサイトも移行しても良さそうかなーと思ってます。


  1. こちらの手順に書かれています ↩︎

関連記事


  1. HugoテンプレートをOGPやTwitter Cardsに対応する
  2. Hugoはじめました
  3. Hugoのテーマ "Inkblotty" をリリースしました
  4. クエリパラメータを使ってお手軽にGitHubのプルリクを作成する
  5. 他の人には読めない形式でGitHubのSecretsの値を読み出す
  6. GitHub Actionsでプルリクのコメントに複数行テキストを投稿する
  7. GitHub Actionsでエラーの時だけ特定の処理を実行する

comments powered by Disqus