Hugo とは
Go 言語で作られたサイトジェネレータで、高速に動作することが特徴です。
簡単に Hugo のインストールや使い方のメモを残しておきます。
インストール方法
Mac だと brew でインストールするのが簡単で早いです。
$ brew install hugo
他のプラットフォームだと公式サイトの手順を確認してください。
サイトの作り方
簡単な流れとしては、
- スケルトン生成
- テーマのインストール
- 記事を書く
- サイトの生成と確認
- デプロイ
です。
いったん作ってしまえば、記事を書いて、生成して、デプロイを繰り返すことになりますね。デプロイの部分は TravisCI を使って自動化することが可能です。
スケルトン生成
スケルトンとは簡単にいってしまえば枠組みです。rails new hoge
と同じものと考えてもらって大丈夫です。
Hugo ではコマンド一発でサイトのスケルトンが生成されます。下記の例だと、blog
という名前のディレクトリにスケルトンが生成されます。
$ hugo new site blog
テーマのインストール
次にテーマをインストールします。
ぼくはdim0627さんのデザインがかっこいいと思ったので、dim0627さんのhugo_thme_robustを使っています。
生成したスケルトンのthemes
ディレクトリでテーマを展開します。ここではgithub
から取ってきていますがテーマによっては zip などを展開するケースもあると思います。
$ cd blog/themes
$ git clone https://github.com/dim0627/hugo_theme_robust
テーマをダウンロードしてきたら、config.toml
にテーマの設定を追記します。
theme = "hugo_theme_robust"
これでデザインと枠組みができたので記事を書いていきます。
記事の書き方
Hugo で作ったディレクトリの直下で記事作成のコマンドを打ちます。
$ hugo new post/hoge.md
すると content/post/hoge.md
にファイルができるのでそこに記事を書いていきます。マークダウン形式で記述が可能です。
サイトの生成とブラウザで確認
記事が書けたらサイトを生成します。この例だとblog
ディレクトリ直下でhugo
コマンドを引数なしで実行するとサイトが生成されます。
$ hugo
| EN
+------------------+----+
Pages | 4
Paginator pages | 0
Non-page files | 1
Static files | 1
Processed images | 0
Aliases | 3
Sitemaps | 1
Cleaned | 0
Total in 44 ms
Hugo のバージョンによって多少数字が違うかもしれませんが、エラーが出ていなければ生成は成功です。
生成したサイトが意図通りにできているかローカルでサーバを立てて確認することができます。
$ hugo server -D
-D をつけることによって下書きの記事も表示されるようになります。
http://localhost:1313/ にアクセスすることでサイトを確認することができます。サーバを立ててブラウザを開いている状態で記事を書いても自動で反映されるので確認が楽です。
おわりに
インストールと簡単な使い方に関して書きました。実際のデプロイして外部に公開する方法はまた違う記事で書きます。