Using DEV as CMS by connecting with Stackbit

Confession 🗣

This is a confession - I deviated from my goal of automatically redeploy my site whenever I posted a new DEV article. I became a wanderer👨‍🚀. I wander into admiring with how clean https://www.emgoto.com/ looks, and the elegant background of https://coffeecodeclimb.com...

OK, wanderer is an exaggeration because everything mentioned below is the result of attempting to achieve the goal. Nonetheless, I did feel that I moves at a 🐌 speed as compared to the progress made in my previous posts in the series.

With the mini venting out of the way, I did learnt about Frontmatter and Stackbit during the process of figuring out how to redeploy my static site whenever a new article is posted. These two are the sharing of this article.

Frontmatter

Shall keep this section short as found that this article by coffeecodeclimb explained it nicely.

In a single sentence - Frontmatter is the first and topmost section of a markdown document enclosed in two triple dash --- lines, with YAML syntax content. Example as below:

---
title: Frontmatter as short as possible
tags: [code, frontmatter, blog, yaml]
---

Stackbit

I first came across Stackbit when reading beeman's dev article on automating your dev posts using github-actions.

Automate your DEV Posts using GitHub Actions

beeman 🐝 ・ Jul 5 '20 ・ 3 min read

#devto #publication #stackbit #github

The majority of the articles online intend to ultimately use git as the content management system, including beeman's article above. However I am not yet ready for that step and I intend to still store my articles exclusively in DEV.

This is where the mentioned of Stackbit in the article becomes of interest. Quoted:

The build on Netlify happens in one of two occasions:
when my content on DEV updates or when the GitHub repo updates.

That is exactly what I aimed for and best still there's no need for an extra Github action, or Travis CI and Pipedream as explained in other excellent articles.

At first I tried the "Import Site" feature of Stackbit in hope that it will work out of the box, unfortunately it failed and I yet to wrap my head around on the failure.

Then, I attempted to create a fresh site from the Stackbit dashboard in order to understand more about how the DEV integration works. I only able to figure out how to do that after reading this DEV guide - https://dev.to/connecting-with-stackbit.

• Use this DEV Stackbit flow - https://app.stackbit.com/create?ref=devto, only then DEV will show up as the choice in CMS.
• Or you can go to dev extension settings and enable Stackbit integration as showed below

The rest of the steps are very intuitive, the site will be live after following the on-screen instructions by connecting to services such as Netlify & Github. Example site using the 'Fresh' theme - https://stackbit-dev-starter.netlify.app/.

Next up, figure out how the Stackbit Dev Integration works and implement it into https://wizlee.dev!