☁️ 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.
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
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
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>