はじめに

この記事では、Hugoのインストールから簡単なサイトの作成までの流れを紹介する。
環境情報は以下の通り。

	環境情報
PC	Apple M1 Pro
OS	Sonoma 14.4
Hugo	v0.133

Hugoとは

静的サイトジェネレーターの1つ
Go言語で開発された高速なHTMLサイト作成ツール
動的なデータベース等を使わず静的ファイルのみでサイトを構成する
ビルドが非常に高速、セキュリティ面でのリスクが少ない、といったメリットがある

1. Homebrewをインストールする

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

（インストールコマンドはHomebrew公式サイトより）

2. Hugoをインストールする

$ brew install hugo

$ hugo version     
hugo v0.133.1+extended darwin/arm64 BuildDate=2024-08-26T13:58:46Z VendorInfo=brew

バージョンが確認出来ればインストール完了。

3. Hugoのサイトを作成する

$ cd ~
$ mkdir hugo_practice  # 専用のディレクトリを作成
$ cd hugo_practice     # 作成したディレクトリに移動
hugo_practice $ hugo new site test_site
Congratulations! Your new Hugo site was created in /Users/[user_name]/hugo_practice/test_site.

hugo new site <site_name>：現在いるディレクトリに<site_name>で指定した名前のサイトを作成するコマンド

hugo_practice $ cd test_site
test_site $ tree .
.
├── archetypes
│   └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static
└── themes

9 directories, 2 files

作成されたサイトのディレクトリ構造はこんな感じ

4. テーマをインストールする

Hugo公式テーマサイトから使用したいテーマを選択する。
今回は Hermit-V2 を使用。

Downloadボタンを押すとGitHubのリポジトリページに遷移するので、先ほど作成したサイトのthemesディレクトリ下にcloneし、hugo.tomlに使用するテーマを追加する。

test_site $ git clone https://github.com/1bl4z3r/hermit-V2 themes/hermit-v2

hugo.toml

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
+ theme = 'hermit-v2'

5. 開発サーバーを立ち上げる

テーマがインストールできたので、サーバーを起動。

test_site $ hugo server
Watching for changes in /Users/[user_name]/hugo_practice/test_site/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /Users/[user_name]/hugo_practice/test_site/hugo.toml
Start building sites … 
hugo v0.133.1+extended darwin/arm64 BuildDate=2024-08-26T13:58:46Z VendorInfo=brew
                   | EN  
-------------------+-----
  Pages            |  8  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  0  
  Processed images |  0  
  Aliases          |  0  
  Cleaned          |  0  

Built in 13 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) 
Press Ctrl+C to stop

hugo server：ローカル開発サーバーを起動し、ローカル環境でサイトをプレビューできるようにするためのコマンド
- デフォルトだと http\://localhost:1313/ でサイトが立ち上がる
- サイトのコンテンツやテンプレートの内容の変更を検知すると自動的にサイトを再ビルドし、ブラウザを更新する（この機能を「ホットリロード」と呼ぶ。）

http\://localhost:1313/ で、先ほどインストールしたテーマが反映されたサイトが見られるようになった。

6. サイトをカスタマイズする

この段階だとサイトにはタイトルが表示されているだけなので、少し手を加えてそれっぽくしてみる。

各テーマのリポジトリページには、基本の構成やカスタマイズの方法などが記載されているので、それを参考に自分のサイトに必要なコードをコピペする。

今回使用しているテーマはデモサイトのブランチを公開しているので、hugo.tomlから設定をピックアップして自分のサイトのhugo.tomlに追加し、細かい部分を書き換えてみる。

hugo.toml

baseURL = 'https://example.org/'
languageCode = 'en-us'
- title = 'My New Hugo Site'
+ title = "Chika's Hugo Site"
theme = 'hermit-v2'

+ [languages]
+   [languages.en]
+     [languages.en.params]
+       homeSubtitle = 'This is my portfolio site created with Hugo.'
+ 
+ [params.author]
+   name = 'kwtck'
+ 
+ [params]
+   homeSubtitlePrinter = true
+   [[params.socialLinks]]
+     name = 'github'
+     url = 'https://github.com/'
+     [[params.socialLinks]]
+     name = 'facebook'
+     url = 'https://www.facebook.com/?locale=ja_JP'
+   [[params.socialLinks]]
+     name = 'twitter'
+     url = 'https://x.com/?lang=ja'
+   [[params.socialLinks]]
+     name = 'instagram'
+     url = 'https://www.instagram.com/'
+ 
+ [menu]
+   [[menu.main]]
+     name = 'Profile'
+     url = 'profile/'
+     weight = 1
+   [[menu.main]]
+     name = 'Skills'
+     url = 'skills/'
+     weight = 2

これだけでも、かなりそれっぽくなる。

7. 新規ページを作成する

6で「Profile」と「Skills」いうメニューを配置したが、該当のページを作成していないため、このリンクを押しても現時点では404となってしまう。

正しくページが表示されるように、ひとまずProfileページを作成する。

test_site $ hugo new profile.md

hugo new <file_name>：contentディレクトリ下に<file_name>で指定した名前のページを作成するコマンド

作成されたファイルを編集して、プロフィール項目を追加する。

content/profile.md

+++
title = 'Profile'
date = 2024-09-08T13:52:13+09:00
draft = true
+++
+ Name: Chika  
+ Address: Tokyo  
+ Occupation: Web Engineer  
+ Hobby: Curry Shop Tour

デフォルトだとドラフト状態でファイルが作成されているので、-Dオプションを付けてドラフト状態のコンテンツも含めてサーバーを起動する。

test_site $ hugo server -D

再度、http://localhost:1313/profile/にアクセスしてみる。

ページが作成され、プロフィール項目が反映されていることが確認できた。
「Skills」ページも同じ要領で作成することができる。

おわりに

ものの5分程度で簡単なサイトを作成することができた。
ページを増やしたり、cssやjsで色々いじってみたりするともっとリッチになりそう。

ちなみに、Hugoは全てのコンテンツをHTMLファイルとして変換してpublicディレクトリに出力するため、サイトを公開する際にはpublicディレクトリだけウェブサーバーにアップロードすればOK。