Hugoでサンプルサイトを参考にして自分のサイト作成する

こんにちはnasustです。

今回はHugo Bootstrapテーマのサンプルサイトを参考にして自分のサイト作成を解説します。

サンプルサイトの解説

前回の記事で、テーマを適用させて、 最初の記事を作成しました。

今回は、このテーマの中にあるサンプルサイトから、自分のサイト作成で最初に設定する手順を解説します。

config.tomlの概要を説明

まずはじめに、confg.tomlを説明します。このファイルはウェブサイトの設定を記述します。

Hugo Bootstrapに同伴されているサンプルサイトのconfig.tomlの一部を説明します。

分かりやすくする為、各項目は概要を述べる程度で説明します。 詳細な内容は別の記事で解説します。

baseurl = "https://example.com/"
title = "Bootstrap demo"
languageCode = "en-us"
defaultContentLanguage = "en"

[taxonomies]
    tag = "tags"
    category = "categories"
[permalinks]
    post = "/:year/:month/:title/"
[params]
    author = "John Doe"
toml

baseurl

baseurlはサイトのトップのURLをしています。

例としてhttps://xxxx.com や https://yyyy.com/blog などです。

例えば、前回作成したfirst_entry.mdのURLであれば、 https://xxxx.com/first_entry/ 、 https://yyyy.com/blog/first_entry とのようにbaseurlに従いURLが設定されます。

title

サイトのタイトルを指定します。

languageCode

サイトの言語を指定します。

defaultContentLanguage

Markdownのビルド時のデフォルトの言語を指定します。

Hugoは多言語化対応しています。

サンプルの設定の場合で前回作成したfirst_entry.mdは、 http://xxxx.com/first_entry というURLでビルドされます。

このページは、暗黙的にenの言語のページであると指定された事になります。

category と tags

[taxonomies]
    tag = "tags"
    category = "categories"
toml

ブログでお馴染みの単語ですね。

Markdownで以下のように記述することで、カテゴリーとタグを設定できます。

---
title: "first entry"
date: 2019-06-06T16:54:14+09:00
draft: true
tags = [ "general", "hugo" ]
categories = [ "sample" ]
---
markdown

taxonomiesとは分類という意味です。 サンプルのconfig.toml場合はtagsとcategoriesの分類を定義しています。

Hugoのマニュアルでは、この定義は

単数形 = 複数形

でなければならない、と説明されていますが シンプルに

ユニークな値 = 項目名

と考えたほうが分かりやすいです。 マニュアルのように設定しなければ不具合あるという訳ではありません。

[permalinks]
  post = "/:year/:month/:title/"
toml

こちらはリンクのフォーマットを設定しています。

postというのはセクションです。 セクションとは contentディレクトリ以下にディレクトリを作成することで、 構造を定義できます。記事はその構造に合わせて配置されます。

例: content/hoge/entry.md → https://xxxx.com/hoge/entry/

そして、この構造をpermalinksの設定で変更できます。

このconfig.tomlの場合は、https://xxxx.com/2019/06/entry/ となります。

params

[params]
    author = "John Doe"
toml

HugoのMarkdownは自由に情報を付加できます。

例えば、

---
title: "first entry"
date: 2019-06-06T16:54:14+09:00
draft: true
tags = [ "general", "hugo" ]
categories = [ "sample" ]
author = "Tarou"
---
markdown

authorというパラメーターに”Tarou”と設定しています。 テンプレートはauthorの値を読み取って執筆者の名前を表示します。

config.tomlはMarkdownにパラメーター設定されて無い場合の デフォルトの値を設定しています。

warningWarning
authorパラメーターは、このテーマが独自に読み取っているので、 他のテーマでも同じように表示するとは限りません。

サンプルサイトのconfig.tomlを参考に自分のサイトを設定します。

自分のサイトのconfig.tomlを設定する

自分のサイトであるhugoblogのconfig.tomlを設定します。

baseURL = "https://hugoblog.com/"
defaultContentLanguage = "ja"
languageCode = "ja-JP"
hasCJKLanguage = true
title = "サンプルブログ"

theme = "hugo-bootstrap"

[menu]
    [[menu.main]]
        identifier = ""
        name = "Home"
        url = "/"
        weight = 1
    [[menu.main]]
        url = "/about/"
        name = "About"
        weight = 2
    [[menu.main]]
        url = "/contact/"
        name = "Contact"
        weight = 3

[permalinks]
    post = "/:year/:month/:title/"

[params]
    author = "太郎"
toml

上記のように設定しました。いくつか新しい設定が現れたので解説します。

hasCJKLanguage = trueは日本語を扱う場合に設定します。 設定しなければ、文章の要約が変になります。

[menu]
    [[menu.main]]
        identifier = ""
        name = "Home"
        url = "/"
        weight = 1
    [[menu.main]]
        url = "/about/"
        name = "About"
        weight = 2
    [[menu.main]]
        url = "/contact/"
        name = "Contact"
        weight = 3
toml

menuは、グローバルメニューの設定をしています。

theme = "hugo-bootstrap"は、ウェブサイトのテーマを指定しています。以前の記事では-tオプションで、 テーマを指定していましが、config.tomlに設定することで、デフォルトのテーマがhugo-bootstrapになります。

サンプルサイトの記事を自分のサイトにコピーして動作を解説

使用しているテーマにはサンプル用の記事があります。 それを利用して、Hugoの動作を解説します。

/hugoblog/themes/hugo-bootstrap/exampleSite/contentの中身を/hugoblog/contentにコピーします。そしてhugo server -Dで動作させて http://localhost:1313/ をブラウザで表示して下さい。

上記のようにウェブページが表示されます。

トップページには、postディレクトリの作成順で記事の要約が表示されています。 ブログなどでよくあるパターンですね。

グローバルヘッダーのAboutはcountent/about.md、Contactはcontent/contact.mdの記事にリンクされています。 このように単一のページもできます。

Creating a New Themeのリンクをクリックしてください。

ページのURLが http://localhost:1313/2014/09/Creating-a-New-Theme/ になっています。 config.tomlのpermalinksの設定が反映されています。 この記事の文章は、content/post/creating-a-new-theme.mdとなります。

permalinksの設定が無い場合のURLは http://localhost:1313/post/Creating-a-New-Theme/ になります。

記事の作成

このサイトにブログの記事を追加します。

hugo new post/sample_entry.mdを実行して記事を追加します。 この記事の内容は以下の通りです。

---
title: "サンプルの記事のタイトル"
date: 2019-06-07T18:39:17+09:00
draft: false
---

サンプルの記事です。
markdown

赤枠で囲まれた部分に記事が追加されています。

作成した記事は一番新しいですが、 このテーマでは新しい順以外で、優先して上に表示する方法があるようです。

新しく作成した記事のリンクをクリックして移動します。

上記のようにページが表示されます。

最後に

Hugoでのウェブサイト作成の様子が分かりましたでしょうか。 次回は、テンプレート作成について解説します。

prevnext