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

tech 2349字：読了まで約4分21秒

Hugo アイキャッチ画像

前回は膨大なHTMLをmarkdownファイルに変換し、体裁を整えました。 今回はこれを基にサイトを作っていきます。

HugoのPage Bundles

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

C:\NEWSITE\SITENAME
├─archetypes
├─assets
├─content ☆
├─data
├─layouts
├─public
├─static
└─themes

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

Branch bandles
./content/* 以下にあるディレクトリ（セクション）で _index.mdを持つ。_index.mdがない場合もデフォルトでこちらが設定される。ディレクトリを通常のセクション（区切り）として扱える。同じフォルダ内に_index.md以外のコンテンツ（post01.md、sample.mdなど）を持つことができ、下層ディレクトリに多層化もできる。
Leaf bandles
公式ドキュメントには「leaf means it has no children」とある。その通り子要素をもたないディレクトリ。コンテンツとしては、index.mdのみをもつ。 このディレクトリの中に参照したい画像などのリソースをまとめておけば、./static/* にリソースをまとめて別の場所から参照するという手間をかけずに、ファイル名を記事内にそのまま書けばいいので、直感的なファイル管理が可能になる。index.mdのフロントマターにheadless = trueを追記すると、公開処理されないHeadless Bundleとなる。staticフォルダを用いずに他の記事からリソースを参照するディレクトリとして機能する。

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

わかりやすいように前章で作業したkagachi01.md(小説ファイル。Brench bundle)と./post/index.md(我が家の猫アルバム。Leaf bundle)を作ってみます。

C:\NEWSITE\SITENAME
│  config.toml ★
├─archetypes
│      default.md
├─assets
├─content ☆
│  ├─novel *Branch bundle
│  │      m_d_p01-1.md
│  └─cats *Leaf bundle
│          index.md
│          karin01.jpg
│          karin02.jpg
│          karin03.jpg
│          （以下画像ファイル）
├─data
├─layouts
├─public
├─static
└─themes ★

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

テーマ設定

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

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

テーマのダウンロード[Hugo-themeDL.jpg(114518byte)]

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

theme = 'Mainroad'

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

cd C:\NEWSITE\SITENAME
hugo server

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

プレビューした仮サイト1[hugo-preview1.jpg(231113byte)]

http://localhost:1313/cats/に接続するとLeaf Bundleのページも表示されます。

プレビューした仮サイト2[hugo-preview2.jpg(64087byte)]

プレビューを停止するには コマンドプロンプトでCtrl + cを押します。 テーマごとにhugo.tomlなどに独自の設定パラメータがあるのでreadmeファイルを確認してください。

作業用batファイルの作成

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

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

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

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

サイト公開までの段取り

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

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

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

関連記事