Github PagesのサイトをHugo化する

github.ioに配備する静的サイトはこれまでhtml直書きでしたが、もっと手軽にリッチなサイトを作りたいと思ったので、静的サイトジェネレータを使ってみることに。
Jekyllも考えてましたが、ぐぐったらテーマ変更がしんどいとかビルドが長いとかマイナス意見が多かったのでHugoを採用。

主な採択理由

• goでビルドが高速
• homebrewで入る
• テーマが豊富

導入

$ brew install hugo
$ hugo new site [任意dir]

テーマ選び

ここに色々とあります。
https://themes.gohugo.io/

色々テーマをあさっていてかっこいいと思ったもの。 themes.gohugo.io themes.gohugo.io themes.gohugo.io themes.gohugo.io

見た目が一番リッチだと思ったCreativeにしてみる。
git cloneでthemesディレクトリに配備。

$ cd themes/
$ git clone https://github.com/digitalcraftsman/hugo-creative-theme

config.tomlを修正

baseURL = "https://tshohe.github.io"
languageCode = "jp-ja"
title = "tshohe's website tsts"
theme = "hugo-creative-theme"
googleAnalytics = ""

[params]
    name = "tshohe"
    description = "IT Engineer (SRE)"
    favicon = "favicon.ico"

    # Navigation
    [params.navigation]
        brand = "tshohe's WebSite"

        [params.navigation.links]　#（リンクテキストを変更可能）
            about     = "About"
            services  = "Services"
            portfolio = "Portfolio"
            contact   = "Contact"


    # Hero section（ジャンボトロンにデカデカと出る文字とか）
    [params.hero]
        slogan     = "TSTS"
        subtitle   = "This site is for introduce my blog and portfolio."
        buttonText = "Find out more"


    # About section
    [params.about]
        headline    = "About me"
        description = "I'm now working as a SRE in Tokyo.  [はてなブログ](//tsts.hatenablog.com/)"


    # Service section（サービス欄に表示するもの）
    [params.services]
        headline = "My services"

        [[params.services.list]]
            icon = "fa-cloud"
            title = "Memorizer"
            description = "Web Application to enhance memory. [Go to this service](//memorizer/lp.html)"

            ....

    # Portfolio modals（モーダルに表示する項目）
    [params.portfolio.modal]
        client = "Client"
        date = "Date"
        category = "Category"
        buttonText = "Close"

    # Aside section （ダウンロードButtonとか表示できる、製品ページに使うならダウンロードボタンとかに良さそう）
#   [params.aside]
#       headline = "Get the Creative Theme for Hugo"
#
#       [params.aside.button]
#           text = "Download now"
#           link = "//github.com/digitalcraftsman/hugo-creative-theme"

    # Contact section
    [params.contact]
        （問い合わせ先情報）

Serviceでは下記のアイコンを色々指定できる模様。　　 fontawesome.com

あとは hugo コマンドでビルドして~.github.ioに配備するだけ。

しかしなぜかServiceのdescriptionでは [text](url) が効いていない。
themesを確認してみたらmarkdownifyが無かったのでMarkdownとして処理されていなかった。

$ vi themes/hugo-creative-theme/layouts/partials/services.html 
-{{ with .description }}
+{{ with .description | markdownify }}

無事リンクにできました。