DEV as a Headless CMS for your Gatsby Site

Near the end of September 2019, @ben posted this article.

You can now generate self-hostable static blogs right from your DEV content via Stackbit

Ben Halpern ・ Sep 26 '19 ・ 4 min read

#meta #projectbenatar #webdev #changelog

I won't go into all the details as they are already mentioned in the article, but the TLDR is, by creating a site via Stackbit, you can use DEV as a headless CMS for your self-hosted site.

To get set up, you can follow these instructions that Ben references in his post.

The only difference nowadays is the initial instruction. You can start the process of creating your site from the Settings/Integrations section on DEV for your account.

Since my previous site was a Gatsby site, I decided to generate a Gatsby site using Stackbit and went with the Fresh theme.

And then within about a minute, I had my new site, built and deployed to Netlify at https://robust-petunia-478cc.netlify.com.

nickytonline / robust-petunia

Source code for my web site iamdeveloper.com

Stackbit Fresh Theme

This site was generated by www.stackbit.com, v0.2.82.

Running Your Site Locally

1. Install Node.js and npm

2. Install npm dependencies:

   npm install
   

3. get "stackbit-api-key" from project menu in Stackbit dashboard

4. run the following command to assign this key to STACKBIT_API_KEY environment variable:

   export STACKBIT_API_KEY={stackbit_netlify_api_key}
   

5. run the following command to fetch additional site contents from Stackbit if needed:

   npx @stackbit/stackbit-pull --stackbit-pull-api-url=https://api.stackbit.com/pull/5e6478cc14b6920012730a0a
   

6. Starts a development server

   npm run develop
   

7. Browse to http://localhost:8000/

View on GitHub

My actual website is https://iamdeveloper.com, so at that point, I just configured my site in Netlify to point to iamdeveloper.com.

Why Stackbit/DEV?

So why did I decide to do this if I already had a website running Gatsby with my blog posts? For several reasons.

1. I was getting tired of publishing in two places. First I would write a blog post on my site using Netlify CMS, wait for things to build and deploy, wait for DEV to pick up the changes of my site's RSS feed to generate a draft post and then finally format things so that I could leverage DEV's liquid tags and then post to DEV.
2. I prefer the DEV editor even though it needs some improvements and the liquid tags offer richer content.
3. Posting on DEV when integrated with Stackbit means that it will rebuild my own site with my latest posts, but also, the Stackbit integration generates the same markup for liquid tags on my own site.

So what are the drawbacks, if any?

1. I've changed my personalized site look for a theme template. This does not bother me that much though. I plan throughout the year to perhaps bring back the look I had once I understand all the moving parts in regards to the Gatsby/Stackbit integration.
2. Currently, Stackbit does not copy over images, it references the same image that is hosted by DEV. This is not a deal-breaker right now, but it would be nice to have all the assets hosted by my site.
3. Stackbit redeploys your site when draft posts are saved.

I ran into some a11y issues which may have been related to the template I chose, but if you look at my commits, you can see where I fixed some things. As well, there were a bunch of Gatsby plugins that I added back from my old site that I required, e.g. sitemap, Google Analytics.

Verdict?

I'm going to continue dogfooding the Stackbit/DEV integration because I know it will only get better. @remotesynth , I would love to do anything I can to help improve it. My DMs are open on DEV and Twitter.

I definitely recommend you give it a try, especially if you currently do not have a personal site.

That's all peeps!

Comments

[Hemant Joshi 😼]

This is cool..

But Nick I thought of building my own and I used Dev Api to build one for me

Here is th link😁: hemant-blog.netlify.app/

Built in React-Redux Code on my GitHub🙂...

Rather than opting in for tools a developer can develop something relevnt for his use🙄.

Thank you🙂, and nice Post

[Nick Taylor (he/him)]

[Hemant Joshi 😼]

🙂

[Kalaiarasan Pushpanathan]

Not mine but this is similar built with just Javascript - github.com/gautemo/blog-devto-backend

[Nick Taylor (he/him)]

I think there are a few projects our there that have utilized the DEV API to accomplish this including one that is a Gatsby plugin, but I opted for an out of the box solution like Stackbit.