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

Cover image for Using DEV as CMS by connecting with Stackbit
Wiz Lee
Wiz Lee

Posted on

Using DEV as CMS by connecting with Stackbit

Table Of Contents


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]
---
Enter fullscreen mode Exit fullscreen mode

Stackbit

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

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.

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!

Top comments (0)

5 Websites To Learn Frontend Web Development Faster

In this article, Bentil Shadrack has curated 5 resourceful sites that will help you better you web development skills really fast.