DEV Community

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

Posted on • Updated on

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.

Latest comments (0)