![introducing-utopian-s-gatsby-plugin]()
Gatsby is a static site generator for React. Thus I thought of using it to show all my Utopian posts as a blog. Gatsby has a list of plugins which includes Wordpress, Firebase etc, thus I created Utopian Plugin so that anyone can create their Static site which will show the list of contribution one has done in a field of Open Source.
The demo site code can be seen in https://github.com/codingdefined/gatsby-utopian-blog, its part of this Development Contribution. The demo site sits on [codingdefined-utopian.surge.sh](https://codingdefined-utopian.surge.sh).

To Start with this Plugin you need to install it using `npm install gatsby-source-utopian` and then add it to the gatsby-config.js file
In the gatsby-config.js file you need to add the gatsbt-source-utopian as shown below, where user is the username for which you would like to get all the posts where user is your username.
```
module.exports = {
plugins: [
{
resolve: 'gatsby-source-utopian',
options: {
user: 'codingdefined',
},
},
],
};
```
Once done you can query the GraphQL using the below query which will give you all the information about the posts.
```
{
allUtopianPost{
edges{
node{
id
permlink
author
category
created
url
}
}
}
}
```

Then we have changed the index.js to get the information from the GraphQL.
```
{data.allUtopianPost.edges.map(({ node }) => (
{node.title}
in {node.json_metadata.type} category
on {new Date(node.created).toLocaleDateString()}
))}
```
It is very simple site which will give teh Title and which category it was posted and when it was posted. Once you click that it will take you to Utopian posts.
### Technology Stack
- Node.js
- Gatsby
- Utopian NPM Package
### Roadmap
Create a full fledged blog with Utopian Contribution
### How to contribute?
You can create issues or features in either of the repository
- https://github.com/codingdefined/gatsby-source-utopian (The Source Plugin)
- https://github.com/codingdefined/gatsby-utopian-blog (The Blog)
Posted on Utopian.io - Rewarding Open Source Contributors