テーマを使ったサイト構築

Hugo では、記事部分とレイアウト(デザイン)部分を別々に定義します。 デザイン部分にあたるテーマがネット上に公開されているので気に入ったテーマをインストールし、サイトを構築することができます。ここでは、テーマを使用しますがデザインを自分で作成することもできます。

テーマのインストール

Hugo Themes に公開されているテーマの中から、好みのテーマをダウンロードします。

ここでは、 Paper というテーマ をダウンロードして使ってみます。

Hugo のテーマは、 themes ディレクトリの下にテーマ別のディレクトリを作って保存します。 themes ディレクトリには、複数のテーマを用意しておくことができテーマを簡単に切り替えることができます。 テーマは、 GitHub で配布されているため Git がインストールされている環境の場合、次のように GitHub から取得してインストールすることができます。

c:\hugo> cd themes
c:\hugo> git clone https://github.com/nanxiaobei/hugo-paper

themes/hugo-paper というディレクトリが作成されればインストール完了です。 次に、このテーマを使用するよう サイトの設定ファイル config.toml に次の行を追加してます。

theme = "hugo-paper"

これでテーマの設定は完了です。

動作確認

使い方は、別途まとめていきたいと思いますが hugo には Web サーバとしての機能も実装されているので次のコマンドを起動してインストールしたテーマを確認します。

c:\hugo> cd sites/hoge_site
c:\hugo> hugo server --watch

ブラウザーから http://localhost:1313/ へアクセスすることでインストールしたテーマが適用されていることを確認することができます。