+++

ここからは、ローカル環境で完成したHugoサイトをインターネットに公開するための「デプロイ編」セクションへと本格的に突入します！

まずは自動化のための必須基盤として、Git（ギット） と GitHub（ギットハブ） の準備を行います。
このツール群を導入することで、これまでに書いた大切な記事や苦労して作成したテーマのコードを安全にクラウド上に保存（履歴ごとのバックアップ）できるようになるだけでなく、「GitHubのサーバーに変更を感知させて自動で本番サイトを更新する」という強力な運用が可能になります。初心者がつまづきやすいポイントをひとつずつ丁寧にクリアしていきましょう！

0. そもそもGitとGitHubって何？

この2つ、似ているけど「役割」違います。

  • Git (ギット): 自分のパソコンに入っている 「タイムマシン（バージョン管理システム）」 です。

    • 「あの時の状態に戻したい！」ができるようになります。
    • 「誰がどこを変えたか」の履歴を残せます。
    • チーム開発の必須ツール: 「Aさんの作業とBさんの作業を合体させる」なんてことも得意なので、複数人での開発にも欠かせません。
    • ずっと無料: ローカル（自分のPC）にインストールして使うソフトなので、何回使っても無料です。

  • GitHub (ギットハブ): インターネット上にある 「巨大な倉庫」 です。

    • 自分のパソコンにあるGitのデータを、クラウドに保存（バックアップ）できます。
    • 自動デプロイなど、便利な機能の司令塔になります。
    • 基本無料: 個人利用なら、非公開（Private）リポジトリでも無料で作れます。

これからやる作業は、「手元のタイムマシン(Git)でセーブして、倉庫(GitHub)に送る」という流れです。

1. Gitで何を管理するの？

Hugoのプロジェクトには、「Gitに含めるべきファイル」 と 「含めてはいけないファイル」 があります。

種類フォルダ/ファイルGitに含める？理由
ソースコードcontent/✅ YES記事の原稿（一番大事！）
ソースコードlayouts/✅ YES自作したテンプレート
静的ファイルstatic/✅ YES画像やCSSなど（これも大事な素材）
設定ファイルhugo.toml✅ YESサイトの設定情報
生成物public/❌ NOHugoが自動生成するHTML。これは使い捨てです。
キャッシュresources/❌ NO画像処理などのキャッシュ。なくても再生成できます。

Point:
static/images などの画像ファイルは、あなたが用意した「素材」なので、必ずGitに含めます。
逆に、public フォルダは hugo コマンドを叩けばいつでも一瞬で作れるので、Gitで管理する必要はありません（むしろ管理すると競合トラブルの元になります）。

2. .gitignore ファイルを作ろう

「Gitに含めないファイル」を間違ってアップロードしないように、「無視リスト」 を作ります。
プロジェクトのルート（hugo.toml がある場所）に、.gitignore （ドット・ギットイグノア）という名前のファイルを作成し、以下のように記述します。

# Hugoの生成物（ビルド結果）は無視
/public/

# 画像処理のキャッシュなどは無視
/resources/_gen/

# Hugoがビルド中に作るロックファイル
.hugo_build.lock

# その他の不要ファイル
.DS_Store
Thumbs.db

これで、public フォルダなどは自動的にGitの管理対象外になります。安心ですね！

3. Gitのインストール (Windowsの方は必須！)

実は、Windowsには初期状態ではGitが入っていません。
Macの方は最初から入っていることが多いですが、念のため確認しましょう。

手順

  1. ターミナル（WindowsならPowerShell、MacならTerminal）を開き、以下のコマンドを入力します。
    git --version
  2. バージョン番号が表示されればOKです。
  3. 「コマンドが見つかりません」 と出たり、入っていない場合はインストールしましょう。
    • Windows: Git for Windows をダウンロードしてインストールします。
      • インストール中の設定は、基本的に全て「Next（次へ）」で大丈夫です。
    • Mac: git コマンドを打つと自動的に「インストールしますか？」と聞かれることがあります。聞かれなければ 公式サイト からインストーラーを入れるのが簡単です。

4. ローカルリポジトリの作成 (コマンド操作)

ターミナル（コマンドプロンプトやVS Codeのターミナル）を開き、プロジェクトのフォルダで以下のコマンドを入力します。

手順

  1. 初期化: 今のフォルダをGit管理下に置きます。

    git init

  2. コミット: 全ファイルを「保存」します。

    git add .
git commit -m "First commit: Hugo project setup"

    ※ 初回はユーザー名などの設定を求められる場合があります。その場合は画面の指示に従って設定してください。

5. GitHubリポジトリの作成 (ブラウザ操作)

次に、アップロード先となる「倉庫」をGitHub上に作ります。

  1. GitHub にログインします。
  2. 右上の 「+」アイコン → 「New repository」 をクリック。
  3. Repository name に好きな名前（例: my-hugo-blog）を入力。
  4. Public（公開）か Private（非公開）を選択。
    • オープンソースとして公開するなら Public。
    • 誤って公開したくない情報が含まれる可能性があるなら Private（最初はこれが無難です）。
  5. 「Create repository」 をクリック。

コラム：PublicとPrivateどっちがいい？

「全世界に公開するサイトだから、リポジトリもPublicにしなきゃいけないの？」
と迷うかもしれませんが、サイトの公開設定とリポジトリの公開設定は別物 です。

  • Private (非公開):
    • メリット: 安全です。
      まだ公開したくない下書き記事や、うっかり個人情報（APIキーなど）を書いてしまっても、他人に見られる心配がありません。最初はPrivateで始めるのがおすすめです。
  • Public (公開):
    • メリット: 世界中の人とコードを共有できます。
      オープンソース活動や、ポートフォリオ（作品集）としてコードを見てもらいたい場合に選びます。

このチュートリアルでは、どちらを選んでも問題なく進められます！

6. ついにアップロード！

GitHubのリポジトリができたら、最後にローカルのデータをアップロード（プッシュ）します。
GitHubの画面に表示されているコマンド（…or push an existing repository from the command line の部分）をコピーして、ターミナルで実行します。

# 例（URLはお自分のものに書き換えてください）
git remote add origin https://github.com/YourName/my-hugo-blog.git
git branch -M main
git push -u origin main

成功すれば、GitHubのページをリロードすると、あなたのファイルたちが表示されているはずです！🎉
public フォルダが含まれていなければ大成功です。

最初の壁を越えてクラウド連携を完了させよう

慣れない黒い画面（ターミナル）でのコマンド操作に戸惑うかもしれませんが、無事にGitHub上のリポジトリにあなたのファイルたちが表示されていれば、自動デプロイに向けた最大の山場となる第一関門は突破したことになります！🎉
このGitによるファイル管理手法はHugoに限らず、あらゆるモダンなプログラミング・Web制作において一生使える必須の「最強スキル」です。

次回は、このデータを受け取って実際にWebページとして表示してくれる「Googleのホスティングサーバー（公開場所）」を準備するステップへと進んでいきましょう！🚀