Tweet

Hugo とは

Go 言語で作られたサイトジェネレータで、高速に動作することが特徴です。

Hugo 公式サイト

簡単に 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/ にアクセスすることでサイトを確認することができます。サーバを立ててブラウザを開いている状態で記事を書いても自動で反映されるので確認が楽です。

おわりに

インストールと簡単な使い方に関して書きました。実際のデプロイして外部に公開する方法はまた違う記事で書きます。

Tweet