DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Creating Blog site using Stackbit, GatsbyJS and DEV -1
Nabendu
Nabendu

Posted on • Updated on • Originally published at thewebdev.tech

Creating Blog site using Stackbit, GatsbyJS and DEV -1

I started my blogging journey 1.5 years back on medium and had written 98 blogs till date. It had soon become an habit to write technical articles.

I had got good traction on medium, but once dev.to was launched i started re-publishing my articles there also. I got a lot of followers and views in dev.to.

It is time for me to create my own blog site and was thinking to create the same in GatsbyJS. There are many ways to create blog site with GatsbyJS, but i found an article from Ben Halpern (Creator of dev.to) about there collaboration with Stackbit.

You need to follow the very simple process in this article and your personal blog site will be ready in no time.

You just need to follow 4 steps.

  1. Visit the Stackbit Creation Workflow and choose a theme. I had chosen Fjord.

Choose themeChoose theme

  1. Then you need to choose your static site generator. Here i had chosen Gatsby.

Choose GatsbyChoose Gatsby

  1. Then you need to connect to your Github and DEV accounts.

Connect both DEV and GithubConnect both DEV and Github

  1. Next, you need to click on β€œCreate your Project” and stackbit will create a new blog site for you. Then you need to connect to a Netlify account to keep the site live.

Site is liveSite is live

And by following these simple steps, my blog site became live at https://nabendu-blog-d8fee.netlify.com/

Live siteLive site

Now, whenever i publish a post in DEV(dev.to), it will be reflected here. This actually makes DEV a headless CMS for my site.

Now, as you can see from above there is some work to be done, like editing the Home page, buying a good domain name and connecting in netlify, adding some plugins from gatsby.

Now, stackbit created an repository in my github. So, i am heading over there and following the instructions.

Stackbit instructionsStackbit instructions

But first i will git clone my repository in my Desktop

git clonegit clone

Next, i will change to the directory an do npm install

npm installnpm install

Now, we need to go to the Stackbit dashboard to get our API keys.

API KeysAPI Keys

Then we need to assign this key to STACKBIT_API_KEY

Then as per the github instruction, run the below command. It seems to fetch all posts.

Fetching all postsFetching all posts

Then as per the instructions, running npm run develop

npm runnpm run

Once it complied successfully, opening http://localhost:8000/ . And we successfully created our local development environment.

localhostlocalhost

Now, let’s open the project in VSCode. The main thing which we need to edit is the Home Page. The content comes from src -> pages -> index.md

index.mdindex.md

We will now update the content in index.md

Updated index.mdUpdated index.md

Let’s commit the changes and push it to our github.

Push to githubPush to github

It will also start updating the site in netlify.

Site getting updatedSite getting updated

And after sometime the changes are pushed to production.

Site updatedSite updated

This completes first part of the post. In the next part(and my 100th blog), i will be buying a good domain name and connecting in netlify, adding some plugins from gatsby like SEO, google analytics.

Top comments (14)

Collapse
cristinaruth profile image
Cristina Ruth

Didn't know about StackBit. Thanks for this!

I was struggling to find an easy, one click setup to get my personal site up and running without paying a $15/mo fee. So I was trying to set it up myself and having limited time, it was taking a while.

I don't see any pricing info on StackBit though. Wonder what that looks like.

Collapse
nabendu82 profile image
Nabendu Author

You are Welcome. We have a Stackbit Developer Advocate here in the comment for this blog. Please DM him on twitter twitter.com/remotesynth

Collapse
denniswebb profile image
Dennis Webb

Isn't it StackBit not SlackBit?

Collapse
nabendu82 profile image
Nabendu Author

Thanks Dennis for bringing that to my notice. Rectified the same.

Collapse
raulismasiukas profile image
Raulis Masiukas

Thanks for this, Nabendu. Great article!

Collapse
nabendu82 profile image
Nabendu Author

Thanks Raulis

Collapse
capochiani profile image
Francesca Capochiani 🌺

These feature articles, news and analyses about StackBit are a good contributions for this cultural landscape.

Thank you @nabendu82 to show us the power of that platform.

Collapse
djpandab profile image
Stephen Smith

Good article. I enjoyed it. I learned a few things. Thanks!

Collapse
nabendu82 profile image
Nabendu Author

Thanks Stephen

Collapse
remotesynth profile image
Brian Rinaldi

πŸ‘‹ Stackbit Developer Advocate here. Thanks so much for the post! Glad to hear it was a good experience for you so far. Feel free to reach out if you have any questions.

Collapse
nabendu82 profile image
Nabendu Author • Edited on

Thanks Brian to Stackbit for creating such an amazing service. My beautiful blog site was up in no time, with my dev.to as CMS

Collapse
thavoo profile image
Gustavo Herrera

Awesome

Collapse
bonfiglioalessio profile image
<A.BONFIGLIO/>

Thanks!

Collapse
nabendu82 profile image
Nabendu Author

Thanks for reading

πŸ€” Did you know?

Β 
🌚 Dark mode is available in Settings.