[Hugo] インストールからサーバ起動までやってみた（Mac）
Nプログラマ(@Nprog128)です。
今回はサイトジェネレータのHugoを使ってみました。
最終的には、現在運営している日記系ブログをHugoに置き換えたいと思っています。
追記: 無事置き換えることができました。
> NP メモリア Diary
まずはインストールとサーバ起動までやったので、そのメモを残しておきます。
環境構築
brewでインストール
1\$ brew update
2\$ brew install hugo
これで環境構築は終わりです。
かなりシンプルでいいですよね。
新規作成をするサイトの雛形を作る
自分の作業用ディレクトリまで移動して、新規サイトの雛形を作るコマンドを実行します。
新しく作るサイトのディレクトリ名はdiaryとします。
1\$ hugo new site diary
作成したディレクトリに入って、テーマを追加していきましょう。
1\$ cd diary
テーマを選ぶ
Hugoには様々なテーマがあります。
テーマは公式ページにある ので、こちらから自分のサイトに使いたいものを選んでダウンロードしましょう。
テーマの数が多いのでTagsから絞り込みをして探したほうがいいです。
自分が最終的に選んだテーマは
Beautiful Hugo
です。
こちらを選んだ理由はこんな感じです。
- MIT License
- Responsive
- ブログ向け
- UIがあまり動かないもの
- 自分が作りたいサイトイメージに一番近いもの
1から4で3つくらいに絞れたのですが、どれにするかを決めるのにかなり時間がかかりました。
考えていてもラチがあかねぇ！ということで、5.で最終的にBeautiful Hugoに決めることができました。
近いイメージの方が、デザインのカスタマイズもラクにできそうって考えたからです。
サイトジェネレータを使う時点でカスタマイズからは逃げられません、たぶん（笑）
自分でガンガンコードを書き換えて自分好みに近づけていきましょう！
選んだテーマを追加する
サイトの管理はgitで行います。
テーマはチュートリアルにある通り、submoduleコマンドで追加しています。
サイトの雛形生成でthemesというディレクトリがあるはずです。
その直下にcloneできるように指定します。
themes直下に作成するディレクトリ名は、テーマのリポジトリ名と合わせてあります。
1\$ git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo
Hugoのチュートリアルにあるように、git管理をしなくてもテーマを追加することは可能です。
先程のテーマのリポジトリに、zipファイルをダウンロードできるリンクがあります。
そこからダウンロードしたものを解凍・リネームして、themesに配置すればオッケーです。
選んだテーマのサンプルを使ってみる
テーマを追加しただけでは何も表示されないので、テーマを表示できるようにしてみます。
beautifulhugoには、テーマファイルの中にサンプルがありました。
これを使ってどんな感じで表示されるのかを試してみます。
先程テーマを追加したので、themes/beautifulhugoというディレクトリがあります。
この中にテーマのサンプルが入ったexampleSiteというディレクトリがあります。
中身はこんな感じです。
1exampleSite
2 ├── config.toml
3 ├── content
4 ├── layouts
5 └── static
exampleSiteディレクトリ配下にあるファイル全てをdiaryディレクトリの直下に上書きします。
Hugoは配置したファイルの読み込み順序があるのですが、サンプルを確認するのはこの方法で大丈夫だと思います。
テーマをカスタマイズするための準備は色々とお作法があると思うので、それは実践の中で調べていきます。
ローカルでHugoサーバ起動
以下のコマンドでローカル上でHugoサーバを起動することができます。
1\$ hugo server -D
コンソールに色々と情報が表示されています。
プロセスを終了するにはCtrl+Cで行います。
起動したサーバにアクセスしたいので、コンソールをもうちょっと確認するとこのような表示があると思います。
1Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
自分のマシンではlocalhost:1313で起動していました。
（環境によってここは変わると思います）
ブラウザのURLにlocalhost:1313と入力します。
選んだテーマのページが表示されていたらオッケーです。
ここから自分好みにカスタマイズしていきましょう。
（その前に使い方やカスタマイズ方法を調べないといけないですが）
おわりに
今回はHugoの環境構築、テーマ選んで配置、Hugoサーバを起動、ブラウザで確認までをしました。
使ってみた感想は、Jekyllと比べるとビルドの速度が早いです。
記事数が多くなっても心配なさそうです。
beautifulhugoテーマの構造を調べつつ色々と試しながら、日記系ブログの引っ越しをしていきたい。
それでは、このへんで。
バイナリー！
参考
Hugoの導入について
インストール、サイトの雛形作成、テーマの追加方法を参考にしました。
Hugoのテーマ
テーマ: Beautifulhugo
