ブログトップページ

ブログを作ろう

💡 ヒント

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

準備

VS Codeのインストール

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

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

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

VS Codeダウンロードページ

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

VS Codeインストール

VS Codeの設定

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

中国語言語パック TOML構文ハイライト HTMLライブプレビュー

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

中文表示のVS Code

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

自動保存

Gitのインストール

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

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

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

Gitダウンロードページ

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

Gitインストール

GitHubの設定

GitHubアカウントを登録する

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

GitHubホームページ GitHubサインアップ

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

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

新規リポジトリ作成

SSH鍵を設定する

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

デスクトップでGit Bashを開く

以下のコマンドを実行します（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鍵作成

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

SSH接続テスト

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をダウンロードし、解凍してから環境変数を設定してください

Hugo Extendedダウンロード

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を開き、「フォルダを開く…」をクリックし、先ほど作成したフォルダを選択

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に変更

languages.toml params.toml hugo.toml

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

Stack公式チュートリアル

💡 ヒント

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

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

1

hugo serve -D

hugo serve -D

記事を追加する

💡 ヒント

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

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

1

.\newPost.bat

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

1
2


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

newPost

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

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

💡 ヒント

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

index.ja.md最初の段落

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

Markdown構文ガイド

💡 ヒント

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

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

静的ページを生成する

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

1

hugo

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

publicフォルダ

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


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 Pages

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

マイブログ

📝 クイックメモ

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