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.

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay