前回までの準備が終わると、具体的にサイトが作れるようになります。構築を開始するまえに、Hugoがどのように動作しているかを整理します。Hugoのサイト構築の流れHugoでサイトを作る場合、「layouts」(=HTML)で画面構成をつくり「content」(=markdown)に記事をつくる2段構成になります。Jekyllなどとも似た構成なのであまり迷うことはないと思います。WordPressで例えるとlayoutsがデザインテーマ、contentがそれぞれのブログ記事になります。実際にはCSSやJavaScriptも使いたいと思いますので、それらのファイルは「static」フォルダに入れておき、layouts内で参照します。index.htmlにHTMLを記述してください。これがトップページになります。このindex.htmlのみ特殊でcontentのmarkdownを使用せず、そのままHTMLが構成されてpublicフォルダには入ります。Hugo!</h1>Hugoで作ったホームページです。Inc.</body></html>上記のようなHTMLをつくりますが、header部やfooter部など、サイト全体の共通部分を部品化します。partials」フォルダ内に作成します。site_footer.htmlという各部品にした場合、下記のようになります。Inc.</body></html>これらを使用したindex.htmlは以下になります。}}Hugoで作ったホームページです。}}上記ファイルを用意したら、hugoコマンドでサイトを生成します。hugopublicフォルダにindex.htmlが出来上がっているので確認してみてください。各ページで同じような記述をする部分で使えば、省力化できます。_default」フォルダ内に作成します。single.htmlを作成し、トップページ同様HTMLを記述します。2で作ったpartialを使います。}}は、記事の本文を挿入してくれます。記事をつくってみるレイアウトができたら記事が必要ですね。簡単な記事をマークダウンで作ってみます。"テスト記事「象」"+++象のたまごはおいしいぞう。}}に入るのは、「象のたまごはおいしいぞう。+++で包まれた部分については3-3で説明します。上記ファイルを用意したら、hugoコマンドでサイトを生成します。hugopublic/test/index.htmlが出力されているので内容を確認してください。single.htmlのレイアウトにtest.mdの記事内容が挿入されていれば成功です。Matterの活用)partialでも記事の内容を使うことができます。機能を生かすためにもsite_header.htmlを少し書き換えてみます。+++で包んだ行があり、Titleが指定されています。Matterと言い、マークダウンでよく使われます。MatterのTitleで指定された文字列が自動的に挿入されます。各ページのタイトルを変えられるので便利です。hugoコマンドでサイトを再生成します。hugopublicフォルダを確認します。該当のHTMLでページのタイトルが変化していれば成功です。