How To Use Github Actions To Automate Your Github Profile Readme With Your Latest Blog Posts

I don’t know if you have noticed, but a few months ago, Github released some awesome new features. So, the other day I was browsing through a list of cool Github profile READMEs and saw some really creative ideas. This new feature really aims on making your Github profile more personal. All you need to do is create a repo with your username and add some markdown to it. Then decided why not to add something like that to my profile? But what exactly?

The idea

Apart from getting some README inspiration, the other feature that I was looking at was Github actions. That also looked cool as it allows us to automate stuff within Github. The first thing I started wondering about was what kind of project shall I work on that makes use of both features. It had to be something both visual and something that could be automated...

"Something that modifies my Github profile. But what exactly? Once I find a cool idea I will write a blog post about it... Hold on a second... That's it!!! " 🤔💡

Show links to my latest blog posts on my Github profile README and automate Github actions to fetch new ones.

Adding a feed to my website

As a typical modern dev, I have a personal site which was developed using React.js and Gatsby!

The first thing to do was to find a way to get a list of all my blog posts. What's the simplest way of doing that in a friendly format like JSON? Maybe something like RSS? Do people still use RSS in 2020? I remember once a colleague asked for my website's RSS feed, so apparently this technology is still alive.

Thankfully I found this awesome Gatsby plugin that generates feed files in both JSON and XML formats. So without much effort my website started having not one but two options to programmatically list all the available blog posts. 🙌

Next step, was find out how to add these articles into my Github profile.

The Github profile README script

Nowadays developers are no strangers to markdown. That is where we document our code anyways right? 😅 Adding the articles in a markdown format would look like this.

## Recent articles:
- [Article 1](url1)
- [Article 2](url2)
...

We need to create a script that modifies the README file of our Github profile for us. The logic here goes as follows.

We first read the contents of the README. This is literally the markdown file with the whole content that is displayed on your profile. Once we open it, we make a HTTP request to the JSON feed page that we introduced earlier. That way our blog posts are programmatically available and can be added in a markdown format.

Now let’s iterate through the last 5 blogs and translate them into an unordered list of links. If the README has a list of latest blogs, simply trim everything after the recent blogs title. Then replace it with the new feed and update the README file. Here’s the code!

import fs from "fs";
import axios from "axios";

const fetchFeed = async () => {
  const feedRequest = await axios("https://www.harrisgeo.me/feed.json");
  return feedRequest.data.items.splice(0, 5);
};

const updateFeed = async () => {
  try {
    const readme = fs.readFileSync("./README.md", "utf8");

    const feed = await fetchFeed();
    const articlesTitle = "## Recent articles:";
    let updatedReadme = readme.split(articlesTitle)[0] + "\n" + articlesTitle;

    feed.forEach((item) => {
      updatedReadme += `\n- [${item.title}](${item.url})`;
    });

    fs.writeFileSync("./README.md", updatedReadme);
  } catch (error) {
    console.error(error);
  }
};

updateFeed();

Yes it was really that simple! That was the script that will run to update our profile. Now let’s talk about automating that with Github actions.

The automation with Github actions

Github actions are free for any open source project and the free plan gives us 2000 minutes per month for free. Given that this script takes around 30 seconds to execute, reaching the limit will definitely not be a problem. How often do we want this to update anyways? I personally aim to write once per week (and i’m not that good at making it every week) so that means what? 2 minutes per month? 😂

You may have different ideas in mind but I believe that going beyond that limit is not that easy. Anyways, now let’s talk about the actual automation.

Have you heard of these linux servers that generate some automated scripts that usually run every day at midnight and collect stats? These are called crons. They are usually reliable and in general quite handy as they run tasks we tell them to run whenever we want. The only weird part about crons is the syntax of defining how often they should be executed. It’s one of these things that I have to google every single time I want to modify a cron job schedule. Here’s a really useful link on how to schedule a cron job.

Now be aware that Github actions do not allow us to run jobs more frequently than once every 5 minutes. To be honest, this is way more often that we want.

Next step is to set the cron script to do the following:

1. yarn install the dependencies of our project
2. execute the script that fetches the new blog posts
3. git add that file
4. git commit the updated README file.

Here is the whole workflow.

name: latest blog posts
on:
  schedule:
    - cron: '15 22 * * 3'
    # Every Wednesday at 22:15 👻

jobs:
  latest-blog-posts:
    name: Latest blog posts
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository
        uses: actions/checkout@v2
      - name: Setup node
        uses: actions/setup-node@v2-beta
        with:
          node-version: '13'
      - name: Install node dependencies
        run: yarn
      - name: Run script that gets latest blog posts
        run: yarn feed
      - name: Git setup
        run: git config --global user.email bots-rule@harrisgeo.me && git config --global user.name readme-bot
      - name: Git commit README.md file
        run: git commit -am "BOT Update readme" && git push

This bad boy will run our code every Wednesday at 22:15 and will update our Github profile README (i’ve used these 3 words a lot right?) with our latest blogs.

I personally write my blog posts early in the week, so Wednesday night is my safe bet.

Now our profile has some cool functionality! Here is a link to my repo. What other cool stuff have you seen Github profile READMEs and Github actions?

Please subscribe to my newsletter if you enjoyed this post and you would like to get notified when new ones come out.