静的サイトジェネレータHugoが良いらしいと噂を聞いたので試してみました。良さそうなら今WordPressで動かしている自分のブログをHugoにしてしまいたいなと思って。

インストール

$ brew install hugo

Macでhomebrew使ってる人ならこれだけでok。

サイトを作る

適当なディレクトリに移動して下記のコマンドを実行。「my_site」は好きな名前でok。

$ hugo new site my_site

するとmy_siteディレクトリが作られてその中にhugoのファイル一式が入ってます。作成したディレクトリ内で

$ hugo server

と、打つとhugoのサーバが起動。「localhost:1313」で立ち上がったページを見ることができます。ただし、今は何のファイルもないのでページを見てもまっしろしろすけ。

ポストを作ってみる

$ hugo new post/welcome.md

で、contentディレクトリの中にpostディレクトリとwelcome.mdという記事の雛形となるファイルが生成されます。

エディタで「welcome.md」を開いてdraftの行を削除。

+++
date = "2016-09-29T23:01:24+09:00"
title = "welcome"

+++

の下に適当に本文を追加。

 +++
date = "2016-09-29T23:01:24+09:00"
title = "welcome"

+++
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

これで記事の準備ok。

最初、draftのところを削除しないとファイルが出力されないことに気づかなくて結構ハマった。

テーマを適用してみる

せっかくだからテーマも使ってみましょう。そんなに数は多くないけど公式で幾つかテーマを紹介しているのでその中からhugo-zenを使ってみることにします。

my_siteの直下にいる状態のターミナルで下記のコマンドを実行。

$ git clone https://github.com/rakuishi/hugo-zen.git themes/hugo-zen

するとthemeディレクトリの中にhugo-zenが入ってるはずです。

config.tomlファイルを開いてファイルの最下部に↓を追記。

theme = "hugo-zen"

$ hugo
$ hugo server

とやればhttp://localhost:1313/でいい感じに出来上がったサイトが表示されるはず。

参考