Hugoで自分のブログを作ろう

Thu, 30 Apr 2026 18:42:53 +0800

ブログを作ろう

💡 ヒント

Hugo.Extendedは標準のHugoより機能が多いため、このガイドではHugo.Extendedを使用します。

準備

VS Codeのインストール

VS CodeはMicrosoftが開発した無料かつオープンソースのテキストエディタで、Windows、macOS、Linuxの3つのプラットフォームをサポートしています。

VS Codeのダウンロードとインストール

VS Codeダウンロードページを開き、使用しているOSに適したインストーラーを選択してください。

インストーラーを実行し、インストールウィザードに従ってインストールしてください。

VS Codeの設定

インストール後、デスクトップからVisual Studio Codeを開き、以下のプラグインを検索してインストールしてください：

インストール後、VS Codeを再起動すると、ソフトウェア全体が中文で表示されます。

最後に「ファイル」をクリックして「自動保存」を有効にします。

Gitのインストール

Gitは分散バージョン管理システムで、ソースコードやデータのバージョンを管理できます。ソフトウェア開発者が共同開発でソースコードを管理するために一般的に使用されています
— Wikipediaより引用

Gitのダウンロードとインストール

Gitダウンロードページを開き、使用しているOSに適したインストーラーをダウンロードしてください。

Gitインストーラーを実行し、「Next」をクリックして以下の画面が表示されたら、図示したオプションにチェックを入れてインストールを完了してください。

GitHubの設定

GitHubアカウントを登録する

GitHubホームページを開き、「Sign up」をクリックして、情報を入力して登録を完了してください。

新規リポジトリを作成する

GitHubホームページに行き、「New」をクリックして新しいリポジトリを作成し、「Repository name」に「あなたのGitHubユーザー名.github.io」を入力し、「Description」にプロジェクトの説明を入力し、「Add a README file」にチェックを入れてください。

SSH鍵を設定する

スタートメニューで「Git Bash」を検索して開くか、デスクトップの空白處を右クリックし、「Open Git Bash Here」を選択してください。

以下のコマンドを実行します（your_email@example.comをあなたのメールアドレスに置き換えてください）。確認を求められたらEnterを押してください：

1
2

ssh-keygen -t ed25519 -C "your_email@example.com"
cat ~/.ssh/id*.pub

2番目のコマンドの出力をコピーし、SSH鍵設定ページを開き、「Title」に名前を入力し（例：「私の作業PC」）、「Key type」はデフォルトのままにし、コピーした公開鍵を「Key」フィールドに貼り付けてください。

📌 重要

鍵の最後にスペースがないことを確認してください！

最後にターミナルでSSH接続をテストします。xxx! You've successfully authenticated, but GitHub does not provide shell access.が表示されれば接続成功です。

Hugoのインストール

WindowsにHugoをインストールする

MicrosoftのWindowsパッケージマネージャーwingetを使用する

Hugo Extendedをインストール

`1`	`winget install Hugo.Hugo.Extended`

Hugo Extendedをアンインストール

`1`	`winget uninstall --name "Hugo (Extended)"`

GitHubのコンパイル済みバイナリを使用する

GitHubからhugo_extended_x.xxx.x_windows-amd64.zipをダウンロードし、解凍してから環境変数を設定してください

LinuxにHugoをインストールする

パッケージマネージャーを使用する

Ubuntu/Debianシステム
- aptでHugo Extendedをインストール
1 2

sudo apt-get update sudo apt-get install hugo
Fedoraシステム
- dnfでインストール
1

sudo dnf install hugo
Arch Linuxシステム
- pacmanでインストール
1

sudo pacman -S hugo

コンパイル済みバイナリを使用する

💡 ヒント

この方法は最新バージョンのHugo、特にExtendedバージョンを取得できます

Hugoリリースページを開き、システムに適したファイルをダウンロード：
- 64ビットシステム：hugo_extended_x.xxx.x_linux-amd64.tar.gz
- 32ビットシステム：hugo_extended_x.xxx.x_linux-386.tar.gz
- ARMアーキテクチャ：対応する hugo_extended_x.xxx.x_linux-arm64.tar.gz
ターミナルを開き、ダウンロードしたファイルのディレクトリに移動：

`1`	`cd /path/to/downloaded/file`

ファイルを解凍：

`1`	`tar -zxvf hugo_extended_x.xxx.x_linux-amd64.tar.gz`

Hugo実行ファイルをシステムパスに移動：

`1`	`sudo mv hugo /usr/local/bin/`

インストールを確認：

`1`	`hugo version`

出力がhugo v0.160.1-d6bc8165e62b29d7d70ede01ed01d0f88de327e6+extended xxx/amd64 BuildDate=2026-04-08T14:02:42Z VendorInfo=gohugoioに類似していれば、インストール成功です。

プロジェクトを編集する

プロジェクトに入る

新しい空のフォルダを英名で作成
VS Codeを開き、「フォルダを開く…」をクリックし、先ほど作成したフォルダを選択

Ctrl + Jを押してターミナルを開き、私のプロジェクト¹をクローン

💡 ヒント

中国のユーザーは2番目のコマンドを優先的に使用してください

Windowsユーザー

1
2

git clone https://github.com/GuGuIsNotAPigeon/hugo-theme-stack.git .\
git clone https://gh-proxy.org/https://github.com/GuGuIsNotAPigeon/hugo-theme-stack.git .\

Linux/macOSユーザー

1
2

git clone https://github.com/GuGuIsNotAPigeon/hugo-theme-stack.git ./
git clone https://gh-proxy.org/https://github.com/GuGuIsNotAPigeon/hugo-theme-stack.git ./

プロジェクトを変更する

左側のエクスプローラーでconfig\_default\languages.tomlを開き、titleの後の内容をあなたのニックネームに変更し、subtitleの後にサブタイトルを入力
config\_default\params.tomlを開き、[sidebar]の下のavatarでアバターリンクを変更
config\_default\hugo.tomlを開き、baseURL = "https://guguisnotapigeon.github.io/"をhttps://あなたのGitHubユーザー名.github.ioに変更

他のファイルの変更については、元の作成者のチュートリアルを参照し、実際の状況に応じて調整してください

💡 ヒント

テキストやリンクに関係なく、英数字ダブルクォーテーション内で変更する必要があります

ターミナルで以下のコマンドを実行し、Ctrlキーを押しながらhttp://localhost:xxxxをクリックしてブラウザでウェブサイトをプレビュー：

`1`	`hugo serve -D`

記事を追加する

💡 ヒント

記事ディレクトリは記事をより良く分類するためのものです。ディレクトリ名には英語を使用することをお勧めします

Windowsユーザーはターミナルで以下のスクリプトを実行：

`1`	`.\newPost.bat`

Linux/macOSユーザーは以下のコマンドを実行：

1
2

chmod +x ./newPost.sh
./newPost.sh

対応するディレクトリのindex.ja.mdを開き、以下の内容を変更：

title：記事タイトル
description：記事説明
image：記事カバー画像パス（相対パスを使用可能）
comments：コメントセクションの切り替え（オン：true、オフ：false）

💡 ヒント

draft: trueをdraft: falseに変更してください

記事の内容については、元の作成者のMarkdown構文ガイドを参照してください

💡 ヒント

hugo serve -Dを実行すると、記事の変更をリアルタイムで確認できます

ウェブサイトをデプロイする

静的ページを生成する

記事を書き終わったら、プロジェクトルートで以下のコマンドを実行して静的ページを生成：

hugo

多くのファイルがpublicフォルダに表示されます。

次に以下のコマンドを実行：

cd public
git init
git config --global --add safe.directory /absolute/path/to/your/project/public
git remote add origin https://github.com/your-github-username/your-github-username.github.io.git
git checkout -b main
git pull origin main
git status
git add .
git config --global user.email "your-github-email@example.com"
git config --global user.name "your-github-username"
git commit -m "Your commit message"
git push origin main

プロジェクトをプッシュする

GitHubリポジトリを開き、「Settings」→「Pages」をクリックし、「Branch」を「None」から「main」に変更し、「Save」をクリック

GitHubのデプロイが完了するのを待ちます。その後、以下のアドレスでブログにアクセスできます²

📝 クイックメモ

その後のプッシュはgitPush.batを実行してください

インストーラーを実行し、インストールウィザードに従ってインストールしてください。

VS Codeの設定

インストール後、デスクトップからVisual Studio Codeを開き、以下のプラグインを検索してインストールしてください：

インストール後、VS Codeを再起動すると、ソフトウェア全体が中文で表示されます。

Gitのインストール

Gitは分散バージョン管理システムで、ソースコードやデータのバージョンを管理できます。ソフトウェア開発者が共同開発でソースコードを管理するために一般的に使用されています
— Wikipediaより引用

Gitのダウンロードとインストール

Gitダウンロードページを開き、使用しているOSに適したインストーラーをダウンロードしてください。

GitHubの設定

GitHubアカウントを登録する

GitHubホームページを開き、「Sign up」をクリックして、情報を入力して登録を完了してください。

新規リポジトリを作成する

SSH鍵を設定する

スタートメニューで「Git Bash」を検索して開くか、デスクトップの空白处を右クリックし、「Open Git Bash Here」を選択してください。

以下のコマンドを実行します（your_email@example.comをあなたのメールアドレスに置き換えてください）。確認を求められたらEnterを押してください：

1
2

ssh-keygen -t ed25519 -C "your_email@example.com"
cat ~/.ssh/id*.pub

📌 重要

鍵の最後にスペースがないことを確認してください！

最後にターミナルでSSH接続をテストします。xxx! You've successfully authenticated, but GitHub does not provide shell access.が表示されれば接続成功です。

Hugoのインストール

WindowsにHugoをインストールする

MicrosoftのWindowsパッケージマネージャーwingetを使用する

Hugo Extendedをインストール

`1`	`winget install Hugo.Hugo.Extended`

Hugo Extendedをアンインストール

`1`	`winget uninstall --name "Hugo (Extended)"`

GitHubのコンパイル済みバイナリを使用する

GitHubからhugo_extended_x.xxx.x_windows-amd64.zipをダウンロードし、解凍してから環境変数を設定してください

LinuxにHugoをインストールする

パッケージマネージャーを使用する

Ubuntu/Debianシステム
- aptでHugo Extendedをインストール
1 2

sudo apt-get update sudo apt-get install hugo
Fedoraシステム
- dnfでインストール
1

sudo dnf install hugo
Arch Linuxシステム
- pacmanでインストール
1

sudo pacman -S hugo

コンパイル済みバイナリを使用する

💡 ヒント

この方法は最新バージョンのHugo、特にExtendedバージョンを取得できます

Hugoリリースページを開き、システムに適したファイルをダウンロード：
- 64ビットシステム：hugo_extended_x.xxx.x_linux-amd64.tar.gz
- 32ビットシステム：hugo_extended_x.xxx.x_linux-386.tar.gz
- ARMアーキテクチャ： соответствующий hugo_extended_x.xxx.x_linux-arm64.tar.gz
ターミナルを開き、ダウンロードしたファイルのディレクトリに移動：

`1`	`cd /path/to/downloaded/file`

ファイルを解凍：

`1`	`tar -zxvf hugo_extended_x.xxx.x_linux-amd64.tar.gz`

Hugo実行ファイルをシステムパスに移動：

`1`	`sudo mv hugo /usr/local/bin/`

インストールを確認：

`1`	`hugo version`

出力がhugo v0.160.1-d6bc8165e62b29d7d70ede01ed01d0f88de327e6+extended xxx/amd64 BuildDate=2026-04-08T14:02:42Z VendorInfo=gohugoioに類似していれば、インストール成功です。

プロジェクトを編集する

プロジェクトに入る

新しい空のフォルダを英名で作成
VS Codeを開き、「フォルダを開く…」をクリックし、先ほど作成したフォルダを選択

Ctrl + Jを押してターミナルを開き、私のプロジェクト¹をクローン

💡 ヒント

中国のユーザーは2番目のコマンドを優先的に使用してください

Windowsユーザー

1
2

git clone https://github.com/GuGuIsNotAPigeon/hugo-theme-stack.git .\
git clone https://gh-proxy.org/https://github.com/GuGuIsNotAPigeon/hugo-theme-stack.git .\

Linux/macOSユーザー

1
2

git clone https://github.com/GuGuIsNotAPigeon/hugo-theme-stack.git ./
git clone https://gh-proxy.org/https://github.com/GuGuIsNotAPigeon/hugo-theme-stack.git ./

プロジェクトを変更する

左側のエクスプローラーでconfig\_default\languages.tomlを開き、titleの後の内容をあなたのニックネームに変更し、subtitleの後にサブタイトルを入力
config\_default\params.tomlを開き、[sidebar]の下のavatarでアバターリンクを変更
他のファイルの変更については、元の作成者のチュートリアルを参照し、実際の状況に応じて調整してください

💡 ヒント

テキストやリンクに関係なく、英数字ダブルクォーテーション内で変更する必要があります

ターミナルで以下のコマンドを実行し、Ctrlキーを押しながらhttp://localhost:xxxxをクリックしてブラウザでウェブサイトをプレビュー：

`1`	`hugo serve -D`

記事を追加する

💡 ヒント

記事ディレクトリは記事をより良く分類するためのものです。ディレクトリ名には英語を使用することをお勧めします

Windowsユーザーはターミナルで以下のスクリプトを実行：

`1`	`.\newPost.bat`

Linux/macOSユーザーは以下のコマンドを実行：

1
2

chmod +x ./newPost.sh
./newPost.sh

対応するディレクトリのindex.ja.mdを開き、以下の内容を変更：

title：記事タイトル
description：記事説明
image：記事カバー画像パス（相対パスを使用可能）
comments：コメントセクションの切り替え（オン：true、オフ：false）

💡 ヒント

draft: trueをdraft: falseに変更してください

記事の内容については、元の作成者のMarkdown構文ガイドを参照してください

💡 ヒント

hugo serve -Dを実行すると、記事の変更をリアルタイムで確認できます

ウェブサイトをデプロイする

静的ページを生成する

記事を書き終わったら、プロジェクトルートで以下のコマンドを実行して静的ページを生成：

hugo

多くのファイルがpublicフォルダに表示されます。次に以下のコマンドを実行：

cd public
git init
git config --global --add safe.directory /absolute/path/to/your/project/public
git remote add origin https://github.com/your-github-username/your-github-username.github.io.git
git checkout -b main
git pull origin main
git status
git add .
git config --global user.email "your-github-email@example.com"
git config --global user.name "your-github-username"
git commit -m "Your commit message"
git push origin main

プロジェクトをプッシュする

GitHubリポジトリを開き、「Settings」→「Pages」をクリックし、「Branch」を「None」から「main」に変更し、「Save」をクリック

GitHubのデプロイが完了するのを待ちます。その後、以下のアドレスでブログにアクセスできます²：

このプロジェクトはJimmyさんのStackテーマをAIで改変したものです ↩︎ ↩︎
アドレスは https://your-github-username.github.io ↩︎ ↩︎

VS Code on GuGuIsNotPigeon

Hugoで自分のブログを作ろう

ブログを作ろう

準備

VS Codeのインストール

VS Codeのダウンロードとインストール

VS Codeの設定

Gitのインストール

Gitのダウンロードとインストール

GitHubの設定

GitHubアカウントを登録する

新規リポジトリを作成する

SSH鍵を設定する

Hugoのインストール

WindowsにHugoをインストールする

MicrosoftのWindowsパッケージマネージャーwingetを使用する

GitHubのコンパイル済みバイナリを使用する

LinuxにHugoをインストールする

パッケージマネージャーを使用する

コンパイル済みバイナリを使用する

プロジェクトを編集する

プロジェクトに入る

プロジェクトを変更する

記事を追加する

ウェブサイトをデプロイする

静的ページを生成する

プロジェクトをプッシュする

VS Codeの設定

Gitのインストール

Gitのダウンロードとインストール

GitHubの設定

GitHubアカウントを登録する

新規リポジトリを作成する

SSH鍵を設定する

Hugoのインストール

WindowsにHugoをインストールする

MicrosoftのWindowsパッケージマネージャーwingetを使用する

GitHubのコンパイル済みバイナリを使用する

LinuxにHugoをインストールする

パッケージマネージャーを使用する

コンパイル済みバイナリを使用する

プロジェクトを編集する

プロジェクトに入る

プロジェクトを変更する

記事を追加する

ウェブサイトをデプロイする

静的ページを生成する

プロジェクトをプッシュする