静的サイトジェネレータをVPSで自動ビルド・配信 ― Git pushで更新される高速サイトを作る

ブログやドキュメント，LPのような更新頻度がそこまで高くないサイトに，重いCMSは過剰だ．静的サイトジェネレータで生成したHTMLをVPSから配信すれば，速く・安全で・運用が軽いサイトになる．

さらにgit pushを起点に自動ビルド・自動配信する仕組みを組めば，「記事を書いてpushすれば数十秒後に公開」という快適な運用が手に入る．動的CMSの脆弱性やDBの管理からも解放される．

この記事は，VPSでブログ・ドキュメント・LP等を運用したい個人開発者に向けている．静的サイトの強みから，自動ビルドの仕組み，Nginxでの高速配信，CDN併用までを解説する．

読み終えたとき，あなたはgit pushするだけで更新される，高速で安全な静的サイトをVPSで運用できるようになっている．

なぜ静的サイトをVPSで配信するのか

静的サイト(事前生成されたHTML)は，表示が速く，攻撃面が小さく，サーバー負荷が極小だ．DBもアプリも動かさないため，脆弱性や障害のリスクが根本的に少ない．

「それなら静的ホスティングサービスでよいのでは」と思うかもしれない．多くの場合それで十分だが，VPSで配信する利点もある──他のサービスと同じサーバーに同居でき，配信を完全にコントロールでき，固定費で済む．

そしてgit pushを起点にした自動ビルドを組めば，運用は動的CMS並みに快適になる．「ローカルで書く→push→自動でビルド・公開」という流れだ．

速さ・安全・低運用負荷を，自分のVPSで完結させる── これが静的サイト×VPSの価値だ．

静的サイトジェネレータの選択

静的サイトジェネレータには様々な選択肢がある．用途と好みで選べばよい．重要なのは「ビルドするとHTML/CSS/JSが生成される」という共通点だ．

ツール	特徴	向き
Hugo	Go製・ビルドが非常に速い	ブログ・大量ページ
Astro	コンポーネント指向・高速	モダンなサイト全般
Next.js(SSG)	Reactベース・多機能	Reactで作りたい場合
Eleventy	シンプル・柔軟	軽量サイト

どれを選んでも，本記事の「ビルドして生成物をNginxで配信する」という構成は共通だ．ビルドコマンド(hugo，npm run build等)で生成されるディレクトリ(public/，dist/等)を配信する，と理解すればよい．

手動ビルド・配信の基本

まず基本の流れを押さえる．ビルドして生成物をNginxの配信ディレクトリに置くだけだ．これを自動化する前に，手動で動かして仕組みを理解する．

ビルドして配信(手動)

cd /home/deploy/mysite
git pull origin main
npm ci && npm run build      # dist/ が生成される(Hugoなら hugo で public/)
# 生成物を配信ディレクトリへ
rsync -a --delete dist/ /var/www/mysite/

rsync --deleteで，生成物を配信ディレクトリに同期する(古いファイルも掃除)．あとはNginxがこのディレクトリを配信するだけだ．この一連をスクリプト化し，次のステップで自動化する．

git pushを起点にした自動ビルド

理想は「pushしたら自動でビルド・配信」だ．実現方法は主に2つ──CI/CDでビルドして成果物を転送する方式と，VPS上でWebhookを受けてビルドする方式だ．

方式A: CI/CDでビルド→VPSへ転送

# GitHub Actions(CI/CD記事参照)
# 1. push を検知
# 2. npm ci && npm run build でビルド
# 3. rsync/scp で dist/ をVPSの /var/www/mysite/ へ転送
#    rsync -az --delete dist/ deploy@myvps:/var/www/mysite/

方式A(CI/CDでビルド)が現代的でおすすめだ．ビルドはCI側で行い，VPSには完成したHTMLを置くだけなので，VPSにNode等のビルド環境すら不要．VPSは純粋な配信に専念できる(Goデプロイの考え方に近い)．方式B(VPS上でビルド)は，VPSにビルド環境を持たせ，Webhookやcronでビルドを起動する．

Webhook方式とcron方式

VPS上でビルドする場合，Webhook(GitのpushでVPSのエンドポイントを叩き，ビルドスクリプトを起動)か，cron(定期的にgit pullしてビルド)で更新する．Webhookは即時反映，cronはシンプルだが反映に最大で間隔分の遅延がある．即時性が欲しければWebhook，手軽さならcron(定期実行記事参照)だ．

Nginxでの高速配信 ― 静的サイトの真価

静的サイトの配信は，Nginxの最も得意とする領域だ．圧縮・キャッシュ・HTTP/2をフルに効かせて，極限まで速くできる(Nginxチューニング記事参照)．

静的サイトの高速配信設定

server {
    listen 443 ssl;
    http2 on;
    server_name example.com;
    root /var/www/mysite;
    gzip on;
    # ハッシュ付きアセットは長期キャッシュ
    location ~* .(css|js|woff2|jpg|png|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    location / { try_files $uri $uri/ /index.html; }
}

静的ファイルは圧縮＋長期キャッシュ＋HTTP/2で，体感速度を極限まで高められる．DBもアプリも介さないため，レスポンスはミリ秒単位だ．これが静的サイトの真価で，Core Web Vitals(SEO)でも圧倒的に有利になる．

CDN併用 ― さらに速く、グローバルに

静的サイトはCDNと相性が抜群だ．VPSをオリジンにし，前段にCDNを置けば，世界中のエッジから配信され，VPSの負荷もほぼゼロになる(CDN記事で詳説)．

「VPSでビルド・配信し，CDNでキャッシュ配信」という構成は，速さ・耐障害性・低コストを同時に実現する．アクセスが増えてもVPSはほとんど仕事をせず，CDNが配信を肩代わりする．個人開発のブログやドキュメントには理想的な構成だ．

運用の軽さ ― 静的サイトの最大の利点

静的サイトの最大の利点は，運用が圧倒的に軽いことだ．動的CMSにつきものの心配事の多くが，そもそも存在しない．

セキュリティ：DBもログイン機能も無いため，攻撃面が極小(WordPressのような脆弱性対応に追われない)．
バックアップ：ソースはGitにある．サーバーが飛んでも再ビルドで復元できる．
負荷：静的配信は極めて軽く，小さなVPSでも大量アクセスを捌ける．
更新：git pushで自動公開．記事執筆に集中できる．

これらの軽さは，個人開発者の時間という最も貴重な資源を節約する．「サイトの保守」に追われず，コンテンツ作りや本業に集中できる．動的な機能(コメント・検索等)が必要な部分だけ外部サービスやAPIで補えば，静的サイトの軽さを保ちつつ機能も足せる．

補論：静的配信は「速いVPS」と「CDN」でほぼ無敵になる

静的サイトの配信性能は，VPSのディスク・ネットワークの速さで決まる(ビルドをCIに任せればVPSは配信に専念できる)．そしてCDNを併せれば，VPSの負荷はほぼゼロになる．

高速NVMe・50種類以上のOSテンプレートに対応した国内VPS─シン・VPS─ はNVMe SSDで静的ファイルの配信が非常に高速で，gzip・キャッシュ・HTTP/2の効果をフルに引き出せる．固定費で複数サイトを同居でき，スナップショットで構成変更も安全だ．CI/CDでビルドした成果物を置くだけの「軽い配信サーバー」として理想的だ．

公開には独自ドメインを．取り扱い400種類以上のドメイン取得サービス─ムームードメイン─ でドメインを取得してVPSに向け，前段にCDNを置けば，速く・安全で・運用の軽いサイトが完成する．サブディレクトリでブログを同居させるのも容易だ．

よくある質問(FAQ)

Q1．静的ホスティングサービスではなくVPSを使う利点は？

他サービスとの同居・配信の完全なコントロール・固定費だ．多くの場合は静的ホスティングで十分だが，VPSで他のアプリと一緒に運用したい・配信を握りたい場合にVPSが活きる．

Q2．ビルドはVPS上とCI/CDどちらでする？

CI/CDでビルドして成果物を転送する方式がおすすめだ．VPSにビルド環境(Node等)が不要になり，配信に専念できる．VPS上でビルドする場合はWebhookかcronで起動する．

Q3．更新を即時反映したい

CI/CD(push起点)かWebhook方式を使う．cron方式は手軽だが反映に最大で間隔分の遅延がある．即時性が要るならpushを起点にした自動ビルド・配信を組む．

Q4．静的サイトにコメントや検索は付けられる？

外部サービスやAPIで補える．コメントは外部サービス，検索はクライアントサイド検索や外部の検索APIを使う．静的サイトの軽さを保ちつつ動的機能を足せる．

Q5．どのジェネレータを選ぶべき？

ビルドの速さ重視ならHugo，モダンな開発体験ならAstro，Reactで作りたいならNext.js．どれでも「ビルドしてNginxで配信」の構成は共通なので，好みで選んでよい．

Q6．静的サイトのバックアップは？

ソースがGitにあれば，それがバックアップだ．サーバーが飛んでも再ビルドで完全復元できる．これも静的サイトの運用が軽い理由の一つだ．

まとめ ― 速く・安全で・運用が軽いサイトを自分のVPSで

静的サイトジェネレータ×VPSは，git pushで自動ビルド・配信され，速く・安全で・運用が軽いサイトを実現する．CI/CDでビルドし，Nginxで高速配信し，CDNを併せればほぼ無敵だ．

今日やるべきことは，好きなジェネレータでサイトをビルドし，生成物をNginxで配信してみること．そこからgit push起点の自動化へ進めば，運用は驚くほど軽くなる．

保守に追われず，コンテンツに集中できる── それが静的サイトの価値だ．速いVPSとCDNで，最高の配信基盤を自分の手に持とう．