How to write your blog using a react.js-based framework?
Posted: Wed Jan 22, 2025 8:29 am
There are many ways to write your own blog these days. You can use a well-known CMS (content management system) such as WordPress or Joomla!, but we also have other options to choose from. One of them is Gatsby.js in combination with a headless CMS, in this case I will present prismic.io Gatsby is a framework based on the react library , i.e. we write "pure react code" here, I have come across the term "gatsby is react on steroids" several times.
Contents
Gatsby.js configuration
Backend Management in prismic.io
Adding photos to the backroom
Adding an entry
Creating pages with Gatsby js
Creating links to posts on the page
Okay, so what does the framework itself give us? Gatsby takes care of the page's performance for us. Critical resources are automatically loaded first, needed to correctly display the first view, and only then the rest. Thanks to this, our page loads very quickly. The default security of the page is ensured by the fact that static HTML code is generated at the time of build. A very big advantage is full support for GraphQL , which will be discussed more below.
Let me point out at the beginning that in this post I will not ghana telemarketing data focus on styling, I will leave that to you.
Gatsby.js configuration
To start our work we need to install node.js, along with it we will download npm. After installation in the terminal we type:
npm install -g gatsby-cli
Thanks to this, in the folder where we want to start our project, we can execute the command:
gatsby new
If we want to create a new folder and then create a project in it:
gatsby new (nazwa-projektu)
After correct installation of all packages we will see this folder structure.
Gatsby Folder Structure
For our configuration we still need to install a plugin that will help us download data from prismic.io
npm install --save gatsby-source-prismic
Then we go to gatsby-source-prismic and copy the code from the "How to use" section, paste it into the gatsby-config.js file and configure it accordingly, everything is described in the comments of the copied code.
Here is an example configuration prepared for the entry:
Example prismic configuration
As you can see in the picture, in the "src" directory I added the schemas folder with the post.json file, I will write what it is for in a moment.
Backend Management in prismic.io
First we need to create an account on prismic.io , after creating an account and logging in we go to the Custom Types tab (we choose from the menu on the left sidebar). We choose Repatable Type and enter a name, it can be a post or in this case a post.
Contents
Gatsby.js configuration
Backend Management in prismic.io
Adding photos to the backroom
Adding an entry
Creating pages with Gatsby js
Creating links to posts on the page
Okay, so what does the framework itself give us? Gatsby takes care of the page's performance for us. Critical resources are automatically loaded first, needed to correctly display the first view, and only then the rest. Thanks to this, our page loads very quickly. The default security of the page is ensured by the fact that static HTML code is generated at the time of build. A very big advantage is full support for GraphQL , which will be discussed more below.
Let me point out at the beginning that in this post I will not ghana telemarketing data focus on styling, I will leave that to you.
Gatsby.js configuration
To start our work we need to install node.js, along with it we will download npm. After installation in the terminal we type:
npm install -g gatsby-cli
Thanks to this, in the folder where we want to start our project, we can execute the command:
gatsby new
If we want to create a new folder and then create a project in it:
gatsby new (nazwa-projektu)
After correct installation of all packages we will see this folder structure.
Gatsby Folder Structure
For our configuration we still need to install a plugin that will help us download data from prismic.io
npm install --save gatsby-source-prismic
Then we go to gatsby-source-prismic and copy the code from the "How to use" section, paste it into the gatsby-config.js file and configure it accordingly, everything is described in the comments of the copied code.
Here is an example configuration prepared for the entry:
Example prismic configuration
As you can see in the picture, in the "src" directory I added the schemas folder with the post.json file, I will write what it is for in a moment.
Backend Management in prismic.io
First we need to create an account on prismic.io , after creating an account and logging in we go to the Custom Types tab (we choose from the menu on the left sidebar). We choose Repatable Type and enter a name, it can be a post or in this case a post.