Gatsby baut deine Website zu schlichten Dateien in public/: HTML für jede Seite, plus das JavaScript, das die Navigation schnell macht. Seit Gatsby Cloud 2023 geschlossen wurde, brauchten viele Gatsby-Websites ein neues Zuhause. Lobsite hostet den gebauten Ordner: Führe gatsby build aus, dann npx lobsite, und die Website ist unter einer *.lobsite.app-Adresse mit HTTPS live.
So funktioniert es
- Bau die Website mit
npx gatsby build(odernpm run build). Gatsby schreibt sie nachpublic/. - Führe
npx lobsiteaus im Projekt. Es findetpublic/und deployt ihn; in einem Gatsby-Projekt ist das die Build-Ausgabe, während deine eigenen statischen Dateien instatic/liegen. Das erste Deploy braucht kein Konto und hält 6 Stunden. - Behalte sie mit dem Übernahme-Link, in einem kostenlosen Konto. Danach aktualisieren dieselben zwei Befehle dieselbe Adresse.
Einstellungen in gatsby-config
// gatsby-config.js
module.exports = {
siteMetadata: { siteUrl: "https://my-site.lobsite.app" },
};
siteMetadata.siteUrlist deine vollständige Adresse.gatsby-plugin-sitemap, Canonical-Links und Feeds lesen sie.pathPrefixwird nicht gebraucht: Die Website wird ab der Wurzel ihrer Adresse ausgeliefert. Hast du es für GitHub Pages gesetzt, baue ohne--prefix-paths.gatsby cleanleert den Cache undpublic/. Führe es aus, wenn ein Deploy Seiten zeigt, die du entfernt hast.
Was die Server-Funktionen von Gatsby braucht
Statische Seiten, gatsby-plugin-image und Daten aus GraphQL funktionieren alle, weil sie während gatsby build aufgelöst werden. Drei Funktionen brauchen einen Server und laufen nicht auf Lobsite: Gatsby Functions (src/api), Server-Rendering mit getServerData und Deferred Static Generation. Ersetze eine Function, die ein Kontaktformular verarbeitet, durch ein Formular, das an /_lobsite/forms/contact sendet; siehe Formulare. Mit createRedirect erstellte Weiterleitungen brauchen ein Hoster-Plugin; auf Lobsite gehören sie stattdessen in lobsite.toml, mit dem Redirect-Generator.
Dateien werden nach ihrem Hash gespeichert. Ein erneutes Deploy einer unveränderten Website lädt 0 Bytes hoch.
Vorschau ansehen, bevor es live geht. Mit einem Klick zurückrollen, samt Weiterleitungen.
Jede Website bekommt ab dem ersten Deploy eine *.lobsite.app-Adresse mit HTTPS.
Lass ein Formular auf /_lobsite/forms/contact zeigen. Spamfilter inklusive.
Weiterleitungen, Header und Formulare stehen in lobsite.toml und reisen mit jedem Deploy mit.
Ein Deploy ohne Konto ist 6 Stunden live. Mit dem Übernahme-Link behältst du es, kostenlos.
Gatsby-Hoster im Vergleich
| Lobsite | Netlify | GitHub Pages | |
|---|---|---|---|
| Statische Gatsby-Websites | Ja | Ja | Ja |
| Functions, SSR, DSG | Nein | Ja | Nein |
| Baut auf dem Server | Nein: du deployst public/ |
Ja | In GitHub Actions |
| Nur geänderte Dateien werden hochgeladen | Ja | Ja | Über Git |
| Konto vor dem ersten Deploy | Nein: 6 Stunden live, dann kostenlos behalten | Ja | Ja, und ein Repository |
| Formulare ohne Backend | Ja, sobald die Website in einem Konto ist | Ja | Nein |
| Eigene Domain | Ja, kostenlos | Ja | Ja |
Netlify, das Gatsby 2023 übernommen hat, führt auch dessen Server-Funktionen aus. Für eine statische Gatsby-Website, und das sind die meisten, deployt Lobsite den gebauten Ordner mit einem Befehl, und dank der gehashten Dateinamen von Gatsby lädt ein Rebuild nur die Dateien hoch, die sich wirklich geändert haben.
Häufige Fragen
Wo kann ich eine Gatsby-Website hosten, jetzt wo Gatsby Cloud weg ist?
Jeder statische Hoster liefert eine gebaute Gatsby-Website aus. Auf Lobsite führst du gatsby build und npx lobsite aus; das erste Deploy braucht kein Konto.
Warum deployt npx lobsite bei Gatsby den Ordner public/?
Weil Gatsby die gebaute Website nach public/ schreibt. Eigene Dateien zum Kopieren, etwa favicon.ico, gehören nach static/, und Gatsby kopiert sie beim Build nach public/.
Funktioniert gatsby-plugin-image auf einem statischen Hoster?
Ja. Bilder werden während gatsby build skaliert und nach public/ geschrieben, beim Deployen sind sie also schlichte Dateien.
Funktioniert meine Gatsby-404-Seite?
Ja. src/pages/404.js erzeugt 404.html, und Lobsite liefert sie mit Status 404 für jede Adresse aus, die es nicht gibt.