BETA

Hugoで静的サイトを生成する

投稿日:2019-04-05
最終更新:2019-04-15

Hugoとは

Golangで作られている、静的サイトジェネレータ。なんでも、生成が速いらしい。

今回はコイツを使って、サイトを生成し公開してみる。

この記事が役立つであろう人

サイトを立ち上げたくて、ターミナルでの作業が苦でない人。また、自分でCSSなどをいじったりしてデザインするなら、記事を書くほうに労力を割きたい人。

手順

基本的にはここを参考にしている。以下の手順はWindows10にて行っているが、多分Macとかでも同様なはず。

なお、個人的な好みでWindowsのコマンドプロンプトではなくbusyboxで実行しているが、普通にコマンドプロンプトやPowerShellで実行しても問題ないと思う。

  1. Hugoのインストール

    HugoのGithubから、自分が利用するプラットフォーム用のインストーラをダウンロードして展開する。この記事を書いている現在での最新は0.54.0。

    インストール後、Hugoのbin(実行ファイルが格納されているアドレス)を環境変数に追加する。GUIでもいいし、setxコマンドを実行してもいい。インストールした後で、下記コマンドを実行してみる。

     ~ $ hugo version  
     Hugo Static Site Generator v0.54.0-B1A82C61 windows/amd64 BuildDate: 2019-02-01T09:42:02Z  

    上記のように返ってくればOK。

  2. サイトを生成

    以下のコマンドを実行してサイトを生成する。hogeの部分は任意で、自分が生成したいサイト名でいい。なお、この名前でフォルダが作成される。実行したら生成されたフォルダに移動する。

     $ hugo new site hoge  
     $ cd hoge  
  3. テーマを決定

    Hugoのテーマを集めたページを参照して、好みのテーマを探す。カスタマイズしたり、自力で作成することももちろん可能だが今は触れない。今回はミニマムなデザインが気に入ったので、Hermitにしてみた。

    テーマを決めたら下記のコマンドを実行して、gitでGitHubから必要なファイルをダウンロードする。なお、導入手順はテーマのページにしっかり記述されている。親切!

     $ git init  
     $ git submodule add https://github.com/Track3/hermit.git themes/hermit  

    ここまで実行すると、下記のようなフォルダとファイルの構成が出来上がっているはず。

     .  
     ├── archetypes         
     ├── config.toml  
     ├── content  
     ├── data  
     ├── layouts  
     ├── static  
     └── themes  

    この時点で下記のコマンドを実行すると、publicという名前でフォルダが作成されて、その中に生成されたHTMLファイルなどが格納される。ただし、この時点ではコンテンツを作成していないため、トップページだけで中身はなにもない。

     $ hugo  
  4. 設定ファイルを変更

    ファイルconfig.tomlに設定を追記する。

    オフィシャルでは下記のコマンドを実行するだけでいい、としている。要はテーマの名前を追加している。生成直後の設定ファイルの中身だと、何のテーマを利用するかわからないので追記してやる必要があるからだ。

     $ echo 'theme = "ananke"' >> config.toml  

    ただ、一応これ以外にも後々修正する部分があるので、この時点で編集してしまっても問題ない。それと、他のテーマはわからないがHermitに関して言えば、config.tomlは自分で記述するのではなくて、用意されたものを流用して中身を編集した方がいい。というのは、テーマによってはこの設定ファイル中に特定の設定値がないと、hugoコマンドでのサイト生成時にエラーになる可能性があるからだ・・・実際、それで30分ほど無駄にした_(┐「ε:)_

  5. 記事を作成

    下記のコマンドを実行するとcontentフォルダ配下にファイルを生成する。

     $ hugo new hoge.md  

    この際、出力先のフォルダを指定することができる。下記のコマンドでは、contentフォルダ配下にpostsフォルダが存在しなければ自動的に生成してから、ファイルを生成する。カテゴリだとかジャンル別にファイルを分別したい場合に有効な方法。

     $ hugo new posts/hoge.md  

    生成された直後のファイルの中身は下記のような感じ。

     ---  
     title: "Hoge"  
     date: 2019-04-04T18:21:09+09:00  
     draft: true  
     ---  

    ここに記事をMarkdown形式で記述する。ちなみに、ファイル冒頭のdraftはtrueだと下書き扱いになる。hugo serverとかでファイル生成すると内容の確認はできるんだけど、publicフォルダには出力されない(下書きだから)。なので、サイト公開時には忘れずにdraft: falseにしておく必要がある・・・じゃないと、地味に30分くらいハマることになるので_(┐「ε:)_

    なお、Windowsあるある・・・かどうかはよくわからないけど、UTF-8でファイルを保存しておかないとコマンドhugoの実行時にエラーになるので注意。

  6. サーバーを起動して確認

    下記のコマンドを実行する。

     $ hugo server -D  

    その後ブラウザでhttp://localhost:1313/にアクセスする。

    なお、ブラウザで生成したサイトを表示させたままconfig.tomlや記事の内容をいじったりすると、そのまま反映される。スゲェ。

    ちなみに、Hugoのサーバーを終了するにはCtrl+Cを押す。

  7. 固定ページなどの表示設定

    ここからの作業は任意だが、大抵のblogにはコンテンツ以外に「このページについて」みたいな固定ページが存在する。そういった、コンテンツ以外のページも必要に応じて追加する。

    追加する手順は基本的に記事を生成する際と何ら変わらない。注意するのはcontentフォルダ配下の構成とconfig.tomlファイルの設定内容。例えば、contentフォルダの内容が下記の通りだったとする。pagepostsはフォルダだ。

     .  
     ├── page  
     │    └── hoge-page.md      
     ├── posts  
     │    ├── content1.md  
     │    ├── content2.md  
     │    └── content3.md      
     └── about.md  

    この場合、設定ファイルのconfig.tomlの内容を下記の通り記述することで、ファイルと生成後の出力内容を紐づけることができる。

     # コンテンツ用設定  
       [[menu.main]]  
         name = "Posts"  
         url = "posts/"  
         weight = 10  
    
     # 固定ページ用設定。  
       [[menu.main]]  
         name = "pages"  
         url = "page/"  
         weight = 10  
    
     # 「このページについて」ページの設定。  
       [[menu.main]]  
         name = "About"  
         url = "about/"  
         weight = 10  

    なお、ここで*.mdファイルを単体で置いておくと1枚の単体ページとしてHTMLファイル生成される。が、1つ以上の*.mdファイルをフォルダ配下に格納しておくと、各記事をHTMLファイルに変換するのと同時に、自動的にリストページを生成してくれる。便利。

    ただし、前述の下書き設定draftがtrueになっていたりすると、Markdownファイルがあっても下書き扱いとなるのでHTMLファイルが生成されない(ローカルでの内容確認はできるが、publicフォルダに出力されない)。そのため、メニューに項目があってもファイルが存在せず404になってしまうので、そこだけは注意が必要。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@webmaster909の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!