Eleventy (11ty) はテンプレートと Markdown を受け取り、通常の HTML を _site/ に書き出します。追加しない限りクライアント側のフレームワークはありません。通常のファイルのフォルダは最も簡単にホストできます。ビルドしてから npx lobsite を実行すると、HTTPS 対応の *.lobsite.app アドレスでサイトが公開されます。上のボックスに _site/ をドロップすることもできます。
仕組み
npx @11ty/eleventy(またはnpm run build)でサイトをビルドします。Eleventy は_site/に書き出します。- プロジェクトで
npx lobsiteを実行します。_site/を検出してデプロイします。最初のデプロイにアカウントは不要で、6 時間有効です。 - 取得リンクから無料アカウントにサイトを残します。フォルダは
lobsite.tomlに保存されるため、以降のデプロイは同じサイトに反映されます。
Lobsite で重要な Eleventy の設定
// eleventy.config.js
export default function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("img");
eleventyConfig.addPassthroughCopy("css");
}
export const config = {
dir: { input: "src", output: "_site" },
};
- パススルーコピーは、画像、フォント、CSS を
_site/に届ける方法です。テンプレートでもコピー対象でもないファイルはデプロイされないため、公開サイトで何かが欠けている場合は、まず_site/にあるか確認してください。 pathPrefixは/のままにします。サイトはアドレスの最上位から配信されます。- 出力フォルダは
_siteのままでかまいません。変更する場合は一度フォルダを指定すると(npx lobsite ./dist)、lobsite.tomlに記憶されます。
パーマリンク、画像、古いファイル
Eleventy は about.md を about/index.html として書き出し、/about/ で開きます。.html で終わるパーマリンクは拡張子なしで開きます。@11ty/eleventy-img で処理した画像はビルド中に書き出されるため、他のファイルと同じようにデプロイされ、変更のない画像は再アップロードされません。多くのジェネレーターと同じく、Eleventy はビルド前に _site/ を空にしません。名前を変更したページの古いファイルが残ります。現在のページのみをデプロイするには、ビルド前に _site/ を削除してください(多くのスターターは build スクリプトで行っています)。
ファイルはハッシュで保存されます。変更のないサイトを再デプロイしてもアップロードは 0 バイトです。
公開前にプレビューできます。リダイレクトも含めてワンクリックでロールバックできます。
すべてのサイトに、最初のデプロイから HTTPS 対応の *.lobsite.app アドレスが付きます。
フォームの送信先を /_lobsite/forms/contact にするだけです。スパムフィルターも含まれます。
アカウントなしのデプロイは 6 時間公開されます。取得リンクから無料で残せます。
リダイレクト、ヘッダー、フォームは lobsite.toml に記述し、デプロイごとに一緒に反映されます。
Eleventy ホストの比較
| Lobsite | Netlify | Cloudflare Pages | GitHub Pages | |
|---|---|---|---|---|
| Eleventy のビルド | いいえ: _site/ をデプロイ |
はい | はい | GitHub Actions で |
| 最初のデプロイ前のアカウント | 不要: 6 時間公開、その後無料で残せる | 必要 | 必要 | 必要(リポジトリも) |
| 変更されたファイルのみアップロード | はい | はい | はい | Git 経由 |
| デプロイごとのプレビュー URL | はい | はい | はい | いいえ |
| バックエンド不要のフォーム | はい(サイトをアカウントに残した後) | はい | いいえ | いいえ |
| カスタムドメイン | はい、無料 | はい | はい | はい |
Netlify は長く Eleventy サイトの定番のホストで、Git からビルドします。Lobsite は、ローカルや CI でビルドし、ターミナルや AI エージェントからコマンド 1 つで、設定なしで公開したい場合に向いています。
よくある質問
11ty と Eleventy は同じですか?
はい。11ty は Eleventy の略称で、パッケージは @11ty/eleventy です。このページの内容はどちらの名前にも当てはまります。
デプロイした Eleventy サイトで画像が表示されないのはなぜですか?
おそらく _site/ に入っていません。フォルダのパススルーコピーを追加し(eleventyConfig.addPassthroughCopy("img"))、再度ビルドしてデプロイしてください。
Eleventy のサーバーレスやエッジレンダリングは Lobsite で動作しますか?
いいえ。Lobsite は _site/ のファイルを配信します。リクエストごとにページをレンダリングする機能には、関数を実行するホストが必要です。多くの Eleventy サイトのように事前にビルドされたページはすべて動作します。
Eleventy サイトにカスタム 404 ページを設定できますか?
はい。permalink: 404.html のテンプレートを作成すると、Lobsite は存在しないアドレスに対して 404 ステータスで配信します。