loading...
Cover image for Creating your Blog using GatsbyJS and Dev.to API

Creating your Blog using GatsbyJS and Dev.to API

geocine profile image Aivan Monceller Updated on ・2 min read

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 Dev.to 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 Dev.to 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 Dev.to, I thought I could do the other way around. I am introducing this very basic Dev.to Gatsby source that you could use with your Gatsby website.

GitHub logo geocine / gatsby-source-dev

Gatsby source plugin that fetches user articles from Dev.to

header
gatsby-source-dev

NPM version Build Status

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

Usage

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 Dev.to
    username: ''
  }
}

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

{
  allDevArticles {
    edges {
      node {
        article {
          id
          title
          description
        }
      }
    }
  }
}

The node contains the entire response from Dev.to’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 Dev.to API




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

1 - Clone the github repository

    git clone git@github.com:geocine/gatsby-starter-devto.git

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

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

3 - Install and start

     yarn
     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:

Posted on by:

geocine profile

Aivan Monceller

@geocine

Building frontend applications, web APIs, system utilities and development tools

Discussion

markdown guide
 

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 Dev.to and thought, hey, I should make a source for dev.to. Starting to look for the dev.to api, found this...

 

Interesting stuff, this is why I love Gatsby!

Does dev.to 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.

 

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

 
 

I added a blog header just like dev.to

screenshot

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

 

Wow, this looks awesome very interesting concept.

 

Smart thinking! I really prefer the experience that Dev.to 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!

 

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.

 

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

 

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 dev.to, then why not use it as your CMS too.

Fantastic use for Gatsby!

 
 

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.

 

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

 

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

 

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

 

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!

 

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)