This is a Gatsby project bootstrapped with Gatsby cli
.
- Copy .env.example to .env
- Set Contentful variable values to match your CMS see example config
- Configure your uniform data source
npm install -g @gatsby/cli
npm i
# or
yarn
npm run develop
# or
yarn develop
- open http://localhost:8000/ with your browser to see the website locally.
- open http://localhost:8000/___graphql to see your graphql explorer and run / test your graphql queries.
- open our GraphQL page query example
npm run build
# or
yarn build
const dotenv = require('dotenv');
dotenv.config({
path: `.env`
});
module.exports = {
siteMetadata: {
title: 'uniform-optimize-gatsby-contentful-starter',
description: 'UniformConf, a Uniform Optimize demo site'
},
/* Your site config here */
plugins: [
'gatsby-plugin-postcss',
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-source-contentful',
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.NODE_ENV === 'production' ? process.env.CONTENTFUL_CDA_ACCESS_TOKEN : process.env.CONTENTFUL_CPA_ACCESS_TOKEN,
host: process.env.NODE_ENV === 'production' ? process.env.CONTENTFUL_HOST : process.env.CONTENTFUL_HOST_PREVIEW,
downloadLocal: process.env.NODE_ENV === 'production' ? false : true
}
}
],
}
Before setting you the gatsby-node.js configuration, you must create a template inside src/templates/
. In our example we create a ContentfulPage.tsx
file in the templates directory which we map to in our gatsby-nodes.js
file.
const path = require("path")
exports.onPostBuild = ({ reporter }) => {
reporter.info("Your Gatsby site has been built!")
}
// creatre contentful pages dynamically
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const contentfulPageTemplate = path.resolve(
"./src/templates/ContentfulPage.tsx"
)
const result = await graphql(`
query {
allContentfulPage {
edges {
node {
id
slug
title
sys {
contentType {
sys {
id
linkType
type
}
}
revision
type
}
}
}
}
}
`)
result.data.allContentfulPage.edges.forEach(edge => {
console.log(edge.node.components)
createPage({
path: `${edge.node.slug}`,
component: contentfulPageTemplate,
context: {
title: edge.node.title,
slug: edge.node.slug,
sys: {
...edge.node.sys,
},
components: edge.node.components,
},
})
})
}
To learn more about Gatsby.js, take a look at the following resources:
- Gatsby Documentation - learn about Gatsby.js features and API.
- Gatsby Contribution - Contribute to Gatsby
- Gatsby Source Contentful
Gatsby will try and make requests to page-data
and throw a console error which can impact lighthouse scores. See Github issue for more details