# Displaying Hashnode Posts on Personal Site with RSS

### Introduction

Hello,

I hope you are writing articles on Hashnode, either in Personal, community or company blogs. You may want to link and display your written articles in your personal websites or portfolio where others can see only your article with other content. Here we'll see two ways in which you can achieve the above task easily.

### Solutions

#### Hashnode Official API

Hashnode provides an official GraphQL API from which you can retrieve various content and display it. You can test their [playground here.](https://api.hashnode.com/) With this API you can get a various type of content like featured posts, users posts and publications, and manipulate articles and related data. You may require PAT(Personal Access Token) for some of the access.

For more information, refer [to this article](https://catalins.tech/hashnode-api-how-to-display-your-blog-articles-on-your-portfolio-page) by Catalin Pit.

#### RSS Parsing

Another way is RSS Parsing. In this, the RSS URL of the publication is required to retrieve and process data. Here I'll take [my blogs](https://blog.thesourcepedia.org/) RSS and process it and display articles which are written by me(aka Piyush Goyani).

First, I created a Backend NodeJS API in which I installed [`rss-parser`](https://github.com/rbren/rss-parser) package to parse the RSS feed of the blog.

```javascript
import Parser = require('rss-parser');

async getRss() {
  const parser: Parser = new Parser();
  const url = 'https://blog.thesourcepedia.org/rss.xml';
  const feed = await parser.parseURL(url);
  return feed.items.map((item) => {
    return {
      title: item['title'],
      coverImage: item['cover_image'],
      creator: item['creator'],
      link: item['link'],
      pubDate: item['pubDate'],
    };
  });
}
```

Here, as you can see, RSS feed URL is parsed and the parser returns the entire array, which is further mapped with a specific key/value object and return as an API response.

On the frontend side, which is the Vue component where All articles are being rendered by calling API.

```javascript
<template>
  <div>
    {{ items }} // render posts
  </div>
</template>
export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    fetch("https://api.thesourcepedia.org/blog/getRss")
      .then((res) => res.json())
      .then((data) => {
        this.items = data.filter((post) => post.creator === "Piyush Goyani");
      });
  },
};
```

Here I'm calling `/getRss` API which returns the article array, and here I can filter which specific author(e.g myself) and display only those posts which I have written in [my personal site](https://piyushgoyani.thesourcepedia.org/).

![PersonalSitePosts.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666336444978/abDqVi0pe.png align="left")

You can filter and process RSS differently as per your need.

### Conclusion

I hope you enjoyed this article and found it useful. Give a thumb and subscribe for more interesting stuff.