HugoとGitHub Pagesで始めるブログ生活：前編
このブログはHugoという静的サイトジェネレーターを使っていて生成されたものを、GitHub Pagesを使ってホスティングしている。
もしかしたら弟が同じ構成でやるかもしれないので、最低限の使い方について書き記す。
Hugoでブログを作る
まずは Hugo について。
調べれば手順などはすぐに出てくるので困らないと思うけれど、一応簡単に書いておく。
最初にHugo自体をインストールする。Macであれば Homebrew からインストールできる。
$ brew install hugo
$ hugo version
#=> Hugo Static Site Generator v0.26 darwin/amd64 BuildDate: 2017-08-08T17:23:01+09:00
Hugo が入ったら下記のコマンドでサイトを作る。
名前はなんでもいいのでとりあえず適当にblogとしておく。
$ hugo new site blog
これでほぼできたも同然。 Hugo は確認用サーバーを立てる機能があるので、それで確認してみる。
$ cd blog
$ hugo server
# Started building sites ...
# Built site for language en:
# 0 draft content
# 0 future content
# 0 expired content
# 0 regular pages created
# 6 other pages created
# 0 non-page files copied
# 0 paginator pages created
# 0 categories created
# 0 tags created
# total in 3 ms
# Watching for changes in /Users/tanaka/tmp/sites/blog/{data,content,layouts,static}
# Serving pages from memory
# Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
# Press Ctrl+C to stop
ただしこの状態でブラウザでアクセスしても真っ白。なぜなら Hugo ではテーマと呼ばれるものを使ってhtmlやらが生成されるのだけれど、デフォルトではテーマがない状態。なので使用するテーマを選ぶ必要がある。
テーマを選ぶ
Hugo の公式サイトにテーマ一覧のページがあるので基本的にはそこから選ぶことになると思う。
この公式サイトに上がってないけれど、作ったテーマを GitHub などで公開してる人もたくさんいるっぽいのでググって探しても良い。もちろんテーマを自作しても良い。
今回は僕がテーマを自作する前まで使っていたHugo Zenを使ってみる。
$ git clone https://github.com/rakuishi/hugo-zen.git themes/hugo-zen
これでテーマを手に入れたので、サーバーを立ち上げてみる。
$ hugo server -t hugo-zen
これでブラウザで http://localhost:1313 にアクセスすれば記事などが無い空の状態のブログが見れるはず。
ブログの情報を変更する
次にブログの情報を変更する。
プロジェクトのルートにある config.toml にブログの情報が書かれているのでそこを書き換える。
デフォルトでは下記の項目が書かれている。
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
configに書く必要がある項目はテーマによったりするので、使っているテーマの GitHub やらを確認してほしい。
rakuishi/hugo-zen: Hugo Zen is a minimal hugo theme.
自分のブログに合った情報を記載できたらおしまい。
記事を書く
Hugo では Markdown で記事を書く。下記のコマンドで雛形となる Markdown ファイルを生成する。
$ hugo new post/hellow_world.md
すると下記のようなファイルが生成される。
---
title: "Hello_world"
date: 2017-08-26T00:48:26+09:00
draft: true
---
--- の間の情報は記事の meta 情報。他にも slag 、 tags や description とか色々使えるのでそのうちカスタマイズしたくなったら調べてみるとよい。
記事の本文は下の --- 以降に書く。こんな感じ。
---
title: "Hello_world"
date: 2017-08-26T00:48:26+09:00
draft: true
---
はろー、わーるど！
記事がかけたら確認用サーバーを立ち上げる。
$ hugo server -t hugo-zen -w -D
-w オプションは --watch の略で、記事書いてるときに autoreload してくれるので便利:)。まぁつけなくても良いけど。-D オプションは --buildDrafts の略で、下書き状態の記事も表示されるようになる。今書いた記事は下書き状態なので、このオプションを付けないと表示されない。
ブラウザで確認し、問題がなければ下書き状態から公開状態に切り替える。切り替え方は2種類あって、1つ目は記事の meta 情報にあった draft フラグを true から false にすればOK。2つ目は下記のコマンドで切り替える。
# 下書きにする
$ hugo draft content/post/hello_world.md
# 下書きをやめる
$ hugo undraft content/post/hello_world.md
このコマンド自体はただ引数で渡したファイルの meta 情報の draft を書き換えてくれるだけっぽいので、僕はいつも自分で meta を書き換えてる。
ビルドする
ビルドはとても簡単:)。プロジェクトルートでビルド用のコマンドを叩くだけ。
$ hugo
これで static/ 以下にサイトに必要な静的ファイルが全部吐き出される。
GitHub Pagesで公開する
ここまででブログのコンテンツ自体はできたので、あとは GitHub Pages で公開するだけ。
ただ、長くなってしまったし、もう夜も更けてきたので、この記事を前編とし、GitHub Pages についての記事は後編ということで続きはまた今度書きます。