はじめに

技術ブログを構築するには、手軽で強力な静的サイトジェネレーター「Hugo」と無料のホスティングサービス「GitHub Pages」を組み合わせる方法が最適だ。この記事では、Hugo v0.139.2（拡張版）を使ってブログを作成し、GitHub Pages上で公開するまでの手順を解説する。初心者でも簡単に実践できるよう、段階的に進めていこう。

必要な環境

以下のツールを準備する。

ツール	バージョン	備考
Hugo	v0.139.2	拡張版（extended）をインストールする必要あり
Git	最新版	ローカルリポジトリの管理に使用
GitHub Pages	–	GitHub アカウントと公開用リポジトリが必要

プロジェクトのセットアップ

1. 必要なツールを確認

まずはインストール済みのツールが正しく動作することを確認する。

Hugoのバージョン確認

hugo version

期待される出力例：

Hugo v0.139.2-770f548b47b39e6f0fd4da1cc80552024e5829e1+extended

Gitのバージョン確認

git --version

GitHubリポジトリの準備

GitHubで新しいリポジトリを作成しておく（例: siro-yamaneko.github.io）。

2. Hugoプロジェクトを作成

以下のコマンドでHugoサイトを初期化する。

hugo new site my-blog
cd my-blog

3. テーマをインストール

適切なテーマを選び、リポジトリから取得する。以下は例として「hugo-theme-bootstrap」を使用。

git init
git submodule add https://github.com/razonyang/hugo-theme-bootstrap.git themes/hugo-theme-bootstrap

4. 設定ファイルを編集

config.tomlを以下のように設定する。

baseURL = "https://siro-yamaneko.github.io/"
languageCode = "en-us"
title = "My Technical Blog"
theme = "hugo-theme-bootstrap"

必要に応じて、Google AnalyticsやOpenGraphの設定を追加すると良い。

記事を作成する

1. 新しい記事を作成

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

hugo new posts/first-post.md

生成されたファイル（content/posts/first-post.md）を開き、Markdown形式で記事を書く。

2. Markdownによる執筆

以下は記事ファイルの例：

---
title: "First Post"
date: 2024-11-27T12:00:00+09:00
draft: false
---
# はじめに
これは初めての投稿です。

ローカルでプレビュー

以下のコマンドでローカルサーバーを起動し、ブラウザで確認する。

hugo server

起動後、http://localhost:1313/にアクセスする。

GitHub Pagesにデプロイ

1. 公開用ファイルを生成

以下のコマンドでHugoが静的ファイルを生成する。

hugo

これにより、public/ディレクトリに公開用ファイルが出力される。

2. リポジトリを設定

リモートリポジトリを追加し、初回のプッシュを行う。

git remote add origin https://github.com/siro-yamaneko/siro-yamaneko.github.io.git
git branch -M main
git add .
git commit -m "Initial commit"
git push -u origin main

3. GitHub Pagesを有効化

GitHubリポジトリの設定ページで「Pages」を開き、mainブランチをソースとして設定する。

テーマのカスタマイズ

テーマのカスタマイズにより、ブログの見栄えを整える。

1. 設定の調整

テーマディレクトリ（例: themes/hugo-theme-bootstrap）のドキュメントを参照し、config.tomlを更新する。

2. 独自CSSの追加

カスタマイズ用CSSを作成し、プロジェクトに統合する。

mkdir -p assets/css
echo "/* Custom styles */" > assets/css/custom.css

設定ファイルに以下を追加してCSSを読み込む。

[params.assets]
customCSS = ["css/custom.css"]

更新手順

新しい記事の追加とデプロイ

以下の手順で記事を更新し、GitHub Pagesに反映させる。

hugo
git add .
git commit -m "Add new post"
git push

GitHub Pagesは自動で更新されるため、手動で操作する必要はない。

まとめ

以上の手順で、HugoとGitHub Pagesを使った技術ブログの作成と公開が可能になる。初心者にとってもわかりやすく、手軽に始められるのが特徴だ。公開後はテーマやCSSのカスタマイズにより、自分らしいデザインを作り上げることができる。ぜひ実践して、オリジナルブログを構築してみてほしい。

参考リンク：

HugoとGitHub Pagesで技術ブログを作成する手順を完全ガイド