Live Demo: https://gatsby-starter-saas-marketing.netlify.com/ - ⚠️ live demo deployment is no longer available on Netlify.

install Gatsby CLI - more info

npm install -g gatsby-cli

or

yarn global add gatsby-cli

install the starter locally:

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

install dependencies:

yarn install

start the development server:

gatsby develop

At the project root, compile your application for deployment:

gatsby build

Clean the cache to fix certain errors - run the clean command before starting the dev server:

gatsby clean

At the project root, serve the production build of your site:

gatsby serve

This starter uses styled-components. The theme file contains the base styles src/styles/theme.js and the global styles file contains basic element styles and a style reset src/styles/GlobalStyles.js.

This starter uses react-anchor-link-smooth-scroll and react-scrollspy. To link a navigation item to a section simply add an id and string value to a section parent element that corresponds to the same navigation string value in navigation.js

⚠️ Only the Features section is linked. Product and Pricing sections are intentionally not linked and will throw a TypeError in the console when clicked (because they do not exist in the starter). Please reach out if you want help extending this feature.

Deployment Guide

Form Handling with Gatsby.js V2 and Netlify

In header.js replacing the existing <HeaderForm>...</HeaderForm> components with the following should provide a working example once your site is deployed:

<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>