Hugo で blog サイトの作成: 環境構築編
目次
構築手順の概要 #
前回の投稿 の方針に従って、下記の手順で準備する。
- Windows PC 執筆環境
- 事前準備
- Hugo のアプリをインストール
- Hugo サイト (フォルダ) を作成
- Hugo テーマインストール
- Hugo テーマ有効化
- 新しい記事フォルダの配置
- 記事を書く
- 執筆用 Windows PC で blog 表示テスト
- GitHub 連携
- Hugo ビルド用のサイトで git 初期化
- GitHub リポジトリに commit + Push
- Netlify サイト公開
- Netlify 初回登録
- Netlify と GitHub を連携
- Netlify でビルド確認
- blog 公開設定 (DNS)
Windows PC 執筆環境 #
事前準備 #
執筆環境として、Visual Studio Code をインストールしておく。 最近では winget コマンドを使うことで簡単にインストールできる。
winget install Microsoft.VisualStudioCode
Hugo の執筆用に下記の拡張機能のインストールも推奨。
Hugo アプリのインストール #
winget コマンドでインストール
winget install Hugo.Hugo.Extended
バージョンの確認
PS C:\> hugo version
hugo v0.132.2-3fd26c70dff5934ec1802b9563530130ed1bca75+extended windows/amd64 BuildDate=2024-08-14T16:17:21Z VendorInfo=gohugoio
Hugo サイト (フォルダ) を作成 #
作業用フォルダに等に Hugo 用フォルダ構造を作成する。Dropbox 管理下に置きたかったので、下記のように指定した。
cd "${env:USERPROFILE}\Dropbox"
hugo new site blog
成功した場合は Congratulations! と表示される。
Congratulations! Your new Hugo site was created in C:\Users\XXXX\Dropbox\blog.
Just a few more steps...
1. Change the current directory to C:\Users\XXXX\Dropbox\blog.
2. Create or install a theme:
- Create a new theme with the command "hugo new theme <THEMENAME>"
- Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>\<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".
See documentation at https://gohugo.io/.
初期状態のフォルダ構造 (Hugo 0.132.2時点) #
公式ドキュメント: Directory structure
blog/ # Hugoサイトトップフォルダ
|- archetypes/
|- assets/
|- content/ # 記事ファイル群の配置
|- data/
|- i18n/
|- layouts/
|- static/ # 静的ファイル (カスタムCSSや画像ファイル等)
|- themes/ # Hugoテーマ配置フォルダ
|- hugo.html # 設定ファイル
ビルド後に追加されるフォルダ #
サイト公開する際は、ビルド後に public 以下のみを Web サーバにコピーすればよい。
blog/
|- public/ # Web公開用フォルダ Web
|- resources/
git 初期設定 #
Hugo サイト全体を git 管理するため、初期化する。
cd "${env:USERPROFILE}\Dropbox/blog"
git init
# 初回の空コミットをしておく
git commit --allow-empty -m "first commit"
Hugo テーマインストール #
Hugo のテーマサイト からお好みのテーマを探し、Hugo サイトフォルダ配下に配置する。Git 管理にしたいので、下記のとおり subtree として展開する。
サンプルテーマの導入例
git remote add thenewdynamic-ananke https://github.com/theNewDynamic/gohugo-theme-ananke
git subtree add --prefix themes/ananke --squash thenewdynamic-ananke master
git submodule でテーマを展開すると紹介している hugo 構築記事もあるが、場合によってはテーマ構造に手を入れる必要があるため git subtree の方が向いている。
Hugo 設定ファイル #
初期設定例: hugo.toml
baseURL = 'https://example.org/'
title = 'New Hugo サイト'
languageCode = 'ja_jp' # 日本語対応
defaultContentLanguage = "ja" # 日本語対応
theme = "ananke" # テーマ名を指定
hasCJKLanguage = true # 日本語対応
[Params]
date_format = "2006/01/02(Mon)"
Hugo設定ファイル補足 #
- Hugo 0.110.0 (2023/1/17) でデフォルト設定ファイル名が config.toml → hugo.toml に変更された
- Hugo 0.120.0 (2023/10/31) から [Author] タグが [Params.author] に変更された。この影響で不具合が出るテーマが存在するため、場合によってテーマファイル側の修正が必要。
記事を書く #
基本的に content フォルダ以下に *.md ファイルを書いていけば認識されるのだが、特に固定されたファイル配置パターンはないらしい。
保守性を考えて、本 blog では下記の構造で構成することにした。
blog/
|- content/
|- posts/
|- YYYYMMDD-TOPIC1 # 記事1フォルダ
|- index.md # 記事1本体の MarkDown ファイル
|- xxxxx.jpg # 記事1に貼り付ける画像
|- xxxxx.png # 記事1に貼り付ける画像
|- YYYYMMDD-TOPIC2 # 記事2フォルダ
|- index.md # 記事2本体の MarkDown ファイル
|- xxxxx.jpg # 記事2に貼り付ける画像
|- xxxxx.png # 記事2に貼り付ける画像
|- privacy.md # サイト全体で固定の記事など
- 記事ごとにフォルダをわけることで、記事から参照される関連画像とひとまとめにしておく
- フォルダ名に日付を入れることにより、記事の古い順にフォルダがソートされる
- URL にも日付が含まれるため、記事の古さが明確になる
- フォルダ名にトピック名を付記することで、URL 名だけでなんの記事か推測できるようにする
- 1階層のみのフォルダとし、管理をシンプルにする
- 記事をジャンル分けしたい場合は、タグ機能を利用する
記事フォルダを追加 #
記事を書き始める際は、hugo new で記事フォルダを構成する。
cd (BLOGトップフォルダ)
hugo new (記事フォルダ)/index.md
実行例:
cd "${env:USERPROFILE}\Dropbox\blog"
hugo new posts/20240818-test/index.md
テンプレートに従ってひな形の index.md が自動作成される。
記事の執筆 #
index.md は下記の構造になっている。(TOML構造の場合)
---
+++
(Front Matterセクション)
title = '20240818 Test'
date = 2024-08-18T19:59:42+09:00
draft = true
...
+++
(本文)
Front Matter セクションには記事ごとの固有情報を追記する。デフォルトは draft が true なので、下書き記事として認識され、public には配置されない。
本文は MarkDown 記法でエディタで記事を書いてゆく。