こんにちは、 @hokumaです。

いろいろあって、ブログ始めました。

初回としては、Hugoを使って、このブログを世間様に公開するまでにしたことを記事にしてみます。

Hugoとは

静的サイトのGenerator。Go製。他のGeneratorを使い込んだことがないので比較できませんが、 サイト生成が早い、というのが今の所理解できている特徴の一つです。

Install

私はmacを使っているので、brewでinstallします。

brew update & brew install hugo

記事生成

コマンドを使います。

hugo new blog/writing-blog-with-hugo.md

blog部分はカテゴリみたいなもの、という理解ですが、正確なところはこれからです。 writing-blog-with-hugo.mdが記事名となります。

コマンドを実行すると、`ブログのルート/content/post/writing-blog-with-hugo.md'というファイルが 生成されます。

ファイルを見ると、

+++
date = "2016-06-26T21:19:57+09:00"
draft = true
title = "writing blog with hugo"

+++

となっています。dateは生成された日付、draftは記事の状態、titleはファイル名から自動的に生成されたタイトルです。 Title部分は内容に合わせて変えましょう。

Preview

ここまで書いたら、記事をpreviewするためにサーバを起動します。

hugo server

動的に記事を生成してくれるサーバが立ち上がるので、http://localhost:1313/ にアクセスしてみましょう。

ページアクセスはできても、真っ白の画面になります。

hugoは、デフォルトではdraft状態の記事を生成しないからです。

draft状態の記事をプレビューするには、以下のコマンドで起動します。

hugo server --buildDrafts

残念。これでもダメです。

あともう一つ必要なものがあります。

それは、themeです。

Theme選択

Themeはサイトデザインを決定するcssやhtmlファイル群です。

自分で作成することもできますが、https://themes.gohugo.io/ に既成のものがあるので、今回はその中からcactusを使うことにしました。

hugo newで雛形を作っているのであれば、themesフォルダがルートにあるはずです。。そこに移動しましょう。

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

config.tomlの中身は、とりあえずこんな感じにしました。 適宜自分のサイトの情報に置き換えてください。

baseurl = 'http://blog.hokuma.net/'
languageCode = 'ja'
hasCJKLanguage = true
theme = 'hugo-cactus-theme'
title = "hokuma's blog"

[params]
name = 'hokuma'
description = ''
bio = 'Web Engineer'
twitter = 'halhide'
enableRss = true
iconFont = 'mono-social'
socialIconStyle = 'circle'

[social]
twitter = 'https://twitter.com/halhide'
github = 'https://github.com/hokuma'

profile画像を変えるには、static/images/avatar.pngに表示したい画像ファイルを置いてください。retina対応の為に、static/images/avatar@2x.pngも必要となります。

hugo server -buildDrafts

公開

記事の状態をpublicにします。ファイル内のdraftをtrueに直接編集しても良いですが、以下のコマンドでも可能です。

hugo undraft content/blog/writing-blog-with-hugo.md

静的サイトの生成

wordpress等と違い、hugoはあくまで静的サイトのgeneratorです。Amazon S3などにおいてインターネットに公開するには、themeが当たった状態の静的なhtmlファイル群を生成する必要があります。

そのためのコマンドは以下です。

hugo

実行するとpublicフォルダが生成されます。フォルダの中身をS3に置くなり、github pageで公開するなりなんなりしてください。

以下、生成物です。 http://blog.hokuma.net

S3のブログ用のbucketを向いたCNAMEを設定して運用しています。