In this tutorial, I'm going to show you how to create a simple but blazing fast blog using React, Gatsby JS, and Cosmic JS. Let’s get started.
TL;DR
Prerequisites
You will be required to install Node JS, npm, and Gastby CLI before starting. Make sure you already have them installed.
What is Gatsby?
Gatsby is a blazing-fast website framework for React. It allows developers to build React based websites within minutes. Whether you want to develop a blog or a business website, Gatsby will be a good option.
Because it is based on React, the website pages are never reloaded and also it will generate static pages which make the generated website super fast.
Blog Development We have to set up the environment in order to start working on the blog.
Install Gatsby
First, install Gatsby CLI:
npm install --global gatsby-cli
Scaffold a Gatsby Template
gatsby new gatsby-blog-cosmicjs
Enter in your project's folder:
cd gatsby-blog-cosmicjs
Start the server:
gatsby develop
At this point, you should already be able to get access to your Gatsby JS blog website at this address: localhost:8000.
Install the Cosmic JS Source Plugin
In Static Blog, your data can be consumed from different sources: Markdown files, HTML files, External API (WordPress, Cosmic JS, etc).
Therefore, Gatsby implemented independent layer: the data layer. Which is powered by GraphQL. Very exciting stuff!
To connect this Data Layer with different Data Providers, you need to integrate Source Plugin. Fortunately, there are many Source Plugins available to fulfil most of the needs.
In our case, we are using Cosmic JS. Obviously, we need to integrate Source Plugin for Cosmic JS. Good news: Cosmic JS has implemented their Source Plugin!
Let's install:
npm install --save gatsby-source-cosmicjs
We need to install some other plugins also. Let's do that also
npm install --save gatsby-plugin-offline gatsby-source-filesystem
This is an abbreviated article. To view the full article, go to Build a Gatsby Blog using the Cosmic JS source plugin on Cosmic JS.