gatsby starter landing page

Gatsby-Landingpage-Starter

Ein einfacher, minimalistischer und benutzerfreundlicher Landingpage-Starter ohne jeglichen Schnickschnack, den Sie später einfach entfernen müssen. Erstellen Sie eine superschnelle, schöne Landingpage aus einer einfachen Vorlage mit einer einzigen Seite, die bereits gut aussieht.

Voraussetzungen

Wenn Sie die Gatsby-CLI noch nicht installiert haben, tun Sie dies zuerst.

npm install --global gatsby-cli

Die Gatsby-CLI verwendet Node und npm, die ebenfalls installiert werden müssen. Weitere Informationen finden Sie auf GatsbyJS.org.

Erste Schritte

Installieren Sie den Starter mit dem Befehl Gatsby new.

gatsby new landing-page https://github.com/gillkyle/gatsby-starter-landing-page.git

Navigieren Sie in das Projektverzeichnis und starten Sie die Site.

 cd landing-page && gatsby develop

Die Site wird in Ihrem Standardbrowser unter http://localhost:8000 geöffnet

Bearbeiten Sie den Code in /src , speichern Sie Ihre Änderungen und sie werden sofort im Browser neu geladen.

? Was ist drin?

Der minimale Landingpage-Starter verfügt bereits über ein paar installierte Plugins, aber sein Hauptaugenmerk liegt darauf, einfach zu bleiben und sauber auszusehen. Diese Dinge sind standardmäßig enthalten:

• ? Gatsby-Bild: Bilder, die dem Ordner src/images hinzugefügt werden, werden automatisch vom gatsby-image Plugin optimiert und können mit verzögertem Laden und Unschärfeeffekten in Komponenten gezogen werden
• Analytics: Fügen Sie Ihre Google Analytics-Tracking-ID zu gatsby-config.js hinzu, um automatisch mit der Verfolgung von Besuchern der Website zu beginnen
• ? Sitemap: Alle neuen Seiten, die der Site hinzugefügt werden, werden über gatsby-plugin-sitemap automatisch zu einer Sitemap zusammengestellt
• ? Farbthema: Die Datei src/styles/constants.js enthält eine Reihe von Farben und Standardstilen, die inline auf Komponenten auf der Site angewendet werden und mit Ihren eigenen Stilen überschrieben werden können

? Experiment

Wenn Sie versuchen möchten, auf einem Online-Spielplatz mit dem Quellcode zu spielen, können Sie mit dieser Schaltfläche das Repo in Codesandox öffnen.

? Einsetzen

Wenn Sie eine Website nur ganz schnell online sehen möchten, können Sie mit dieser Schaltfläche eine Kopie der Website auf Netlify bereitstellen.

Um einen optimierten Build der Site zu erstellen, führen Sie diesen Befehl aus

gatsby build

Es wird ein Ordner /public erstellt, der für einen Dienst wie Netlify, Surge, GitHub Pages, AWS S3, Firebase Hosting oder Ihren eigenen Dateiserver bereitgestellt werden kann.