gatsby starter saas marketing

SaaS 회사 및 인디 해커를위한 간단한 한 페이지 마케팅 사이트 스타터.

라이브 데모 : https://gatsby-starter-saas-marketing.netlify.com/- 켈 Live Demo Deployment는 더 이상 NetLify에서 사용할 수 없습니다.

시작하기?

Gatsby Cli를 설치하십시오 - 추가 정보

npm install -g gatsby-cli

또는

yarn global add gatsby-cli

로컬로 스타터를 설치하십시오.

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

종속성 설치 :

yarn install

개발 서버 시작 :

gatsby develop

프로젝트 루트에서 배포 응용 프로그램을 컴파일합니다.

gatsby build

캐시를 정리하여 특정 오류를 해결하십시오 - Dev 서버를 시작하기 전에 Clean 명령을 실행하십시오.

gatsby clean

프로젝트 루트에서 사이트의 생산 빌드를 제공하십시오.

gatsby serve

스타일

이 스타터는 스타일의 구성 요소를 사용합니다. 테마 파일에는 기본 스타일 src/styles/theme.js 포함되어 있으며 Global Styles 파일에는 기본 요소 스타일과 스타일 재설정 src/styles/GlobalStyles.js 포함되어 있습니다.

항해

이 스타터는 React-Anchor-Link Smooth-Scroll 및 React-Scrollspy를 사용합니다. 내비게이션 항목을 섹션에 연결하려면 navigation.js 의 동일한 내비게이션 문자열 값에 해당하는 섹션 상위 요소에 ID 및 문자열 값을 추가합니다.

켈 Features 섹션 만 연결되어 있습니다. 제품 및 가격 책정 섹션은 의도적으로 연결되어 있지 않으며 (스타터에 존재하지 않기 때문에) 클릭하면 콘솔에 TypeError 던집니다. 이 기능을 확장하는 데 도움이된다면 연락하십시오.

NetLify에 배포

배포 가이드

NetLify 양식으로 이메일을 수집하십시오

gatsby.js v2 및 netlify를 사용한 양식 처리

Netlify 양식 사용 예제

header.js 에서 기존 <HeaderForm>...</HeaderForm> 구성 요소를 다음과 함께 교체하면 사이트가 배포되면 작동 예제를 제공해야합니다.

 <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>