This content originally appeared on DEV Community and was authored by Helitha Rupasinghe
What is GatsbyJS?
Gatsby is a framework for creating blazing fast websites and web applications. Powered by React and GraphQL, Gatsby gives you everything you need to build and launch your next project.
Why Choose Contentful CMS?
Contentful is a headless content management system (CMS). You upload your content (be it text, images, or video) to Contentful, and from there can organize and edit it as you desire.
Prerequisities
This post will assume that you have a Gatsby project already set up. If you need to set up a project, head to this page, then come back.
Gatsby Integration With Contentful
npm install gatsby-source-contentful
How to use it?
Create the gatsby config file and add the following code
plugins: [
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: `your_space_id_grab_it_from_contentful`,
accessToken: `your_token_id_grab_it_from_contentful`,
},
},
]
Connect your gatsby website and contentful CMS.
Here is an example of what a GraphQL query looks like...
import React from 'react'
import Layout from '../components/Layout'
import { graphql, Link, useStaticQuery } from 'gatsby'
import * as styles from './blog.module.scss'
import Meta from '../components/head'
const BlogPage = () => {
const { allContentfulBlogPost: { edges } } = useStaticQuery(graphql`
query {
allContentfulBlogPost (
sort: {
fields: publishedDate
order: DESC
}
) {
edges {
node {
title
slug
# publishedDate(fromNow: true)
# format uses momentjs
publishedDate(formatString: "MMMM Do, YYYY")
}
}
}
}
`)
return (
<Layout>
<Meta title="Blogs" />
<h1>Blog</h1>
<ol className={styles.posts}>
{edges.map((edge, index) =>(
<li key={index} className={styles.post}>
<Link to={`/blog/${edge.node.slug}`}>
<h2>{edge.node.title}</h2>
<p>{edge.node.publishedDate}</p>
</Link>
</li>
))}
</ol>
</Layout>
)
}
export default BlogPage
Talk Later!
This content originally appeared on DEV Community and was authored by Helitha Rupasinghe
Helitha Rupasinghe | Sciencx (2022-05-04T14:53:14+00:00) How to add a CMS to your Gatsby Website. Retrieved from https://www.scien.cx/2022/05/04/how-to-add-a-cms-to-your-gatsby-website/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.