これはなに
静的サイトジェネレータHugoを使って技術ブログを立ち上げた際の備忘録。 環境構築からテーマの選択、Netlifyでの公開まで、手順を詳しく説明する。
環境
実証環境は次のとおりである。
- Windows 10 Pro 21H1 (19043.2130)
- Hugo v0.105.0 extended
- Hugo theme Stack
- Netlify
サイト作成の流れ
Hugoのインストール
まず、Hugoをインストール1する。使用するThemeの関係上、Hugoの拡張バージョンを利用する。
- Releases hugo - GitHub
から、環境に合ったコンパイル済みのバイナリをダウンロードする。
- 今回は拡張バージョンをインストールするため、ファイル名に"extended"がついているものを利用する。Windowsの場合は"hugo_extended_X.XXX.X_windows-amd64.zip"である。
- ダウンロードしたファイルを解凍し、中身を任意の場所に配置する。(e.g. “C:\HugoExtended\bin”)
- “hugo.exe"を配置したディレクトリまでのパスを、環境変数"Path"に追加する。
- コマンドプロンプトを立ち上げ、
hugo
コマンドが通るか確認する。 hugo version
を確認した際に、“extended"が記載されることを確認する。
> hugo version
hugo v0.105.0-0e3b42b4a9bdeb4d866210819fc6ddcf51582ffa+extended windows/amd64 BuildDate=2022-10-28T12:29:05Z VendorInfo=gohugoio
サイトの作成
次に、任意の場所にugoで新しいサイト(プロジェクト)を作成する。
以下のコマンドを実行する。quickstart
は任意の名前で良い。
hugo new site quickstart
下記のディレクトリ構成でサイトが作成される。
> tree /f
C:.
└─quickstart
│ config.toml
│
├─archetypes
│ default.md
│
├─content
├─data
├─layouts
├─public
├─static
└─themes
作成したサイトプロジェクトに移動する。
cd quickstart
サイトのバージョン管理
サイト全体をgit管理下に置くため、以下のコマンドを実行する。
git init
.gitignore
ファイルも作成する。
/public/
/resources/
.hugo_build.lock
Netlifyの設定ファイルの追加
Netlifyでサイトを公開する場合は、netlify.toml
ファイルを作成して、HUGOのバージョンを指定してあげる必要がある。
[context.production.environment]
HUGO_VERSION = "0.105.0"
[context.deploy-preview.environment]
HUGO_VERSION = "0.105.0"
テーマの追加
Complete List | Hugo Themes から好きなテーマを選ぶ。たいていのテーマはインストール方法が記載されているので、それに従う。今回はStack を採用する。
Getting Started | Stack
によると、Stackはgit clone
とgit submodule add
のどちらでも追加できる。今回はサイトのプロジェクト単位でGit管理するため、git submodule
で追加する2。
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
テーマのカスタマイズは、カスタマイズ方法がテーマごとに異なる。詳細はテーマのドキュメントを参照すること。
サンプルページの作成
Stackにはサンプルページが用意されているため、これを利用する。まず、サンプルページの"content"ディレクトリと"config.yaml"をコピーする。
cp -r ./themes/hugo-theme-stack/exampleSite/content/* ./content/
cp -r ./themes/hugo-theme-stack/exampleSite/config.yaml ./
コピーした"config.yaml"と、もともとある"config.toml"は競合するため、“config.toml"のほうを削除する。
rm ./config.toml
起動の確認
これで環境が整ったので、簡易サーバーを実行してみる。
hugo serve -D
上記コマンド実行後”http://localhost:1313/ “にアクセスすると、下図のようなサイトが立ち上がっているはずだ。Stackのサンプルページは多言語対応しているため、左下の言語設定を変更すると、中国語あるいはアラビア語の記事が表示される。
記事の投稿
hugo new
コマンドを利用すると、“archetypes/default.md"に基づいて新しい記事を生成できる。Stackでは、記事は"index.md"という名前のファイルで作成する必要がある。“index.md"の入っているディレクトリ名が記事のタイトルになる。
hugo new post/my-first-post/index.md
これで、/content/posts/my-first-post/index.md
ファイルが作成される。このファイルを開いて、記事の内容を編集する。記事はMarkdown形式で記述できる。
たとえば、以下のように記述できる。
---
title: "My First Post"
date: 2023-04-06T00:00:00+09:00
draft: false
---
こんにちは、これが私の最初の投稿です!
- リスト1
- リスト2
- リスト3
## サブタイトル
ここに本文が入ります。
編集が完了したら、ローカルで表示されるか確認する。
default.mdのアレンジ
新しい記事は"archetypes/default.md"に基づいて作成されるため、“archetypes/default.md"をアレンジすると記事を作りやすくなる。
個人的に使っている設定は下記の通り。
---
title: {{ replace .Name "-" " " | title }}
description:
slug: {{ replace .Name "-" " " | title }}
date: {{ .Date }}
categories:
tags:
image:
math: false
license:
hidden: false
comments: false
draft: true
---
## これはなに
## 参考文献・URL
Netlifyでの公開
最後に、Netlifyでサイトを公開する。
- GitHub、GitLab、Bitbucketのいずれかに作成したサイトをアップロードする。
- Netlifyで新しいアカウントを作成し、ログインする。
- トップページに戻り、“New site from Git"をクリックする。
- GitHub、GitLab、Bitbucketのいずれかを選択し、リポジトリを選ぶ。
- “Build settings"で、“Build command"にhugo、“Publish directory"にpublicを指定し、“Deploy site"をクリックする。
これで、Netlifyでの公開が完了する。公開されたURLが表示されるので、アクセスして確認しよう。
まとめ
この記事では、Hugoを使って技術ブログを立ち上げる方法を解説した。環境構築からテーマの選択、Netlifyでの公開まで手順を詳しく説明した。自分だけの技術ブログを立ち上げる際の参考になればうれしい。