HUGOを導入する【はじめてのHUGO】

WordPressをやめて静的サイトジェネレーターを使いたい。

HUGOが良さそうだけど、どうやったらいいんだ？という人に向けてHUGOの導入方法を解説します。

営業出身の非エンジニアが、つまづきやすいところもカバーしつつサポートします。

HUGOの環境を作る

HUGOで作ったサイトを公開するには、3つのステップがあります。

1. ローカル（PC内）でHUGOサイトを作る
2. gitサービスでHUGOサイトを管理する
3. ホスティングサービスでHUGOサービスを公開する

この3つのステップを乗り越えるとHUGOで作ったサイトを公開できます。

今回の記事では、「ローカル（PC内）でHUGOサイトを作る」の部分を解説します。

HUGOをインストールする

まず、はじめにHUGOをPCにインストールしましょう。

macでの導入方法を紹介します。
HUGOはターミナルから導入します。

ターミナルを起動して、Homebrewを使ってHUGOをインストールします。

brew install hugo

もし、Homebrewを入れてない場合は先にHomebrewを導入しましょう。
Homebrewのページ にあるコマンドをコピーして、ターミナルで実行すれば導入できます。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

HUGOのプロジェクトを作成する

インストールが完了したら、hugoコマンドでhugoのプロジェクト（サイト）を作成できます。

ターミナルで以下のコマンドを入力しましょう。

hugo new site xxxxx

xxxxxは任意の名前（プロジェクト名）で大丈夫です。

これで、hugoのプロジェクト（サイト）が完成しました。

完成しましたといっても、コンテンツもなければ、見た目の装飾もしていない状態です。

使い方を覚えるために適当なテーマを追加しましょう。

HUGOにテーマを導入し表示させる

HUGOで作ったサイトがどのように表示されるか確認するために、テーマを導入しましょう。

今回は「はじめてのHUGO」ということで、丸パクリするだけで確実に使えるテーマを導入します。

HUGOに最初のテーマを適用する

作成したフォルダに移動しテーマを適用しましょう。

以下のコマンドをコピペで入力します。

cd xxxxx
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

今回は「ananke」というテーマを適用します。

HUGOはテーマによって構成が違って、導入でつまづくテーマもあります。
実際わたしもかなりつまづきましたし、未だに上手く導入できないテーマもあります。

今回紹介したanankeというテーマは上、記のやり方で確実に導入できるテーマです。
テーマの構成にクセが無いので、HUGOの公式ドキュメントでもデモ用に紹介されています。

作成したxxxxxフォルダ内にconfig.tomlというファイルがあるので、テーマを読み込むように指定しましょう。

ファイルを開き、以下の内容を追記します。

theme = "ananke"

これでテーマを読み込めるようになりました。

HUGOに最初の記事を投稿をする

実際に表示を確認するために、HUGOに最初の投稿をして記事を表示させましょう。

以下のコマンドで記事を作成します。

hugo new posts/post1.md

これで、postsフォルダ内にpost1.mdという記事ファイルが作成されました。

anankeのテーマは、contentフォルダ内のpostsフォルダで記事を管理しているので、上記のコマンドになります。

HUGOはテーマによって記事の入れるフォルダの名称が異なります。
ほかのテーマを使う場合は、テーマのドキュメントを確認してください。

これで作成した記事には中身が空っぽです。

エディターで適当に中身を書きましょう。
HUGOではMarkdownで記事を書きます。

記事を書いたら、ファイル上部の—で囲まれている部分（フロントマター）を修正しましょう。

---
title: "post1"
date: 2022-05-28T17:35:34+09:00
draft: false
---

draft(下書き)設定をtureからfalseにして公開に変更しました。

HUGOのサーバーを立ち上げてページを表示させる

これで最低限のアイテムが揃いました。

hugoの機能でローカルサーバーを立ち上げてページを表示させましょう。
ターミナルで以下のコマンドを打ちます。

hugo serve

hugo serverと記述しているサイトもありますが、hugo serveでサーバーを立ち上げられます。

これで、http://localhost:1313 にアクセスしたらHUGOで作成したサイトが表示されます。

記事ページへ直接アクセスする場合は、http://localhost:1313/posts/post1 へアクセスすれば自分が作成したpost1の記事が表示されます。

これがローカルにHUGOを導入する方法です。

ちなみにHUGOのサーバーはリアルタイムで更新されるので、post1.mdの中身を書き換えたら、即時プレビューされます。

以上がHUGOの導入です。

お疲れさまでした。