STARTS
Hugoを動かしてみよう
ここでは、Hugo を使い、サンプルのサイトを作って、ローカルサーバーで確認するところまでをやってみます。
なお、 Hugo のインストールは終わっているものとします。インストールがまだの場合は、Hugoのインストールを先に見てみましょう。
サイトの雛形を作ろう
コマンドプロンプトなどで、Hugo で作成するサイトの情報を置く起点の場所に移動しましょう。C:\Hugo\Sites の下に作っていく場合は、
> cd C:\Hugo\Sites
と入力します。
次に、以下のコマンドを実行しましょう。そうすると、サイトの雛形が出来上がります。
> hugo new site HugoSample
Sites フォルダの下に、HugoSample フォルダができるはずです。その下に、たくさんフォルダができていますが、とりあえず今は何も考えないでおきましょう。
これでサイトの雛形が作成できました。作成したフォルダに移動しておきましょう。
> cd C:\Hugo\Sites\HugoSample
テーマを追加しよう
Hugo は記事を追加するだけでは何も表示されません。真っ白な画面が表示されるだけです。サイトを表示するためには、 テーマ を設定しておく必要があります。デフォルトのテーマというものはなく、はじめは何も設定されていないので、自分で初期設定をする必要があります。
公式サイトでの説明では、ananke というテーマを使っているので、ここでも同じテーマを使ってみます。
themes フォルダに ananke フォルダを作成します。次に、anankeテーマの置いている場所に移動し、download ボタンから、zip ファイルをダウンロードしましょう。それを解凍して、ananke フォルダにすべて移動しましょう。
もし、git が使えるなら、次のようにしても構いません。次の1行でテーマのコピーを保存することができます。
> git clone https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
テーマに必要なデータがコピーできました。次に、今作っているサイトで ananke テーマを使う、という設定をします。
直接ファイルを更新する場合は、HugoSample 直下にある、config.toml をテキストエディタで開いて、最後の方に次の一文を追加します。
theme = "ananke"
もしくは、コマンドラインから以下を実行します。同じ結果になります。
> echo 'theme = "ananke"' >> config.toml
以上で、テーマのダウンロードと、サイトでそのテーマを使う設定が終わりました。Hugo にはたくさんのテーマがあります。他のテーマを設定しても大丈夫ですが、テーマによっては使い方が違うので、それぞれの ReadMe ファイルなどを読むようにしましょう。
記事を追加しよう
今の段階ではまだ何も記事がないので、とりあえず適当な文字を入れた記事を作ってみましょう。記事の雛形は、コマンドプロンプト上で、次のようにして作ります。
> hugo new posts/my-first-post.md
これにより、content フォルダに posts フォルダができ、その下に my-first-post.md という、Markdown ファイルが出来上がります。この md ファイルの中身は次のようになっています（Hugo のバージョンによって、少し違うかもしれません）。
---
title: "My First Post"
date: 20XX-XX-XXTXX:XX:XX+09:00
draft: true
---
2つ目の「–––」の下に何か書いてみましょう。「あああ」などでも何でも構いません。追加したら、上書き保存をします。
Hugoサーバーを立ち上げよう
テーマと記事があるので、もうサイトを見ることができます。コマンドプロンプト上で、次を実行します。
> hugo server -D
これで、あなたのPCだけで見れる、ローカルサーバーが立ち上がります。-D はドラフトの記事も見れるようにする、という設定です。エラーが出なければ、
http://localhost:1313/
にアクセスすることで、サイトが見えているはずです。また、先ほど追加した記事も見えていると思います。
さて、この段階で、先ほどの my-first-post.md ファイルのテキストを変更して上書きしてみましょう。すると、ブラウザに即座に内容が反映されたと思います。
こうして、記事を書きながらブラウザ上ですぐに確認することができます。サーバーを止めたい場合は、コマンドプロンプト上で、Ctrl+c を実行します。
もし、上のURLにアクセスしても真っ白な画面が表示されてしまう場合は、テーマの設定がおかしい可能性があります。また、そもそも “Web Server is available” と出ない場合は、md ファイルの作り方がおかしいかもしれません。
おわりに
さて、これで、いったん Hugo を動かすことができました。記事を追加して、それを表示するにはどうすればいいか、を見てきました。ただ、これだけではまだサイトは完成していません。次は、基本的な使い方で、もう少し突っ込んだ内容を見ていくことにしましょう。記事の追加やサイトの設定についてさらに細かく見ていき、サイトの公開までを目指します。