Featured image of post Hugoで個人サイトを立ち上げた話

Hugoで個人サイトを立ち上げた話

これはなに Link to this heading

静的サイトジェネレータHugoを使って技術ブログを立ち上げた際の備忘録。 環境構築からテーマの選択、Netlifyでの公開まで、手順を詳しく説明する。

環境 Link to this heading

実証環境は次のとおりである。

サイト作成の流れ Link to this heading

Hugoのインストール Link to this heading

まず、Hugoをインストール1する。使用するThemeの関係上、Hugoの拡張バージョンを利用する。

  1. Releases hugo - GitHub から、環境に合ったコンパイル済みのバイナリをダウンロードする。
    • 今回は拡張バージョンをインストールするため、ファイル名に"extended"がついているものを利用する。Windowsの場合は"hugo_extended_X.XXX.X_windows-amd64.zip"である。
  2. ダウンロードしたファイルを解凍し、中身を任意の場所に配置する。(e.g. “C:\HugoExtended\bin”)
  3. “hugo.exe"を配置したディレクトリまでのパスを、環境変数"Path"に追加する。
  4. コマンドプロンプトを立ち上げ、hugoコマンドが通るか確認する。
  5. hugo versionを確認した際に、“extended"が記載されることを確認する。
> hugo version
hugo v0.105.0-0e3b42b4a9bdeb4d866210819fc6ddcf51582ffa+extended windows/amd64 BuildDate=2022-10-28T12:29:05Z VendorInfo=gohugoio

サイトの作成 Link to this heading

次に、任意の場所にugoで新しいサイト(プロジェクト)を作成する。 以下のコマンドを実行する。quickstartは任意の名前で良い。

hugo new site quickstart

下記のディレクトリ構成でサイトが作成される。

> tree /f
C:.
└─quickstart
    │  config.toml
    ├─archetypes
    │      default.md
    ├─content
    ├─data
    ├─layouts
    ├─public
    ├─static
    └─themes

作成したサイトプロジェクトに移動する。

cd quickstart

サイトのバージョン管理 Link to this heading

サイト全体をgit管理下に置くため、以下のコマンドを実行する。

git init

.gitignoreファイルも作成する。

.gitignore
/public/
/resources/
.hugo_build.lock

Netlifyの設定ファイルの追加 Link to this heading

Netlifyでサイトを公開する場合は、netlify.tomlファイルを作成して、HUGOのバージョンを指定してあげる必要がある。

netlify.toml
[context.production.environment]
  HUGO_VERSION = "0.105.0"
[context.deploy-preview.environment]
  HUGO_VERSION = "0.105.0"

テーマの追加 Link to this heading

Complete List | Hugo Themes から好きなテーマを選ぶ。たいていのテーマはインストール方法が記載されているので、それに従う。今回はStack を採用する。

Getting Started | Stack によると、Stackはgit clonegit submodule addのどちらでも追加できる。今回はサイトのプロジェクト単位でGit管理するため、git submoduleで追加する2

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

テーマのカスタマイズは、カスタマイズ方法がテーマごとに異なる。詳細はテーマのドキュメントを参照すること。

サンプルページの作成 Link to this heading

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

起動の確認 Link to this heading

これで環境が整ったので、簡易サーバーを実行してみる。

hugo serve -D

上記コマンド実行後”http://localhost:1313/ “にアクセスすると、下図のようなサイトが立ち上がっているはずだ。Stackのサンプルページは多言語対応しているため、左下の言語設定を変更すると、中国語あるいはアラビア語の記事が表示される。

サンプルページ

記事の投稿 Link to this heading

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のアレンジ Link to this heading

新しい記事は"archetypes/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での公開 Link to this heading

最後に、Netlifyでサイトを公開する。

  1. GitHub、GitLab、Bitbucketのいずれかに作成したサイトをアップロードする。
  2. Netlifyで新しいアカウントを作成し、ログインする。
  3. トップページに戻り、“New site from Git"をクリックする。
  4. GitHub、GitLab、Bitbucketのいずれかを選択し、リポジトリを選ぶ。
  5. “Build settings"で、“Build command"にhugo、“Publish directory"にpublicを指定し、“Deploy site"をクリックする。

これで、Netlifyでの公開が完了する。公開されたURLが表示されるので、アクセスして確認しよう。

まとめ Link to this heading

この記事では、Hugoを使って技術ブログを立ち上げる方法を解説した。環境構築からテーマの選択、Netlifyでの公開まで手順を詳しく説明した。自分だけの技術ブログを立ち上げる際の参考になればうれしい。

参考文献・URL Link to this heading


  1. Hugoにはインストーラが存在しないため、厳密にはインストールではない。 ↩︎

  2. ちなみにgit cloneで追加すると、サイトのgitリポジトリとthemesのgitリポジトリの間で整合性が取れず、Netlifyで公開する際にエラーを吐かれてしまう。 ↩︎

Licensed under CC BY-NC-SA 4.0
最終更新 5月 21, 2023
Hugo で構築されています。
テーマ StackJimmy によって設計されています。