ノート

Hugoでwebサイト構築(2) サイト全体の設定'config.toml'

1. サイト全体の設定項目を記述する

今回からHugoでのサイト構築にあたって具体的な機能について1つずつあたっていきます。 はじめは、サイト全体通して用いるパラメータを記述するconfig.toml(あるいはyaml,json)についてです。 config.tomlは、Hugoサイトのルートフォルダ直下に置きます。


Hugoでwebサイト構築(1) レイアウトことはじめ

1. Hugoでサイト構築を始める

前々回前回までの準備が終わると、具体的にサイトが作れるようになります。 構築を開始するまえに、Hugoがどのように動作しているかを整理します。

1-1. Hugoのサイト構築の流れ

Hugoでサイトを作る場合、「layouts」(=HTML)で画面構成をつくり「content」(=markdown)に記事をつくる2段構成になります。 Jekyllなどとも似た構成なのであまり迷うことはないと思います。WordPressで例えるとlayoutsがデザインテーマ、contentがそれぞれのブログ記事になります。 実際にはCSSやJavaScriptも使いたいと思いますので、それらのファイルは「static」フォルダに入れておき、layouts内で参照します。


Hugoのフォルダ構成

1. Hugoのフォルダのしくみ

Hugoは決まったフォルダにリソースを入れることで動作します。 利用環境はHugo0.14です。

1-1. フォルダの基本構成

初期の基本構成を以下に示します。


静的サイトジェネレータHugoの導入

1. Hugo導入のいきさつ

今回、このWebを作るにあたって静的WebジェネレータのHugoを使っています。 Joomla,Modx,WordPressなどいくつかCMSを試したのち、原点回帰して静的Webに落ち着きました。 PHP+DBのシステムは本件ではオーバースペックであると判断したためです。 とはいえ、すべてHTML手入力もつらいので静的Webジェネレータにしよう、どうせだしMarkdownにしよう、ということでHugoに白羽の矢を立てました。