Hugo を使った個人サイトの作り方 3 ディレクトリ構造とthemeの導入

前回は膨大なHTMLをmarkdownファイルに変換し、体裁を整えました。

今回はこれらのコンテンツを基にサイトを作っていきます。

Hugoのこの類のスタートアップ記事は山ほどあるのですが、gitを使わずにシンプルに構築していくことにします。

新しいサイトを作成

PowerShell を開き、サイトを作成したい場所に移動します。 ここでは例として C:\hugo-sites\ に作成します。

1# サイトを作成したいフォルダに移動
2cd C:\hugo-sites\
3
4# 新しいサイトを作成（ここでは "mysite" という名前）
5hugo new site mysite
6
7# 作成されたサイトのフォルダに移動
8cd mysite

すると以下のようにファイル、フォルダが作成されます。☆がついているのは今回の解説で触れるフォルダです。他は高度なので、触りません。

C:\hugo-sites\mysite\
│  hugo.toml　※設定ファイル
│
├─archetypes
│      default.md
│
├─assets
├─content　☆
├─data
├─i18n
├─layouts
├─static　☆
└─themes　☆

HugoのPage Bundles

コンテンツの中身となるmarkdown ファイルですが、./content/以下に置きます。

./content/がサイトのルートになるようにフォルダ構成を切っていきます。 ブログ専用のテーマなどはcontent/post/* が標準にしているものもあるらしいです。 注意点として、 Branch bundlesとLeaf bundles という考えがあります。

Branch bundles

./content/* 以下にあるディレクトリ（セクション）で _index.mdを持つ。_index.mdがない場合もデフォルトでこちらが設定される。ディレクトリを通常のセクション（区切り）として扱える。同じフォルダ内に_index.md以外のコンテンツ（post01.md、sample.mdなど）を持つことができ、下層ディレクトリに多層化もできる。

Leaf bundles

公式ドキュメントには「leaf means it has no children」とある。その通り子要素をもたないディレクトリ。コンテンツとしては、index.mdのみをもつ。 記事の名前を`index.md`として、参照したい画像のリソースも同じフォルダにまとめておけば、./static/* にリソースをまとめて別の場所から参照するという手間をかけずに、ファイル名を記事内にそのまま書けばいいので、直感的なファイル管理が可能になる。

私は多階層でコンテンツを管理したいので、だいたいBranch bundlesを使います。間違ってLeaf bundlesに設定したことで下位フォルダがビルトされず数時間はまったので最初の段階で理解できるようここに書いておきます。

さて、./content/cats/index.md(我が家の猫アルバム)を作ってみましょう。

hugo new /cats/index.md

このコマンドを打つと、次の位置にindex.mdが生成されます。 Leaf Bundleとなっているので、中に画像を置き、マークダウンファイルを書きます。

C:\hugo-sites\mysite\
│  hugo.toml ★
├─archetypes
│      default.md
├─assets
├─content ☆
│  └─cats *leaf bundle
│          index.md
│          mouri01.jpg
│          karin02.jpg
│          tora03.jpg
│          （以下画像ファイル）
├─data
├─layouts
├─public
├─static
└─themes ☆

そしてこのファイルをサイトとして表示するために、Hugo Themesから好みのテーマを選びます。

テーマ設定

今後、テーマはすべて自作するのですが、参考にもできるのでMainroad | Hugo Themesを選んでみました。

テーマはGithubで公開されています。Gitなど使わず直接DLする場合はCode > Download Zip を選びます。

アーカイブをDL後./themes/にコピーします。フォルダの名前が「Mainroad-master」になってますが、「Mainroad」にリネーム。

選んだテーマを適用します。 hugo.toml(Ver.0.110.0より前は「config.toml」）をエディタで開き、テーマのフォルダ名を書き込みます。

theme = 'Mainroad'

今回はGitを使わないために、このようにある意味力業でテーマを適応しています。

テーマのアップデートは手動で行う必要がありますが、Gitの知識がなくても始めることができます。

準備ができたら、作業フォルダに移動し、以下のコマンドを実行します。

cd C:\hugo-sites\mysite\
hugo server -D

ローカルでサイトの確認ができるようになりました！ 変更があるたびにライブリロードされるので、便利です。
ブラウザでhttp://localhost:1313/cats/に接続するとサイトが表示されているはずです。

プレビューを停止するには コマンドプロンプトでCtrl + cを押します。

hugo.tomlにはテーマごとに独自の設定パラメータがあるのでreadmeファイルを確認してください。

作業用batファイルの作成

しかし、サイト作業のたびにいちいちpowershellを起動するのはさすがに面倒です。コマンドをまとめた作業用バッチファイルを作ってしまうのをおすすめします。

適当なファイルに以下のように書いて、hugo_start_server.batの名で保存します。

オプションなどは hugo server を参照してみてください。

cd 作業フォルダのパス
hugo server -D --ignoreCache --noHTTPCache --disableFastRender --buildFuture --openBrowser
cmd /k

あとはこのファイルを実行するだけでローカルサーバー構築→ライブプレビューまでの作業を自動化できます。

サイト公開までの段取り

続けての作業の大まかな流れです。

1. 今まで作った小説のmdファイルを、サイトの構造どおりにディレクトリを切って/content以下に移動しておきます。
2. 画像ファイルやCSS、スクリプトなどのリソースも/static/にコピーしておきましょう。hugo コマンドを実行してHTMLファイルを生成する際、ディレクトリ構造などを保持して./public/にコピーされます。
3. 公開するにはコマンドプロンプトでプロジェクトフォルダに移動し、hugo コマンドを実行してHTMLファイルを生成します。
4. ビルドが終わったら生成された./public/* 以下のファイルをすべてサーバーにアップロードします。

人によってはこれでサイト作成は終了でしょう。 次回はテーマの自作とホームページの作成を扱います。