静的サイト回帰へのムーブメントに乗っかるために WordPress から Hugo に移行しました。以下参考文献。

WordPress の Plugin に依存していた記述が壊れたりいくつかの情報が失われたりしていますが気が向いたら直す予定。

Hugo とは

Hugo は、Jekyll などと同じいわゆる静的サイトの構築ツールの1つです。Go 言語でできています。

環境

環境は以下のとおりです。

Amazon CloudFront で SNI 用 独自ドメインSSL証明書が無料で利用できます。

S3 RoutingRules に関する注意点

CroudFront + S3 の RoutingRules を有効にする際、Origin Domain Name を Static Website Hosting の Endpoint に指定しないとリダイレクトが動作しないのは既知です。

既知だったのですが、今回 Origin Path を /www に指定していたため若干はまりました。

/2016/ham/egg//blog/2016/ham/egg/ にリダイレクトさせる設定は以下のとおりです。

<RoutingRules>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals>www/2016/</KeyPrefixEquals>
        </Condition>
        <Redirect>
            <HostName>librabuch.jp</HostName>
            <ReplaceKeyPrefixWith>blog/2016/</ReplaceKeyPrefixWith>
            <HttpRedirectCode>301</HttpRedirectCode>
        </Redirect>
    </RoutingRule>
</RoutingRules>

KeyPrefixEqualswww/ を付与すれば意図した動作をします。

テーマ作成中

Hugo は自作テーマをそこそこ簡単に作成できます。現在テーマ「Material Hugo」を作成中です。現在(2016-03-26時点)のこのページが作成中の「Material Hugo」です。

「Material Hugo」を適応するとどんな感じになるか以下に示します。

Go 言語の Syntax Highlight です。

import fmt

def main() {
    fmt.Println('hoge')
}

Python の Syntax Highlight です。

import re

def my_func():
    pattern = re.compile("^abc")

    if pattern.match("abcdef"):
        print("ok")
  • 箇条書きです
  • 箇条書き二つ目

これは段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です

これは段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です

  1. 順序付きリストです
  2. 順序付きリストの二つ目

強調(strong) 注意(em) 次はインラインコードです print('ham')

テーブルです。

header 1 header 2 header 3
body 1 body 2 body 2
body 1 body 2 body 2

これは引用文です

ここまで引用文です

もう少しテーマらしくなったら Github で公開します。

所感

冷静に考えると個人ブログに問い合わせフォームとかの動的要素なんて要らなかったんだ感がすごいですね。

ブログ構築ツールの覇権を Movable Type と WordPress で争っていた時代が懐かしく思い出されます。いまは Static Web 2.0 って感じでしょうか。