+++

テーマを作り終え、記事も充実してきたらいよいよ作成したHugoサイトを全世界に向けてインターネット上に公開(デプロイ)する段階です!
静的サイトジェネレーターで構築したサイトをサーバーへ公開する方法には、大きく分類して2つのアプローチが存在します。

この記事では、昔ながらの「手動アップロード」と、現代のモダンなWeb制作で主流となっている「自動デプロイ」の違いと、これからのチュートリアルで目指す運用体制の全体像(ロードマップ)について解説します。

方法1: 昔ながらの「手動アップロード」 (The Classic Way)

一番シンプルな考え方です。
自分のパソコンで hugo コマンドを叩くと、public フォルダの中にHTMLファイルがたくさん作られますよね?
この public フォルダの中身を、サーバーに “ポン” と置く 方法です。

手順と流れ

【コマンド操作】

  1. ビルドする
    hugo
    # -> "public" フォルダにHTMLが生成される
    
  2. FTPソフトでpublicフォルダ内のファイルをサーバーにアップロードする

【図解】

sequenceDiagram actor Me as "自分" participant PC as "パソコン" participant Server as "Webサーバー" Me->>PC: "1. 記事を書く" Me->>PC: "2. ビルド (hugoコマンド)" PC-->>Me: "publicフォルダ生成" Me->>Server: "3. FTPでアップロード" Server-->>Me: "公開完了!"
  • メリット: 仕組みが直感的で分かりやすい。
  • デメリット: 記事を書くたびにアップロード作業が必要。間違ってファイルを消してしまうリスクがある。

方法2: 今どきの「自動デプロイ」 (The Modern Way)

このチュートリアルで紹介する、現在主流と言える方法です。
「Git (ギット)」 というツールを使って、クラウド上の倉庫 「GitHub (ギットハブ)」 に変更履歴を保存します。
すると、GitHubが 「お、変更があったな!」 と検知して、自動的にサーバーへ公開してくれます。

手順と流れ

【コマンド操作】
あなたがやるのは、この3ステップだけです。

git add .                      # 1. 変更をパック詰め
git commit -m "記事を追加"     # 2. ラベルを貼る
git push                       # 3. 倉庫(GitHub)へ発送!

あとは全自動です。

【図解】

sequenceDiagram actor Me as "自分" participant PC as "パソコン (Git)" participant GitHub as "GitHub (倉庫)" participant Actions as "自動ロボット" participant Server as "Webサーバー" Me->>PC: "1. 記事を書く" Me->>PC: "2. git push (送信)" PC->>GitHub: "3. 変更履歴をアップロード" GitHub->>Actions: "4. 更新を検知して起動" Actions-->>Actions: "Hugoでビルド" Actions->>Server: "5. 公開 (デプロイ)" Server-->>Me: "公開完了!"
  • メリット:
    • 全自動: あなたは「保存(Push)」するだけ。寝てても勝手に公開されます。
    • 安全: 過去の状態に戻したり、誰がどこを変更したか履歴が残ります。
    • バックアップ: PCが壊れても、GitHubにデータがあるので安心です。

モダンな公開フローで快適なブログ運営を体験しよう

難しそうに聞こえる用語が並んでいますが、一度この「GitHubを利用した自動デプロイ体制(CI/CD)」を構築してしまえば、日々の運用作業は驚くほど楽になり執筆にのみ集中することができます。
これからの各チュートリアル記事で、一つ一つの作業を確実にクリアして最強のブログ環境を作り上げましょう。まずは Part 1:GitとGitHubの準備 からスタートです! 🚀