Creating your Blog using GatsbyJS and Dev.to 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 Dev.to API articles here and decided to do 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.

geocine / gatsby-source-dev

Gatsby source plugin that fetches user articles from Dev.to

gatsby-source-dev

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

View on GitHub

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

geocine / gatsby-starter-devto

A GatsbyJS starter template that leverages the Dev.to API

Gatsby Starter Dev.to
This is a demo usage of the gatsby-source-dev plugin
Also using html-react-parser to render html as components as described on my blog post

View on GitHub

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.

Link: https://dev.to/geocine/creating-your-blog-using-gatsbyjs-and-dev-to-api-3jb3