Follow

Follow

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

Marcus Weinberger's photo
Marcus Weinberger
·Apr 18, 2023·

2 min read

Play this article

Table of contents

  • Why the update?
  • The results
About me
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!

So, my personal website 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

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!

Updated result

Did you find this article valuable?

Support Marcus Weinberger by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this