keegn / gatsby-starter-saas-marketing Goto Github PK

View Code? Open in Web Editor NEW

201.0 4.0 61.0 6.99 MB

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

Home Page: https://gatsby-starter-saas-marketing.netlify.com/

License: MIT License

JavaScript 95.28% CSS 4.72%

gatsby saas marketing landing netlify lead-generation website one-page indie-hackers netlify-forms

gatsby-starter-saas-marketing's Introduction

☁️ 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 follow me on Indie Hackers.

Getting started 🍻

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

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>

gatsby-starter-saas-marketing's People

Contributors

Stargazers

Watchers

gatsby-starter-saas-marketing's Issues

Uncaught TypeError when clicking nav

There is currently an uncaught TypeError when one clicks any nav item. I've reproduced this locally and it also is an issue on the currently deployed site: https://gatsby-starter-saas-marketing.netlify.app/

ENOENT ".cache/match-paths.json"

After a fresh install with gatsby new gatsby-starter-saas-marketing https://github.com/keegn/gatsby-starter-saas-marketing , and gatsby serve, I'm getting the following error in the console:

failed We've encountered an error: Minified React error #31; visit
https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=Error%3A%20ENOENT%3A%2
0no%20such%20file%20or%20directory%2C%20open%20'%2FUsers%2Fredacted%2Fcode%2Fproject%2
Fwebsite%2F.cache%2Fmatch-paths.json'&args[]= for the full message or use the
non-minified dev environment for full errors and additional helpful warnings.

Which decodes to:

Objects are not valid as a React child (found: Error: ENOENT: no such file or directory, open '/Users/redacted/code/project/website/.cache/match-paths.json'). If you meant to render a collection of children, use an array instead.

Remove reference to outdated and vulnerable package

Gatsby-plugin-prefetch-google-fonts is archived, no longer updated and vulnerable.

Please see https://npmjs.com/advisories/1550

Does Not Build on M1 Mac - Sharp Plugin

Description

This does not build on M1 Macs

Steps to reproduce

Run yarn or npm install on an M1 Mac and it will fail

Expected result

The dependencies should be installed to allow you to run the site locally

Actual result

Error code 1

Environment

Tool	Version
Chrome	103
MacOS	12
node	16.15.0
npm	8.5.5

Server-Side Request Forgery

Found 2 high severity vulnerabilities related to Server-Side Request Forgery from axios after install and running npm audit:

Firefox Developer Edition renders page as if it were mobile

I'll start this off by saying I don't think this is actually gatsby-starter-saas-marketing's fault, but I am not familiar enough with gatsby to know where to look. It would be super helpful if you could point me in the right direction 😺

Repro:

gatsby new gatsby-starter-saas-marketing https://github.com/keegn/gatsby-starter-saas-marketing
cd gatsby-starter-saas-marketing
gatsby develop
Open http://localhost:8000 in Firefox Developer Edition.
- Note that the page renders correctly when loaded in Firefox; it only seems to render incorrectly in Firefox Developer Edition.

Expected Result:

Actual Result:

screenshot

node_modules/sharp makes problems

Thanks for the great starter!

Two weeks ago it was working fine.
But today I newly installed your starter, I was unable to run it on local server.
Perhaps it's not your starter's fault, maybe it's the sharp module.

The command I executed:

gatsby new gatsby-starter-sas-marketing https ://github.com/keegn/gatsby-starter-saas- marketing

cd gatsby-starter-saas-marketing

gatsby develop

Description of the error output:

Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp.node'
Require stack:
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/sharp/lib/constructor.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/sharp/lib/index.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/gatsby-plugin-sharp/safe-sharp.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/gatsby-plugin-sharp/index.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/gatsby-transformer-sharp/extend-node-type.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/gatsby-transformer-sharp/gatsby-node.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/gatsby/dist/bootstrap/resolve-module-exports.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/gatsby/dist/bootstrap/index.js
- /Users/kyo/dev/Gastby/gatsby-starter-saas-marketing/node_modules/gatsby/dist/commands/develop.js
- /Users/kyo/.nodebrew/node/v14.2.0/lib/node_modules/gatsby-cli/lib/create-cli.js
- /Users/kyo/.nodebrew/node/v14.2.0/lib/node_modules/gatsby-cli/lib/index.js
- /Users/kyo/.nodebrew/node/v14.2.0/lib/node_modules/gatsby-cli/cli.js

- Remove the "node_modules/sharp" directory, run "npm install" and look for errors
- Consult the installation documentation at https://sharp.pixelplumbing.com/en/stable/install/
- Search for this error at https://github.com/lovell/sharp/issues