Creating Blog site using Stackbit, GatsbyJS and DEV -3

Nabendu Biswas
Nov 16, 2019 · 7 min read

Welcome to part-3 of the series. You can find part-2 here.

We will start by adding some Gatsby plugins to my newly created blog site. I have found a great article Emeruche Cole on the same.

So, let’s head over to the terminal and run the command to get the latest data from Stackbit on our local machine. This command i had got from my github repo for my blog site, which was initially created by stackbit.

Stackbit

I will be adding two SEO plugins first.

gatsby-plugin-robots-txt

So, let’s head over to the plugin page. As the name suggest it creates a robots.txt file for our gatsby site. It’s good for SEO as it tells google bots on how to crawl your site.

We will follow the instruction and do an npm install in our directory.

npm install

In the gatsby-config.js , we need to add the marked code in our plugin array.

robot

gatsby-plugin-sitemap

This plugin generates sitemap for your site, which is very important for SEO. As per the instruction on plugin page , let’s do npm install.

npm install

Now, this plugin is easy to use. We need to add the plugin name in our gatsby-config.js inside the plugins array.

sitemap

We also need to have a siteUrl in our siteMetaData. But Stackbit create a json for us. So, we need to add there. We will also add some other useful keywords for SEO in the site-metadata.json file.

I found a helpful list in Emeruche Cole github link

siteMetaData

Next, let’s start our server to see if there are any error.

npm run develop

I have also checked in http://localhost:8000/ and there were no errors. Next, let’s add these changes to our production. With Netlify, it’s just pushing the changes to GitHub.

So, i had just committed my changes and pushed to GitHub.

Pushed to github

Once i head over to my netlify dashboard for this site, it will show building.

Building

It got published in less then 5 minutes. Now, when i head over to my site my change of title is there. Everything else is behind the scenes.

nabendu’s blog

Next, we will add one of the most important plugin and i.e. for analytics.

gatsby-plugin-google-analytics

This plugin will be used to add google analytics to our website. As per the gatsby docs on setting up google analytics we have first setup a google analytics account and then get the tracking id.

Let’s open google analytics. If you are not logged in, please login to your google account.

Welcome page

Once i click on Start Measuring button, it will take you to the below page. Here you will be asked to give your account name. Then click on Next button.

Account name

In the screen below select Web and click Next.

Web

In this screen, we give some basic site information including the site url.

Basic site information

Once you clicked on Create button in the above screen, a pop-up will be opened.

The popup

Here, you have to accept two Terms and conditions. Then click on Accept button.

I Accept

The next screen will contain your Tracking ID. It is in the format UA-XXXXXXXXX-X

Tracking ID

Now, it’s time to install the gatsby google analytics plugin.

analytics plugin

Next, we need to add the plugin in gatsby-config.js file. Here, we need to put the Tracking ID, we got from google.

gatsby config

Next, let’s start the dev server to see if any issues. We need to restart the server by npm run develop

I have also checked agin in http://localhost:8000/ and there were no errors. Next, let’s add these changes to our production.

So, i had just committed my changes and pushed to GitHub. It will again build our production site in Netlify.

Changes published

Once the site is published, go back to google analytics page and click on Home tab. You will see your site data. It is very less now, please visit more to read my blogs and increase my count :).

Site data

One more important thing i want to do on my personal blog site and that is to change the canonical link in my medium and dev posts.

If a post occurs at more then one place then google bots give more priority to the original post. Now, it doesn’t matter where you published the blog first, because all big blogging platforms have ways to give canonical links.

My process is to create the blog in medium first because that is what i am doing since the last 1.5 years. After that i use an awesome package called mediumexporter to change the post to Mark Down file.

After that i paste the content of Mark Down file to a new dev post. Since dev is also serving as my headless CMS for my site, due to the awesome service of Stackbit, it gets published in my personal site.

Will show the process on one of my earlier blog. First will add link to a medium post.

I had opened one of my earlier medium post. Since i am logged in, i also get the edit button. First click on the Setting icon, after that the Edit Story.

Editing Medium

After that click on the three dots and then click on Customize canonical link.

More editing

After that we need to paste the original story link in the Set canonical URL: Here i gave the link from my blog site. After that click on Save button.

Set Canonical URL

Next it time to head over to dev.to and change the canonical link there also. When i head over to my same blog in dev, i get the Edit button.

DEV editing

Next, we click on the three dots.

Click the arrow

It will open a pop-up, where we had to give the canonical link. I again give it the link from my blog site in Canonical URL. After that click on Done button, which will close this pop-up. Also, click on SAVE CHANGES button after this.

Canonical URL

Now i have to repeat the above process of changing the canonical links of my 100 blogs manually for my site to get better SEO :)

It started doing some more changes to the site. You can find about in in part-4 here.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade