Today I wanted to update my github page to show a list of my last Medium articles. I ended up automating it.

First approach

My first attempt was fetching the RSS feed using the URL medium.com/feed/@username and parse the xml document. But I was hit with a charming CORS error. Now what?

I remembered that I’m using a github action to update a similar section on my github profile. So, what if I tell this action that the README file is called index.html?

blog-post-workflow

The github action supports a readme_path parameter. After a quick dive in its source code I noticed that this file could be anything, not necessarily a markdown file. Problem solved!

Let’s add the articles section into the html:

<section class="content__articles">
  <p>&gt; last published articles:</p>

  <ul>
    <!-- BLOG-POST-LIST:START -->
    <!-- BLOG-POST-LIST:END -->
  </ul>
</section>

Since the action is intended for markdown files, the default template for the posts links is [title](url) but we need html code. Luckily the github action also provides a template param. So let’s change the template to generate list items:

<li><a href="$url" target="_blank">$title</a></li>$newline

That’s it!

Our workflow configuration should be:

name: Update Medium articles
on:
  schedule:
    - cron: '0 0 * * 0' # Runs once a week
  workflow_dispatch:

jobs:
  update-articles-section:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: gautamkrishnar/blog-post-workflow@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          feed_list: "https://medium.com/feed/@protiumx"
          readme_path: "./index.html"
          template: '<li><a href="$url" target="_blank">$title</a></li>$newline'

Check the file here. NOTE: I added the workflow_dispatch trigger so I can trigger the action from the github UI.

That’s all. I few lines of code and we added an automated section for our github page (or any page).

Related articles:

👽