If you find this starter helpful follow me on Indie Hackers.
install Gatsby CLI - more info
npm install -g gatsby-cli
yarn global add gatsby-cli
install the starter locally:
gatsby new gatsby-starter-saas-marketing https://github.com/keegn/gatsby-starter-saas-marketing
start the development server:
At the project root, compile your application for deployment:
Clean the cache to fix certain errors - run the clean command before starting the dev server:
At the project root, serve the production build of your site:
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
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
⚠️ 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.
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>