Hugo + GitHub Pagesでブログを作る#1

May 18, 2015   #hugo  #github  #markdown 

このブログは当初Wordpressで作っていたのですが(と言っても記事は少ないけど)、静的サイトジェネレータのHugoに乗り換えました。 本記事ではHugoでブログを作る方法と、気持よく運用していくためのTipsを書いています。

公式サイト:Hugo :: A fast and modern static website engine

今、とても幸せです。

  • 操作がローカルのCLIで完結するので、もっさりしたWeb管理画面から解放された。
  • データベースやPHP不要。サーバはHTMLが置ければOK。
  • 記事がテキストファイル(Markdown)なので、バージョン管理やバックアップが楽。
  • 公開するのは静的なHTMLだけなので、セキュリティを神経質に考える必要がなくなった。

要は、運用が圧倒的に楽になりました。

この記事では2部構成で、Hugoの基本操作、GitHub Pagesでの公開、独自ドメインを使用する方法を紹介します。

Hugoにした理由

理由はたったひとつ、処理速度です。 他のジェネレータでJekyllやOctopressがありますが、サイトを生成する際の時間に嫌気がさしてHugoに移行する事例が散見されました。 この手のジェネレータはサイトを丸ごと生成する関係で、記事が多くなればなるほど処理時間が伸びていくようです。

逆に悩んだ点は、割と新しいジェネレータのため好みのテーマが揃ってないところです。 まぁ、無いのであれば作るだけなので、大した問題では無いです。 自作したテーマはGitHubで公開しています。

Hugoには標準で付属しているテーマが無いので、この記事では私のテーマを使う流れで書いています。 とてもシンプルなテーマですが、気に入って頂けたなら継続利用をお願いします:p

Hugoのインストール

Macの場合は簡単です。

brew install hugo

Windowsの場合は下記の通り。

  1. C:\Hugoフォルダを作成する。
  2. C:\Hugo\binフォルダを作成する。
  3. https://github.com/spf13/hugo/releasesにアクセスする。
  4. Windows用のファイルをダウンロードして解凍する。
    現在のバージョンであれば、hugo_0.13_windows_amd64.ziphugo_0.13_windows_386.zipの環境に合った方を落とす。
  5. 解凍するとhugo_0.13_windows_amd64.exeが出てくるので、hugo.exeにリネームする。
  6. hugo.exeC:\Hugo\binに移動する。

インストールが終わったら動作確認しましょう。

hugo version
Hugo Static Site Generator v0.13 BuildDate: 2015-03-10T11:34:47+09:00

上記の表示になれば成功です。 上手くいかない場合は、hugo.exeへのパスを追加してください。

作業用ディレクトリを作成

hugo new site <site-name>コマンドで、ローカルに作業用のディレクトリを作成します。 場所はどこでも大丈夫ですが、私はDropbox上に作成しています。 複数のPCで記事データを共有できるので便利です。

実行すると下記の構成でディレクトリが作成されます。

hugo new site blog
ls -l blog
total 8
drwxr-xr-x@ 2 TankSuzuki  staff  68  5 11 22:22 archetypes
-rw-r--r--@ 1 TankSuzuki  staff  83  5 11 22:22 config.toml
drwxr-xr-x@ 2 TankSuzuki  staff  68  5 11 22:22 content
drwxr-xr-x@ 2 TankSuzuki  staff  68  5 11 22:22 data
drwxr-xr-x@ 2 TankSuzuki  staff  68  5 11 22:22 layouts
drwxr-xr-x@ 2 TankSuzuki  staff  68  5 11 22:22 static

テーマのインストール

Hugoはデフォルトのテンプレートがありません。 なので、gitからcloneして落としてきます。

公式のテーマカタログはこちらです。 この記事では、冒頭でも触れた自作テーマのAngel's Ladderを使います。

テーマは作業ディレクトリ直下のthemesディレクトリに格納するのですが、初期状態で無いので作ります。

mkdir themes
cd themes
git clone https://github.com/tanksuzuki/angels-ladder

テーマのインストールはこれだけです。

記事の枠を作ってみる

記事を書くには、最初にhugo new <filename>コマンドを使います。

filenameの所は注意が必要で、ブログ記事であればhugo new post/hogehoge.mdのように書きます。 逆に、自己紹介のような固定的なページの場合はhugo new hogehoge.mdとします。

なんで階層を分けるかと言うと、記事の一覧を表示する際にフィルタできるからです。 ブログによくある「最近の投稿」的な部分ではpost配下の記事だけを表示する、ということが可能です。

自己紹介ページやお問い合わせページが時系列に含まれていると違和感があるので、分けるのがおすすめです。

hugo newは作業用ディレクトリの直下で実行する必要があるのでご注意ください。

hugo new post/hogehoge.md

ファイルはcontent/post配下に作成されます。 中身を見ると、下記のようなメタ情報が既に入っています。

+++
date = "2015-05-14T20:40:12+09:00"
draft = true
title = "hogehoge"

+++

dateは作成した時刻で、titleはサイト上で表示されるタイトルです。 draftは後で解説するので、今は無視してください。

titleについては日本語が使えます。 初期状態だとファイル名が入っていますが、ファイル名はそのままでtitleだけ変更可能です。

記事の内容は末尾の+++以降に書くのですが、書くのはちょっとお待ちください。

スラッグを設定する

記事を書く前に、スラッグの設定をします。

スラッグとは

スラッグっていうのは記事のURLのことです。 hogehoge.mdというファイルを作ると、デフォルトの公開URLはhttp://tanksuzuki.com/post/hogehogeとなります。 最後のhogehogeがスラッグです。

お察しかもしれませんが、記事のファイル名がそのままスラッグになります。

ファイル名とスラッグが連動していると、色々不都合が出てきます。

  • ファイル名を変えると記事URLが変わるので、人間にも検索エンジンにもやさしくない。
  • URLに反映させたくない日付等の情報をファイル名に使えない(例:YYYY-MM-DD_hogehoge.md)。
  • 検索エンジンにやさしい名前をファイル名にしないといけない。

なので、ファイル名とスラッグを分離しましょう。 スラッグは、記事ファイル中のメタ部分でslug = "hogehoge"と指定します・・・が、もっと便利な方法があります。

default.mdを作成する

hugo newで作られるファイルの内容を指定することが可能です。 archetypesディレクトリ配下に、default.mdファイルを追加して、下記の通り入力してください。

+++
date = "now()"
draft = true
slug = ""
tags = ["", ""]
title = ""

+++

また、tagsも追加しました。 tags = ["tag1", "tag2", "tag3"]のようにすると、記事にタグを付与できます。

記事を書いてみる

もう一度、記事を作成してみます。

hugo new post/2015-05-14_loremipsum.md

記事の内容は、下記のように末尾の+++以降に書いていきます。 例は普通のダミーテキストですが、Markdownが使えます。

+++
date = "2015-05-14T20:50:06+09:00"
draft = true
slug = "lorem-ipsum-test"
tags = ["lorem", "ipsum"]
title = "記事生成のテスト"

+++

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.

HTML生成と動作確認を行う

Hugoにはテストサーバが付属していますので、実際にどんな表示になるか簡単に試すことができます。 また、テストサーバ起動時にテーマファイルと記事内容が結合され、HTMLを生成します。

テストサーバはhugo serverで起動できますが、いくつかオプションがあります。 よく使うものを抜粋してみました。

オプション 意味
-t テーマ名を指定する。指定必須。
-D 記事ファイル中でdraft = trueになっている記事も表示する。
-w ライブリロードを有効にする。
記事の内容を変更すると自動で再読み込みしてくれる便利オプション。

試しにオプション全部盛りで実行してみます。

hugo server -t angels-ladder -D -w

サーバが起動したら、ブラウザでlocalhost:1313にアクセスしてください。 -Dオプションを使ってますので、先ほど作成した下書きの記事(draft = true)が表示されます。

-wオプションも付けているので、ブラウザで表示している状態で記事の中身を編集してみてください。 変更を検出して自動で再読み込みしてくれます。

生成されたHTMLはpublicディレクトリに入っています。

テーマの設定

ここまで説明に沿って進めていると、左上のサイト名が「My New Hugo Site」となっているはずです。 今のままだと超ダサいので、自分の作りたいサイトに合わせてカスタマイズしましょう。

「My New Hugo Site」と表示されるのは、作業ディレクトリ直下のconfig.tomlをテーマが読み込んでいるからです。

config.tomlの中身はこんな感じです。

baseurl = "http://yourSiteHere/"
languageCode = "en-us"
title = "My New Hugo Site"

でも、編集はちょっとだけお待ちください。 上記の3行だけ編集しても、テーマが持っている機能を引き出せない可能性があります。

多くのテーマは、リポジトリのREADME.mdに設定ファイルの書式が書いてありますので見てみます。 Angel’s Ladderだと、こちらです。 サンプルを見ながら、自分のサイト用の設定を入れていきましょう。

また、config.tomlについてはライブリロードが追従できません。 一度Ctrl + Cでサーバを止めて、再度hugo serverコマンドを打つと表示が変わります。

公開用のサイトを生成する

hugo serverで作ったサイトはローカルでの動作確認用なので、そのままだと公開できません(リンクがlocalhostに向いています)。 公開用のサイトを作るためには、hugoコマンドを実行します。

実行にあたって気を付けたいのは、hugo serverで作ったHTMLもhugoで作ったHTMLも同じpublicディレクトリに入る点です。 hugo serverで下書きも生成してからhugoで公開用ファイルを作成すると、本来不要な下書きのファイルはpublicに残ったままになります。 hugo実行前に、postディレクトリ内を整理することをおすすめします。

オプションはテーマを指定するだけです。 下書きの記事は生成されません。

hugo -t angels-ladder

これで公開用のファイルが生成されました。 後はWebサーバにpublic内のファイルを丸ごと移せば公開完了です。

第二部では、生成したファイルをGitHub Pagesにアップし、公開する方法を紹介します。

関連記事