gatsby starter saas marketing

☁️ Eine einfache einseitige Marketing -Site -Starter für SaaS -Unternehmen und Indie -Hacker.

Live-Demo: https://gatsbystarter-saas-marketing.netlify.com/--- Euen Live -Demo -Bereitstellung ist bei Netlify nicht mehr verfügbar.

Erste Schritte ?

Installieren Sie Gatsby Cli - Weitere Informationen

npm install -g gatsby-cli

oder

yarn global add gatsby-cli

Installieren Sie den Starter lokal:

gatsby new gatsby-starter-saas-marketing https://github.com/keegn/gatsby-starter-saas-marketing

Abhängigkeiten installieren:

yarn install

Starten Sie den Entwicklungsserver:

gatsby develop

Kompilieren Sie bei der Projektrohne Ihre Anwendung zur Bereitstellung:

gatsby build

Reinigen Sie den Cache, um bestimmte Fehler zu beheben. Führen Sie den Befehl sauber aus, bevor Sie den Dev -Server starten:

gatsby clean

Servieren Sie bei The Project Root den Produktionsaufbau Ihrer Website:

gatsby serve

Stile

Dieser Starter verwendet gestaltete Komponenten. Die Themendatei enthält die Basisstile src/styles/theme.js und die Global Styles -Datei enthält grundlegende Elementstile und einen Stil Reset src/styles/GlobalStyles.js .

Navigation

Dieser Starter verwendet React-Anchor-Link-Smooth-Scroll und React-ScrollSpy. Um ein Navigationselement navigation.js einem Abschnitt zu verknüpfen

Euen Nur der Abschnitt Features ist verknüpft. Produkt- und Preisabschnitte sind absichtlich nicht verknüpft und werfen beim Klicken einen TypeError in die Konsole (da sie im Starter nicht existieren). Bitte erreichen Sie, ob Sie Hilfe bei der Erweiterung dieser Funktion wünschen.

Bereitstellung für Netlify

Bereitstellungshandbuch

Sammeln Sie E -Mails mit Netlify -Formularen

Formulierung mit gatsby.js v2 und netlify

Netlify -Formularnutzungsbeispiel

In header.js ersetzen Sie die vorhandenen <HeaderForm>...</HeaderForm> Komponenten mit Folgendes sollten ein Arbeitsbeispiel angeben, sobald Ihre Website bereitgestellt wird:

 <HeaderForm
 name="early-access"
 method="post"
 data-netlify-honeypot="bot-field"
 data-netlify="true"
>
  <input type="hidden" name="bot-field" />
  <input type="hidden" name="form-name" value="early-access" />
  <HeaderInput
   type="email"
   placeholder="Your email"
   name="email"
   id="email"
   required
  />
  <HeaderButton>Early access</HeaderButton>
</HeaderForm>