以前は はてなブログ を使っていたのですが、今年の４月に就職してデジタルマーケティングの会社に入ったので、 3rd party javascript やタグマネージャーの勉強することもままあり、 CAMPHOR- Advent Calendar に参加する前に、タグを好きに追加できるブログをはじめてみようとなりました。
Markdown で書ける静的ジェネレーターなら、正直なんでも良かったのですが、 使っている人がそこそこいる(静的ジェネレーターの GitHub の star 数ランキングで割と上位だった)、 気に入ったテーマがあった、かつ 普段触らない言語 go を触る良い機会になるかもと思ったこと 等を理由に Hugo を使うことにしました。
簡単な使い方
Hugo を使うと hugo new site <name> というコマンドでサイトの雛形を作る事ができます。
Hugo自体は go get -u -v github.com/spf13/hugo や brew install hugo でインストールできます。
$ hugo new site test-blog
$ tree test-blog
test-blog
├── archetypes
├── config.toml
├── content
├── data
├── layouts
└── static
5 directories, 1 file
テーマは hugoThemes というレポジトリにたくさんまとめてあります。
これらを利用するにはまず theme ディレクトリを作成しクローンしてきます。
そのあと気に入ったテーマを -t で指定し hugo を実行すると public フォルダに静的コンテンツが作成されます。
$ cd test-blog
$ git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes
$ hugo -t angels-ladder
新しい投稿を作成する場合は hugo new post/<file name>.md でマークダウン引用の雛形を作成することができます。
また hugo server -t angels-ladder -w でローカルにサーバを建てることによって、エディターで編集したファイルをブラウザで確認しながら作業する事ができます。
$ hugo new post/hello-world.md
$ hugo server -t angels-ladder -w
# Edit post/hello-world.md by some editors
個人的なレポジトリ構成
Hugo によって作成された静的コンテンツは GitHub Pages を利用して管理し、 雛形の方は theme も含めて BitBucket のプライベートレポジトリで管理しています。 これで Github Pages のレポジトリには静的なマークアップのコードだけになり、 マークダウンのファイルや自分用に少し変更したテーマなどはBidBucketで管理することができます。
Github での静的コンテンツのレポジトリ管理
$ cd test-blog/public
$ git init
$ git remote add origin git@github.com:<username>/<username>.github.io.git
$ git add --all & git commit -m "Initial commit"
$ git push --all
BidBucket での マークダウン&Hugoテーマ のレポジトリ管理
$ cd test-blog
$ git init
$ echo public >> .gitignore
$ git remote add origin git@bidbucket.org:<username>/hugo-blog.git
$ git add --all & git commit -m "Initial commit"
$ git push origin --all
Special Thanks
今回参考にさせていただいたサイト
・https://github.com/spf13/Hugo
本家レポジトリ。ドキュメントもしっかりしていて、わかりやすい！
・ http://tanksuzuki.com/post/hugo-github-pages-1/
とても丁寧に解説されていたので大変重宝しました。テーマも使わせて頂きました！ありがとうございます！