/gatsby-starter-saas-marketing

Primary LanguageJavaScriptMIT LicenseMIT

☁️ A simple one page marketing site starter for SaaS companies and indie hackers.

Live Demo: https://gatsby-starter-saas-marketing.netlify.com/

If you find this starter helpful, feel free to give me a follow on Indie Hackers. I'm working on releasing a series of Gatsby starters in Fall of 2020.

Gatsby Starter Saas Marketing Full Screen Image

Getting started 🍻

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

Styles

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.

Navigation

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.

Deploying to Netlify

Deployment Guide

Collect emails with Netlify Forms

Form Handling with Gatsby.js V2 and Netlify

Netlify form usage example

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>