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>> 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: $
with:
feed_list: "https://medium.com/feed/@protiumx"
readme_path: "https://raw.githubusercontent.com/protiumx/blog/main/articles/004/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:
๐ฝ