Live Demo: https://gatsby-starter-saas-marketing.netlify.com/
If you find this starter helpful follow me on Indie Hackers.
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
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.
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>