DEV Community

Cover image for Creating your Blog using GatsbyJS and API
Aivan Monceller
Aivan Monceller

Posted on • Updated on

Creating your Blog using GatsbyJS and API

TLDR: You can go to the demo on what this is all about. Nonetheless, this is really very easy even if you don't know about GatsbyJS.

I have seen a couple of API articles here and decided to make something useful with it.

If you already have a blog, this article is also for you. I have been struggling to create some content on my own domain because I feel no one would even bother visiting my site.

At though, I just keep coming back to write articles because I know someone would be reading it somehow.

Instead of cross-posting from my own blog to, I thought I could do the other way around. I am introducing this very basic Gatsby source that you could use with your Gatsby website.

GitHub logo geocine / gatsby-source-dev

Gatsby source plugin that fetches user articles from


NPM version Build Status

A Gatsby plugin that fetches user articles from’s /articles?username combined with /articles/${id} endpoint.


Install gatsby-source-dev in your project:

yarn add gatsby-source-dev
npm install gatsby-source-dev

Then add the plugin to your gatsby-config.js file:

  resolve: "gatsby-source-dev",
  options: {
    // This is your username on
    username: ''

The plugin will store the API response in Gatsby. Here's an example of a query that fetches an articles title, id, and description.

  allDevArticles {
    edges {
      node {
        article {

The node contains the entire response from’s endpoint.

Pagination is not yet implemented

If you do not know what a gatsby source or have never really touched Gatsby, you don't need to worry since I created a starter.

GitHub logo geocine / gatsby-starter-devto

A GatsbyJS starter template that leverages the API

Here are the steps how to create your own blog using this starter:

1 - Clone the github repository

    git clone

2 - Open gatsby-config.js and change line 13 with your username

    module.exports = {
      siteMetadata: {
        title: 'Gatsby + Starter',
      plugins: [
          resolve: 'gatsby-source-dev',
          options: {
            // your username
            username: 'geocine'

3 - Install and start

     yarn start

4 - Navigate to http://localhost:8000

This is how it should look like using my username geocine.

This is still a work in progress, I will be adding more features, feel free to create a pull request. I hope you like it.

If you want to learn more about gatsby, checkout this article below:

Discussion (17)

tomasforsman profile image
Tomas Forsman

So, I decided to try my hand at making a source for Gatsby, even though I'm very new to it. I saw that there were an API for and thought, hey, I should make a source for Starting to look for the api, found this...

arcath profile image
Adam Laycock

Interesting stuff, this is why I love Gatsby!

Does have the ability to fire off a webhook when you publish (or a comment is made)? Thinking thats the best way to ensure that your site always has the latest content.

geocine profile image
Aivan Monceller Author

That would definitely be a great feature, I hope will consider to add support for webhooks.

donvito profile image
Melvin Vivas

Is this what you're looking for? Just saw it now.

levivm profile image
Levi Velázquez • Edited

I added a blog header just like


I'm cleaning it up and setting up social icons for being parameterizable, then I will submit the PR.

steelwolf180 profile image
Max Ong Zong Bao

Wow, this looks awesome very interesting concept.

dylanesque profile image
Michael Caveney

Smart thinking! I really prefer the experience that creates for bloggers and their audience, but I want my entries on my own site as well. I was going to spin up cross-posting in the next iteration of my site, but this is a lot better!

vekzdran profile image
Vedran Mandić

Excellent share and tool! Can you pull over comments too? Planning in building a site with gatsby and the cross post issue would defo solved with this approach. Thank you for building it.

geocine profile image
Aivan Monceller Author

I will look into the API and check if it provides such functionality.

philnash profile image
Phil Nash

This is a great idea. Hosting your stuff on your own site makes a lot of sense, but if you're going to write and publish on, then why not use it as your CMS too.

Fantastic use for Gatsby!

quinncuatro profile image
Henry Quinn

Have any more info on DEV's API?

peterwitham profile image
Peter Witham

Brilliant! I was thinking about this over the weekend so I'm glad I found your post to get me thinking more seriously about this.

zeptobook profile image

Nice post. I also wrote a post more in details about how to create your first blog site using Gatsby.

vallerydelexy profile image

sooo.. youre posting in and your site magically have it too?

geocine profile image
Aivan Monceller Author

That is the idea. However, this does not happen magically. You need to trigger a manual gatsby build. It could be automated once supports webhooks 👍

erikaheidi profile image
Erika Heidi

This is great! I was just thinking about that, I like to post here but I would like to have my content also somewhere else I own. This is perfect, thanks for sharing!

levivm profile image
Levi Velázquez

Nice job, it is very simple.

I will try to find a way to:

  • Exclude some posts, so you can show just what you want.
  • Sync comments (it could be a scheduled task)