# Adding a list of my Hashnode posts to my personal website.

<details data-node-type="hn-details-summary"><summary>About me</summary><div data-type="detailsContent">Hey reader! My name is Marcus Weinberger, and I'm just getting started with Hashnode. While I'm mainly a Python developer, I work with HTML and such for my frontends. [Click here to see more about me!](https://marcus.hashnode.dev/about)</div></details>

So, [my personal website](https://marcusj.tech) is a bit lame. Actually, I would say it's very lame. I don't really **do** front-end.

[![An old snapshot of my personal website - marcusj.tech](https://cdn.hashnode.com/res/hashnode/image/upload/v1681787419136/b950c512-8efe-49c3-9e7c-7d567792a6c7.png align="center")](https://web.archive.org/web/20220130211140/https://marcusj.tech/)

## Why the update?

After starting [*yet*](https://blog.marcusweinberger.repl.co/) [**another**](https://replit.com/@MarcusWeinberger/blogold) [<s>additional</s>](https://notes.marcusj.tech/link/blog) blog, I thought it would be a nice way to drive traffic to it if I added a feed of my posts to my personal website. On a sidenote, I don't know why I insisted on writing all my previous blogs from scratch. Moving to Hashnode is looking like a good idea.

Well, the [back-end of my website](https://marcusj.tech/__repl) is built with Python, so let's use that to query the Hashnode API. I followed a tutorial which I will link below, and customized it a little, before making a little wrapper for it.

%\[[https://catalins.tech/hashnode-api-how-to-display-your-blog-articles-on-your-portfolio-page/](https://catalins.tech/hashnode-api-how-to-display-your-blog-articles-on-your-portfolio-page/)\]

### Python code

```python
import requests

class Hashnode(object):
    _api_url = 'https://api.hashnode.com'
    
    def __init__(self, api_key: str):
        self.headers = {
            'Authorization': api_key
        }

    def get_user_posts(self, username: str, page: int = 0) -> (str, list):
        """
        Accepts a str username as input.
        Returns the blog domain (str), and a list of posts (dicts)
        """
        query = '''{
  user(username: "<username>") {
    publication {
      posts(page: <page>) {
        title
        brief
        slug
        coverImage
      }
    }
    publicationDomain
  }
}'''.replace('<username>', username).replace('<page>', str(page))
        req = requests.post(self._api_url, json={'query': query}, headers=self.headers)
        res = req.json()['data']['user']
        return res['publicationDomain'], res['publication']['posts']
```

Using this, I added the following snippet to my Flask template

```xml
<div id='posts'>
    <!-- Loop through posts -->
    {% for post in posts %}
    <div class='post'>
        <h3>{{ post.title }}</h3>
        <p>{{ post.brief }}</p>
        {% if post.coverImage %}
        <img src='{{ post.coverImage }}' alt='Cover Image'>
        {% endif %}
        <a href='{{ blogDomain }}/{{ post.slug }}'>Read more</a>
    </div>
    {% endfor %}
</div>
```

With some CSS (generated by ChatGPT to fit the rest of my website), it fit right in.

## The results

[Check out the live site here!](https://marcusj.tech)

![Updated result](https://cdn.hashnode.com/res/hashnode/image/upload/v1681788327113/e2be3e08-c495-44dc-a5d1-26ce4ea73f50.png align="center")
