How to write your blog using a react.js-based framework?

[mostakimvip06]

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 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 macedonia telemarketing data 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.

Prismic Backstage
Once we save our custom type we will be taken to the fields editing page.

Prismic Edition
In the panel on the right, we select the field we need, click, drag, drop and fill in the fields in the box that appears.

Prismic Backstage
The API ID field corresponds to the name that will be displayed to us when downloading data. Let's add a new field - Rich Text

Prismatic Rich Text
The buttons I have marked in the picture allow you to choose what types of fields/texts you want to use when writing (in this case) a post. Finally, let's add the image field, this probably won't surprise anyone, but it allows us to add a photo. The last field we will add will be the UID, it will be used to add a unique path to our post.

UID field
Once we have prepared such a post schema, we click on the JSON editor and copy its contents and paste them into the previously prepared post.json file.

Fasting Scheme - PrismicGatsby post JSON
Adding photos to the backroom
Once we have prepared a custom type for the entry, it is worth adding some photos that we will want to use later, to do this, we need to select the media library item from the side menu and here there are two ways to add photos, the first is to click the "Upload media" button or simply drag and drop photos.