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.
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
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.
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
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:
Top comments (17)
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.
docs.dev.to/api/#tag/webhooks
Is this what you're looking for? Just saw it now.
I added a blog header just like dev.to
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!
Have any more info on DEV's API?
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...