最近はQiitaに投稿していたけど、プログラミングに関係ない記事も自由に書ける場所がほしくなったので、 前から気になっていたHugoとS3の組み合わせでブログを作ってみた。 GitHub PagesとJekyllの組み合わせで同様の事をしていた時期もあったのだけど、 記事生成が遅かったり環境構築がめんどくさかったりで使わなくなってしまったのだ。 今回はどうだろうか。
参考リンク集
- Hugo :: A fast and modern static website engine
- gizak/nofancy(今回つかったテーマ)
- Hugo + S3環境に移行した（インストール編） - fixture.jp
環境構築
Hugoのインストール
ここ(Releases · spf13/hugo)からバイナリをダウンロードすればいいのだけど、 自分の場合はGoの開発環境があるので、go getで取得してきた。 本来は開発者向けの方法なので良い子は真似しない方がいいかも。
$ go get -u -v github.com/spf13/hugo
ブログ用プロジェクトの作成
# 作業用ディレクトリに移動。どこでも好きなところで。
$ cd $GOPATH/src/sudix.jp
# プロジェクト作成。これだと"blog"という名のディレクトリができる。
# blogじゃなくても好きな名前にすればいい。
$ hugo new site blog
# できたプロジェクトをgit管理する。これもお好みで。
$ cd blog
$ git init .
テーマ集のインストール
テーマ集(spf13/hugoThemes)があるので、インストールしておく。 ここでは全て取得しているので結構時間がかかるが、好きなものを一つずつ入れてもいい。 テーマ集のインストールは先に作成したプロジェクトディレクトリ内に行うので注意。
# プロジェクトディレクトリ内に移動
$ cd $GOPATH/src/sudix.jp/blog
# テーマ集のインストール
git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes
テスト記事と動作確認
記事ファイルの生成
記事のスケルトンを生成してくれる機能があるので、それで作ってみる。 ファイルはcontentディレクトリ内に生成される。
$ hugo new hugo_test.md
/Users/tom/src/sudix.jp/blog/content/hugo_test.md created
記事の編集
生成されたファイルを開いて、適当に内容を追加してみる。 “+++“で囲まれた部分はメタ情報部分なので、その下にマークダウン記法で書く。
hugo_test.md
+++
categories = ["misc"]
date = "2015-11-25T22:12:21+09:00"
title = "hugo_test"
+++
# Hugoでブログ
初めてのHugo記事。
確認用サーバの起動
ローカルでの確認用のサーバがついている。 Go製だけあって素晴らしく起動が速い。
$ hugo server --buildDrafts --theme=nofancy
指定しているオプションの説明は以下。
- –buildDrafts : 記事内のメタ情報に”draft = true”が指定されていてもhtmlを生成する。
- –theme=nofancy : テーマ設定。好きなものを指定すればいい。
記事の確認
http://localhost:1313/hugo_test/にアクセスして、 記事が表示されていれば成功。
テスト記事はもう必要ないので消しておく。
$ rm content/hugo_test.md
テーマを決める
以降の設定などはテーマによって変わってくるので、先にどのテーマを使うか決める。
ここでテーマのスクリンショットが見られる。
以後、ここでは”nofancy”というテーマを使うことにする。
設定
プロジェクトディレクトリ内に”config.toml”というファイルがあるので、 それを開き設定を書いていく。設定例は以下となる。 (ちなみにtomlは設定記述用の言語。)
baseurl = "http://XXXXX/"
languageCode = "ja"
title = "XXXXX"
theme = "nofancy"
[permalinks]
# パーマリンクの設定。この形式で各記事のURLが生成される。
# :slugは各記事内のメタ情報内で指定できる。
post = "/posts/:year/:month/:slug/"
[params]
# nofancyは最初からコードハイライト機能が準備されているので、
# ハイライトに使うテーマを指定する。
highlight="monokai"
[author]
name = XXXXX
# nofancyは以下のSNSのIDを登録しておくと、フッタにリンクを生成してくれる。
twitter = XXXXXX
github = XXXXX
linkedin = XXXXX
# Google Analytics用のID。
gaID = XXXXX
記事作製
記事用ディレクトリ生成
nofancyや多くのテーマでは、content/post内のファイルを記事と見なすらしいので、 ディレクトリを作製しておく。
$ mkdir content/post
記事ファイルの生成
スケルトンを生成する。前に作った場合とは異なり、 “post/“をファイル名の先につけておく。
$ hugo new post/hello_world.md
/Users/tom/src/sudix.jp/blog/content/post/hello_world.md created
生成されたファイルは以下のような内容。
+++
categories = ["misc"]
date = "2015-11-25T23:00:00+09:00"
title = "hello_world"
+++
記事ファイルの編集
以下のように記事を編集してみる。
+++
date = "2015-11-25T23:00:00+09:00"
title = "こんにちは世界！"
slug = "hello_world"
tags = [ "hugo", "blog" ]
isCJKLanguage = true
draft = true
+++
## こんにちは世界！
```go
package main
import "fmt"
func main() {
fmt.Println("Hello, world!")
}
```
動作確認
http://localhost:1313/にアクセスし、 一覧のタイトル名をクリックして記事が表示されればOK。コード部分もハイライトされているはず。 動かない場合はサーバが起動されていることか確認すること。
静的ファイル出力
記事ができたらアップロード用のhtmlファイルを出力を行う。 hugoコマンドを実行するだけだが、現在の記事はドラフト状態(draft = true)なので、 そのままではhtmlファイルが生成されない。 記事内のメタ情報部分を編集してもいいが、ドラフト状態解除用コマンドがあるので、その方が便利。
ドラフト状態の解除
hugo undraftで行う。
$ hugo undraft content/post/hello_world.md
htmlファイルの出力
$ hugo
ファイルの確認
$ ls -l public/posts/2015/11/hello_world
これでindex.htmlができていれば成功。
S3へのアップロードと公開
ここからはHugoはあまり関係なくS3での公開サイト作りなので簡単に。
- S3に公開したいドメイン(ここなら”blog.sudix.jp”)と同名のバケットを作る。
- 作製したバケットのポリシーを一般に公開できるものに変えておく。
- バケットにpublic配下のファイルを全てアップロードする。
- Route53でバケットに対してAレコードを追加し、AliasでS3を選ぶ。
これで公開できるはず。
アップロードは毎回ブラウザで行うのも辛いので、aws cliを入れて
$ aws s3 sync ./public s3://yourbucket_name --delete --profile default --region ap-northeast-1
みたいにコマンドで実行可能だけど、参考リンクにもあるHugo + S3環境に移行した（インストール編） - fixture.jp にあるsync.shをそのまま使わせていただいている。
最初はCloudFrontと連携させて爆速ブログじゃい！とか考えていたけど、 日本語でしか書かないから世界中からアクセスされるでもなし、キャッシュの事を考えるのも面倒なのでやめておいた。 そのうち気が向いたらやるかもしれないけど。
感想
何もかもが高速なのでとにかく気軽に書ける。Jekyllの時はもっともっさりしていた覚えがある。 できたものをS3に上げるだけなのもお手軽だ。 まあより注目してもらいたいならHatenaブログやQiitaに書いたほうがいいんだろうけど、 「自由だああああ！！」という気はする。