Gatsby はサイトを public/ 内の通常のファイルにビルドします。各ページの HTML と、ナビゲーションを高速にする JavaScript です。2023 年に Gatsby Cloud が終了して以来、多くの Gatsby サイトが新しいホストを必要としています。Lobsite はビルドされたフォルダをホストします。gatsby build を実行してから npx lobsite を実行すると、HTTPS 対応の *.lobsite.app アドレスでサイトが公開されます。
仕組み
npx gatsby build（またはnpm run build）でサイトをビルドします。Gatsby はpublic/に書き出します。- プロジェクトで
npx lobsiteを実行します。public/を検出してデプロイします。Gatsby プロジェクトではこれがビルド出力で、独自の静的ファイルはstatic/にあります。最初のデプロイにアカウントは不要で、6 時間有効です。 - 取得リンクから無料アカウントにサイトを残します。その後は同じ 2 つのコマンドで同じアドレスが更新されます。
gatsby-config の設定
// gatsby-config.js
module.exports = {
siteMetadata: { siteUrl: "https://my-site.lobsite.app" },
};
siteMetadata.siteUrlはサイトの完全なアドレスです。gatsby-plugin-sitemap、正規リンク、フィードが読み取ります。pathPrefixは不要です。サイトはアドレスの最上位から配信されます。GitHub Pages 用に設定していた場合は、--prefix-pathsなしでビルドしてください。gatsby cleanはキャッシュとpublic/をクリアします。削除したページがデプロイに表示される場合に実行してください。
Gatsby のサーバー機能が必要なもの
静的ページ、gatsby-plugin-image、GraphQL のデータは gatsby build の間に解決されるため、すべて動作します。Gatsby Functions（src/api）、getServerData によるサーバーサイドレンダリング、Deferred Static Generation の 3 つはサーバーが必要で、Lobsite では動作しません。お問い合わせフォームを処理する関数は、/_lobsite/forms/contact に送信するフォームに置き換えてください。フォームをご覧ください。createRedirect で作成したリダイレクトにはホスト用のプラグインが必要です。Lobsite では代わりに lobsite.toml に記述してください。リダイレクトジェネレーターで作成できます。
ファイルはハッシュで保存されます。変更のないサイトを再デプロイしてもアップロードは 0 バイトです。
公開前にプレビューできます。リダイレクトも含めてワンクリックでロールバックできます。
すべてのサイトに、最初のデプロイから HTTPS 対応の *.lobsite.app アドレスが付きます。
フォームの送信先を /_lobsite/forms/contact にするだけです。スパムフィルターも含まれます。
リダイレクト、ヘッダー、フォームは lobsite.toml に記述し、デプロイごとに一緒に反映されます。
アカウントなしのデプロイは 6 時間公開されます。取得リンクから無料で残せます。
Gatsby ホストの比較
| Lobsite | Netlify | GitHub Pages | |
|---|---|---|---|
| 静的 Gatsby サイト | はい | はい | はい |
| Functions、SSR、DSG | いいえ | はい | いいえ |
| サーバーでのビルド | いいえ: public/ をデプロイ |
はい | GitHub Actions で |
| 変更されたファイルのみアップロード | はい | はい | Git 経由 |
| 最初のデプロイ前のアカウント | 不要: 6 時間公開、その後無料で残せる | 必要 | 必要（リポジトリも） |
| バックエンド不要のフォーム | はい（サイトをアカウントに残した後） | はい | いいえ |
| カスタムドメイン | はい、無料 | はい | はい |
2023 年に Gatsby を引き継いだ Netlify では、サーバー機能も動作します。多くの Gatsby サイトのように静的なサイトなら、Lobsite はコマンド 1 つでビルド済みフォルダをデプロイでき、Gatsby のハッシュ付きファイル名により、再ビルドしても実際に変更されたファイルのみがアップロードされます。
よくある質問
Gatsby Cloud が終了した今、Gatsby サイトをどこでホストできますか？
どの静的ホストでもビルドされた Gatsby サイトを配信できます。Lobsite では gatsby build と npx lobsite を実行するだけで、最初のデプロイにアカウントは不要です。
npx lobsite が Gatsby で public/ をデプロイするのはなぜですか？
Gatsby がビルドしたサイトを public/ に書き出すからです。favicon.ico のようにコピーする独自のファイルは static/ に置くと、ビルド時に Gatsby が public/ にコピーします。
gatsby-plugin-image は静的ホストで動作しますか？
はい。画像は gatsby build の間にリサイズされて public/ に書き出されるため、デプロイ時には通常のファイルです。
Gatsby の 404 ページは動作しますか？
はい。src/pages/404.js は 404.html にビルドされ、Lobsite は存在しないアドレスに対して 404 ステータスで配信します。