Giter Club home page Giter Club logo

gatsby_contentful_starter's Introduction

Contentful
Gatsby Contentful Starter

A clean , minimal, and responsive starter for creating blogs uses Gatsby.

🚀 Quick Start

Create a Gatsby site

Use the Gatsby CLI to create a new site and specify this starter

# Create a new Gatsby site using this starter
gatsby new blog https://github.com/mohanmonu777/gatsby_contentful_starter

Start Developing

Navigate into your new site’s directory and start it up.

cd blog
gatsby develop

Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Models

In this starter , i used Article model that defines the data of a single Article.

It contains the following fields

  • title : The title of the Article
  • description : Holds the description of Article
  • slug : A 'slug' is the part that comes at the very end of a URL, and refers to a specific page.
  • content: The Rich Text Document that holds the overall content of the Article
  • tags : Ah boy! you know what it is! 😁

Query

we use graphql to query data, you can find more about graphql here.

Retrieves all the articles

    {
        allContentfulArticle{
          edges{
            node{
              title
              slug
              createdAt
              tags
            }
          }
        }
    }

To get single Article , based on a single field. In our case its slug

query getContentBySlug($slug : String){
	contentfulArticle(slug : {eq : $slug}){
    content{
      json
    }
  }
}

Deploy with Netlify

Netlify CMS can run in any frontend web environment, but the quickest way to try it out is by running it on a pre-configured starter site with Netlify. Use the button below to build and deploy your own copy of the repository:

A Quick Note

Before deploying your site go to Setting > Build & Deploy in Netlify.The .env file we made for local work doesn’t get deployed,so add your environment variables there. Add your spaceId and accessToken with the same values as before. This helps you get rid of unwanted build failures.

Deploy to Netlify

After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template. Next, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete. Next, you’ll need to set up Netlify’s Identity service to authorize users to log in to the CMS.

Stay in touch

I love to hear feedback.

gatsby_contentful_starter's People

Contributors

algokun avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.