静的サイトジェネレータ Hugo を使ってみました

先日、お世話になっているエンジニアの方から Hugo という静的サイトジェネレータを紹介していただきました。とても便利なツールですね。

さっそく試してみたのですが、環境を整えるまでにいろいろ手こずってしまいました。なんというか、私は環境構築でつまずくことが多く、今回も例外ではありませんでした。いろいろネット検索しながら試した末に動くようになりました。

公式サイトでも（Git を使った方法ですが）きちんと使い方が紹介されていますし、数多くの方がウェブ上で解説を載せていらっしゃいますので、それらを参照すれば、そんなに私のように手こずる人は多くないと思いますが、誰かの役に立てればと思い、自分用のメモから手順を書き起こして載せておきます。

なお、私は Git を使っていないので、Git を使わない方法を書いています。

▼Hugoのインストール

ここから該当するOSのインストーラをダウンロードする。
https://github.com/gohugoio/hugo/releases

Cドライブの [Program Files] フォルダなどに hugo のフォルダを作って、その中に、先ほどのインストーラ（zipファイル）を解凍した中身を入れる。

hugo のパスを通す。

コマンドプロンプトから `hugo version` でパスが通っていることを確認する。

▼新しいサイトを作る

コマンドプロンプトで作業フォルダへ移動し `hugo new site hogehoge` で必要なファイル一式がコピーされる。

▼テーマを設定する

hugoのサイトからテーマをダウンロードする。GitHubからzip形式で一式をダウンロードすれば良い。

サイトの作業フォルダの [themes] フォルダの中に、テーマファイル一式をコピーする。

[themes] フォルダの中に入っている [exampleSite] フォルダの中身をトップにコピーすると、サンプルサイトが立ち上がるようになる。

▼hugo server を立ち上げる

コマンドプロンプトから `hugo server` で立ち上がる。

ブラウザから `http://localhost:1313/` でアクセスして完成図を確認する。

▼公開用のHTMLファイル一式を出力する

コマンドプロンプトから `hugo` で公開用の HTML ファイル等一式が出力される。