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

So, my personal website is a bit lame. Actually, I would say it's very lame. I don't really do front-end.

Why the update?

After starting yet another additional 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 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.

Python code

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

<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!