DEV Community

Cover image for Part 2 : The Magic - DEV to JAMStack
Athul Anil Kumar
Athul Anil Kumar

Posted on • Edited on

3 1

Part 2 : The Magic - DEV to JAMStack

Now that we have learnt what a JAMStack site is, we shall proceed to the creation of your own blog.

How to start?

Go to the DEV Settings by clicking on your profile picture at the top-right corner of your window and select Settings. Next navigate to Integrations. Here you'll see Generate a personal blog from your DEV posts. Click it and voila, you are ready. Just kidding, magic requires more work.

The integration for converting your DEV posts to a self-hosted static site is done by StackBit. As you might have seen, posts on DEV are stored as Markdown files which use the Markdown syntax language. Even this post was written in Markdown syntax. StackBit takes these files (which are static of-course!) and uses them to build a blog website for you.

StackBit creates a JAMStack site for you using three main components.

  • Static Site Generator : As the name suggests this component generates the static files for your site. Some options you'll see are Jekyll, Hugo and Gatsby. I personally prefer Jekyll for it's ease of use and for the rest of this series I'll be explaining using Jekyll
  • Repository : This is where your site data will be stored(only meta-data, not posts) and deployed from. GitHub is where you'll be asked to create a repository.
  • CMS and Deployment : A content management service takes care of the storing the website and your dev posts. For deployment Stackbit gives us the option of using Netlify.

Now let's create the site. The steps for this were already published by The DEV team, so I'm not going to write them here. You can find the exact instructions here. If you want to find more technical details about the integration refer here.

TL:DR

  • Create website here
  • Select a theme for your website (Fjord is awesome!)
  • Select Jekyll Static Site generator
  • Connect DEV and GitHub accounts (Give a funky name to your repo)
  • Create project and connect to Netlify

And now the magic is complete! Your site is ready.

In the next post I'll explain about Netlify and some of its perks.

Top comments (0)

AWS Security LIVE! Stream

Level up your security knowledge and skills

Join AWS Security LIVE! for expert insights on threat detection, infrastructure protection, and more. Hosted by AWS experts and AWS Partners. No sales pitches, just deep dives!

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay