Gatsby Starter which uses the Headless CMS Prismic.
- Prismic as Headless CMS
- Prismic preview functionality - see here
- Responsive images (gatsby-image)
- The right image size for every screen size
- Traced SVG Loading (Lazy-Loading)
- WebP Support
- SEO
- Sitemap
- Canonical Tags
- Schema.org JSONLD
- OpenGraph Tags
- Twitter Tags
- Favicons
- Google Tag Manager
- Robots.txt generator
- Offline Support
- Brotli Compression
- WebApp Manifest Support
- Configurable
- Use the
website.jsto easily change the most important information - Use
.env.templateto generate.env.developmentand.env.productionfiles containing ENV variables
- Use the
- Clone and install the repo
- Register an account on Prismic
- Configure your custom types
- Create an API key and store it in an ENV variable
- Go to your content tab
- Create new documents for the
Pagetype and fill out every input field - Your project is ready for development and production
You have to know the basics of Prismic's interface in order to be able to make the necessary changes / setup your project accordingly. You can also checkout the document "Sourcing from Prismic".
Get started by using the dummy .prismic/page.json custom type. Once inside Prismic go to the Custom types page, click "New", select "Repeatable Type" and enter "Page" as the type name. Toggle from "Build mode" to "JSON editor" in the right sidebar and paste the contents from the page.json file. This will allow you to create your first page with the dummy slice src/slices/IntroSection.jsx contained in this boilerplate.
Use .env.template to generate .env.development and .env.production files containing the following ENV variables
This is the frontend URL of your project, for development it will be http://localhost:8000 or similar
Don't forget to change the default PRISMIC_REPO_NAME env variable. The PRISMIC_REPO_NAME is the name you have entered at the creation of the repository (you’ll also find it as the subdomain in the URL)
You need to define the API_KEY for your Primis project. You can retrieve the key here:
- You can generate an access token in the API & Security section of your repository settings. Setting a Callback URL is not necessary.
- The token will be listed under "Permanent access tokens".
Specifies whether the site is in staging, setting this variable will ensure the site is not crawlable by search engines. Remove this variable if you are deploying to the production URL and you want the site indexed.
If you deploy to Netlify you will need to use their UI to create the above build variables. See instructions here
Before running the local development server you'll need to add content to your Prismic repository!
Please note: You have to publish all these documents (not only saving them)!
After that you can run the local server:
npm run devYou can add other features by having a look at the official plugins page
npm run buildCopy the content of the public folder to your webhost or use a website like Netlify which automates that for you.
You can configure your setup in config/website:
module.exports = {
pathPrefix: '/', // Prefix for all links. If you deploy your site to example.com/portfolio your pathPrefix should be "portfolio"
title: 'Gatsby Prismic', // Default Site Title used for PWA
description: 'A unopinionated Gatsby Starter which uses the Headless CMS Prismic.',
siteName: 'Lean Gatsby Prismic starter', // Sitename for Facebook
siteLanguage: 'en', // Language Tag on <html> element
banner: '/logos/logo-1024.png', // Default OpenGraph image
ogLanguage: 'en_US', // Facebook Language
// JSONLD / Manifest
favicon: 'src/favicon.png', // Used for manifest favicon generation
shortName: 'Prismic', // shortname for manifest. MUST be shorter than 12 characters
author: 'Company Name', // Author for schemaORGJSONLD
themeColor: '#3D63AE',
backgroundColor: '#EBEDF2',
twitter: '', // Twitter Username
googleAnalyticsID: '',
}
## Typography
This boilerplate is using [NPM Typefaces](https://github.com/KyleAMathews/typefaces) that serves Google (and other) fonts locally to boost performance and allow them to load offline. Out the box it is using [Lato](https://www.npmjs.com/package/typeface-lato) and [Titillium](https://www.npmjs.com/package/typeface-titillium-web) these are imported and can be replaced in `src/components/Layout.jsx`.