Hugoでブログを書くのは楽しいのですが、デプロイだけがちょっと面倒なんですよね。 毎回FTPソフトを立ち上げて、更新ファイルを選んでアップロードして……。 そんな 「地味な手間」 を、GitHub Actionsで1秒に短縮したときの設定をまとめておきます。

Gitで送るのは「ソース」だけ。ビルドはGitHub Actionsに任せるのが正解

結論から言うと、一番楽なのは「GitHub側でHugoをビルドさせる」方法です。 これなら手元のPCで hugo を打つ必要すらありません。

  flowchart LR
    Local["PC (Local)"] -->|git push| GitHub["GitHub Actions"]
    GitHub -->|"Hugoビルド & 差分転送"| Xserver["Xserver"]

この構成のいいところは、手元のPCから送るのは数KBの「テキスト（Markdown）」だけで済むことです。 画像やHTMLといった重いファイルは、GitHubのサーバーが裏で作って、勝手にデプロイしてくれます。

コピペで動く！Xserver用デプロイ設定（deploy.yaml）

私が実際に動かしている設定ファイル（yaml）の中身はこんな感じです。 ドメイン名やパスなどは、自分の環境に合わせて読み替えてみてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

name: ブログをXserverにデプロイ

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: リポジトリのコードを取得
        uses: actions/checkout@v4
        with:
          fetch-depth: 1
          submodules: true # テーマを忘れずに取得

      - name: Hugo をインストール
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: "0.152.2"
          extended: true

      - name: Hugo ビルド
        run: hugo --minify --cleanDestinationDir

      - name: Xserverにデプロイ
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./public/
          server-dir: /example.com/public_html/ # ここを自分の環境に
          log-level: minimal
          state-name: .ftp-deploy-sync-state.json # 差分検知の鍵
          exclude: |
            **/.git*
            **/.git*/**
            **/node_modules/**
            .htaccess
            cgi-bin/

転送の「爆速化」は差分検知の設定が分かれ目になる

以前の私は、設定を間違えて「毎回全ファイルを送り直す」というもったいないことをしていました。 原因は dangerous-clean-slate: true という魔の項目です。

これを true にすると、サーバー上のファイルを一度全部消してからアップロードし直す挙動になります。 記事が増えてくると、デプロイだけで30分くらいかかっちゃうんですよね。

ここを false にして、state-name を指定すること。 これだけで、変更した記事だけを数秒で送ってくれる 「真の差分アップロード」 に変貌します。

「役割分担」の意味をAIに教わった気がする

この構成にたどり着くのに、AI（Gemini）とあーだこーだ話しました。 「FTPのほうが早いんじゃない？」「GitHubを経由する意味ある？」みたいな生意気な質問も投げた気がします。

でも、AI（Gemini）の指摘は冷静でした。 「Gitはソースコードを管理するのが仕事。ビルドされた大量のファイルを管理させるのは、Gitの良さを殺していますよ」と。

「変化（Markdown）」だけをPushして、「結果（HTML）」はActionsに作らせる。 この役割分担ができてから、デプロイを待つストレスが激減しました。

自動化の「レール」さえあれば、ブログはもっと楽しくなる

正直、最初の一回は設定がちょっとややこしいです。 FTPのパスを確認したり、GitHubのSecretsにパスワードを入れたり。

次は、画像圧縮の自動化を狙いたい

一度このレールさえ敷いてしまえば、あとは記事を書いて git push するだけ。 ブラウザをリロードしたときには、もう反映されています。

「面倒なことを、二度とやらない仕組み」を作る。 結局、こういう地味な自動化が一番ブログを長く続けるコツかもしれません。

次は、画像圧縮の自動化あたりを攻めてみようかなと思っています。地味な作業ほど、機械に任せた瞬間の快感がすごい（笑） これからも、「書く」に集中できる環境を整えていきます。