Hugoで自分のサイト作成する

こんにちはnasustです。

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

サイト作成で最初に設定する手順を解説します。

config.tomlの概要を説明

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

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

簡単にHugoのサイトを始められるように設定したスターターキットからconfig.tomlをコピペしたものです。

スターターキットはHugoのディレクトリの設定や基本的な設定をしたものです。ダウンロードするだけで始められるようにしています。

baseURL = "https://example.jp/"
title = "Hugo Blog Starter kit"
defaultContentLanguage = "ja"
languageCode = "ja-jp"
disablePathToLower = true
hasCJKLanguage = true
pluralizeListTitles = false
pygmentsUseClasses = true
pygmentsCodefences = true
theme = "basic-design-personal-blog"

[outputs]
    page = [ "HTML" , "AMP"  ]
    
[Params]
    profile_image = "images/blank-profile.png"
    eyecatch = "images/eyecache.jpg"
    author = "hugo blog"

[taxonomies]
    tag = "tags"

[permalinks]
    post = "/:section/:year/:month/:filename"

[blackfriday]
    hrefTargetBlank = true
    nofollowLinks = true
    extensionsmask = ["autolink"]

[menu]
    [[menu.global_header]]
        name = "Home"
        url = "/"
        weight = 1
    [[menu.global_header]]
        name = "Blog"
        url = "/post"
        weight = 2

baseurl

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

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

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

title

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

defaultContentLanguage

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

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

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

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

languageCode

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

disablePathToLower

自動的にURLが小文字に変換される機能のを有効/無効にします。

hasCJKLanguage

日本語を有効にします。 設定しなければ、文章の要約が変になります。

pluralizeListTitles

アーカイブページなどのリストのタイトルを複数形にする機能を有効/無効にします。

pygmentsUseClasses

シンタックスハイライトの機能の有効/無効にします。

pygmentsCodefences

シンタックスハイライトのCSSの読み込みを設定します。

theme

テーマを指定します。

tags

[taxonomies]
    tag = "tags"

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

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

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

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

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

単数形 = 複数形

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

ユニークな値 = 項目名

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

[permalinks]
    post = "/:section/:year/:month/:filename"

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

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

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

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

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

params

[Params]
    profile_image = "images/blank-profile.png"
    eyecatch = "images/eyecache.jpg"
    author = "hugo blog"

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

例えば、

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

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

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

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

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

blackfriday

[blackfriday]
    hrefTargetBlank = true
    nofollowLinks = true
    extensionsmask = ["autolink"]

HugoのMarkdownをHtml変換するblackfridayの設定です。

[menu]
    [[menu.global_header]]
        name = "Home"
        url = "/"
        weight = 1
    [[menu.global_header]]
        name = "Blog"
        url = "/post"
        weight = 2

グローバルヘッダーのメニューの設定です。

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

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

baseURL = "https://hugoblog.jp/"
title = "サンプルブログ"
defaultContentLanguage = "ja"
languageCode = "ja-jp"
disablePathToLower = true
hasCJKLanguage = true
pluralizeListTitles = false
pygmentsUseClasses = true
pygmentsCodefences = true
theme = "basic-design-personal-blog"

[outputs]
    page = [ "HTML" , "AMP"  ]
    
[Params]
    profile_image = "images/blank-profile.png"
    eyecatch = "images/eyecache.jpg"
    author = "hugo blog"

[taxonomies]
    tag = "tags"

[permalinks]
    post = "/:section/:year/:month/:filename"

[blackfriday]
    hrefTargetBlank = true
    nofollowLinks = true
    extensionsmask = ["autolink"]

[menu]
    [[menu.global_header]]
        name = "Home"
        url = "/"
        weight = 1
    [[menu.global_header]]
        name = "Blog"
        url = "/post"
        weight = 2

上記のように設定しました。

baseURLとtitleを変更しました。後は記事を書くことでサイトの運営が出来ます。

iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker