How I Use GitHub Actions to Keep My Resume Up to date Using Scheduled Events

saadmk11

Maksudul Haque

Posted on August 12, 2020

How I Use GitHub Actions to Keep My Resume Up to date Using Scheduled Events

GitHub Actions (Scheduled Events)

GitHub Actions lets you run your workflows on a schedule.
If you add the example code below in your GitHub Workflow you will see that your workflow will run every 15 minutes.

on:
  schedule:
    # * is a special character in YAML so you have to quote this string
    - cron:  '*/15 * * * *'

i.e: The shortest interval you can run scheduled workflows is once every 5 minutes.
more details on scheduled events here:
https://docs.github.com/en/actions/reference/events-that-trigger-workflows#scheduled-events

Setup GitHub Actions:

Create a .yaml file here <project_dir>/.github/workflows/update_resume.yaml

paste this code in the created file:

name: Update My Resume

on:
  push:
    branches:
      - master
  schedule:
    - cron:  '0 */15 * * *'

jobs:

  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v2

      - name: Setup Python Environment
        uses: actions/setup-python@v2
        with:
          python-version: 3.7

      - name: Install Requirements
        run: pip install -r requirements.txt

      - name: Execute Python script
        run: |
          python scripts/update.py

      - name: setup git config
        run: |
          git config user.name ${{ secrets.USERNAME }}
          git config user.email ${{ secrets.EMAIL }}

      - name: commit changes
        run: |
          chmod +x ./scripts/commit.sh
          ./scripts/commit.sh

Here the workflow will run on push events and also run automatically in every 15 minutes.

We are running the workflow on ubuntu-latest image.

In the first step github will checkout the code

 - name: Checkout Code
   uses: actions/checkout@v2

In the second step github will setup python 3.7

 - name: Setup Python Environment
   uses: actions/setup-python@v2
   with:
     python-version: 3.7

In the third step github will install the requirements using pip
I'm using the requests package on send request to the GitHub API.
If you don't need any external packages you can skip this.

 - name: Install Requirements
   run: pip install -r requirements.txt

In this step github will execute scripts/update.py.
Don't worry we haven't created the python script yet. More on this later.

 - name: Execute Python script
   run: |
     python scripts/update.py

In this step github will setup the git config. you can go to https://github.com/<your_username>/<your_repository_name>/settings/secrets/new to create secrets (USERNAME, EMAIL).
This username and email will be used on the git commit.

 - name: setup git config
   run: |
     git config user.name ${{ secrets.USERNAME }}
     git config user.email ${{ secrets.EMAIL }}

In this step github will commit the changes to your repository.
We will create the /scripts/commit.sh file in the next step.

 - name: commit changes
   run: |
     chmod +x ./scripts/commit.sh
     ./scripts/commit.sh

Create Commit Script:

Create a file here <project_dir>/scripts/commit.sh

paste this code in the created file:

#!/bin/bash

git add . 
git commit -m "Updated Repository data"
git push origin master

This is just a shell script which will push a new commit to your repository.

Create Json File:

this Json file will be updated using the update.py file that we will create later.

Create a file here <project_dir>/repo_data.json

paste this code in the created file:

[
    {
        "full_name": "readthedocs/readthedocs.org",
        "url": "https://github.com/readthedocs/readthedocs.org"
    },
    {
        "full_name": "saadmk11/banking-system",
        "url": "https://github.com/saadmk11/banking-system"
    }
]

Here I adding the open source projects that I have contributed to. We will update this file to
to show the correct number of starts, forks, watchers for each repository and update the description of the repository.

Create Python Script:

Create a file here <project_dir>/scripts/update.py

paste this code in the created file:

import json

import requests


def get_repositories_data(data):
    new_data = []

    for repo in data:

        repo_name = repo['full_name']

        url = f'https://api.github.com/repos/{repo_name}'
        response = requests.get(url)

        response_data = response.json()

        repo.update({
            "short_description": response_data['description'],
            "stars": response_data['stargazers_count'],
            "forks": response_data['forks_count'],
            "watchers": response_data['watchers_count']
        })
        new_data.append(repo)

    return new_data


def update_json_file():
    with open('repo_data.json', 'r') as json_file:
        data = json.load(json_file)
        updated_data = get_repositories_data(data)

    with open('repo_data.json', 'w') as json_file:
        json_file.write(json.dumps(updated_data, indent=4))


if __name__ == '__main__':
    update_json_file()

This script will send GET request to the GitHub API and get the latest updates of the repositories that I listed in the Json file and update the repo_data.json file to show the current number of starts, watchers and forks and update the description.

Create the requirements.txt file here <project_dir>/requirements.txt and add requests==2.24.0 in it.

Create HTML and JS File to Load The JSON Data:

Create a file here <project_dir>/index.html

Add this code in the created file:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Resume</title>
    </head>
    <body>
        <div id="openSourceRepos"></div>
        <script src="main.js"></script>
    </body>
</html>

** This is just to show the example you can style and design your resume any way you like.

Create a file here <project_dir>/main.js

Add this code in the created file:

function getJSON(url, callbackFunction) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            try {
                var responseData = JSON.parse(xmlhttp.responseText);
            } catch(error) {
                return;
            }
            callbackFunction(responseData);
        }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}


document.addEventListener('DOMContentLoaded', (event) => {
    var container = document.getElementById("openSourceRepos");

    getJSON('repo_data.json', function(data) {
        data.forEach(function (repo) {
            var child = `
                <div>
                  <h2>
                      <a href='${repo.url}'>${repo.full_name}</a>
                  </h2>
                   <p>${repo.short_description}</p>
                   <ul>
                       <li>${repo.stars}</li>
                       <li>${repo.forks}</li>
                       <li>${repo.watchers}</li>
                   </ul>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', child);
        });
    });
});

This JavaScript File will load the repository data from the Json file and display it on the html. Here I have used XMLHttpRequest but you can use Fetch API or JQuery to load the Json File.

After all the steps are done your project repository tree should look like this

project_dir
│   index.html
│   main.js
│   requirements.txt
│   repo_data.json    
│
└───scripts
│   │   commit.sh
│   │   update.py
│   
└───.github
|    |
│    └───workflows
|        |   update_resume.yaml
|

Setup GitHub Pages:

I use GitHub Pages to host my Resume.
You can learn more about How to setup GitHub Pages Here

After your setup is Done. GitHub will run your workflow every 15 minutes and if there is any change in the
repositories listed in the json file the python script will update it and the changed file will be committed
to your repository. So, the repositories you have listed in your resume will always be up to date.

Conclusion

I showed a small thing you can do with schedules on GitHub Actions.
But you can do a lot of more complex things using this.
You can automate many things on your website.
If you read this post and make something using it please feel free to share
with me on twitter or in the comments.

This is my first post! :)

💖 💪 🙅 🚩
saadmk11
Maksudul Haque

Posted on August 12, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related