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 を動かすことができました。記事を追加して、それを表示するにはどうすればいいか、を見てきました。ただ、これだけではまだサイトは完成していません。次は、基本的な使い方で、もう少し突っ込んだ内容を見ていくことにしましょう。記事の追加やサイトの設定についてさらに細かく見ていき、サイトの公開までを目指します。