DEV Community

Cover image for Automate an articles section in your page

Posted on

Automate an articles section in your page

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


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>

    <!-- BLOG-POST-LIST:END -->
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

That's it!

Our workflow configuration should be:

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

    runs-on: ubuntu-latest
      - uses: actions/checkout@v3
      - uses: gautamkrishnar/blog-post-workflow@master
          GITHUB_TOKEN: $
          feed_list: ""
          readme_path: ""
          template: '<li><a href="$url" target="_blank">$title</a></li>$newline'
Enter fullscreen mode Exit fullscreen mode

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:


Top comments (0)