Repository files navigation

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 usesstyled-components. The theme file contains the base stylessrc/styles/theme.js and the global styles file contains basic element styles and a style resetsrc/styles/GlobalStyles.js.

This starter usesreact-anchor-link-smooth-scroll andreact-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 innavigation.js

⚠️ Only theFeatures section is linked. Product and Pricing sections are intentionally not linked and will throw aTypeError 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

Inheader.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"     required  />  <HeaderButton>Early access</HeaderButton></HeaderForm>