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: