Announcing the Official Hygraph Marketing Website Starter
Introducing the Marketing Website Starter built using Hygraph, Next.js, and Chakra UI. Quickly prototype and iterate on your own website.
We're excited to share that we have a new official Hygraph Starter! A Marketing Website for SaaS Products built using Hygraph, Next.js, and Chakra UI. The repository for this is open-sourced, so you can quickly prototype and iterate on your own website.
- Check out the demo →
- Check the repo →
- Get started with a Hygraph project using the Marketing Website starter →
This reference application is an example of how to build a fully-funcional marketing website for a SaaS product using Hygraph.
FeaturesAnchor
- Styled using Chakra UI.
- Internationalized Routing using Next i18n Routing and Hygraph Localization.
- Image optimization using next/image.
- Modular "drag-and-drop" blocks to build dynamic page templates using GraphQL Union Types (Polymorphic Relations).
- SEO-ready pages and posts using Next SEO and sourcing SEO content from Hygraph.
QuickstartAnchor
1. Clone the repository and install project dependencies
npx degit hygraph/reference-marketing-website#main reference-marketing-websitecd reference-marketing-websiteyarn
2. Provide your Hygraph project keys
In order to use this starter, you'll need to have created a new Hygraph project using our
Marketing Website Template
.
Navigate into your new site’s directory and copy the .env.local.example
file.
cp .env.local.example .env.local
Inside of your newly created .env.local
file, provide values for the variable. These variables can be found in the project settings UI.
NEXT_PUBLIC_HYGRAPH_URL=""
3. Start building!
yarn dev