Is it possible to automatically have the last updated date on my website changed to the current date whenever I push changes to GitHub?

Question

I would like to have the last updated date on my website, but I want the date information to be automatically updated every time I push my changes to GitHub, rather than remembering to manually change it.

Right now my site only uses HTML, CSS, and JavaScript. I don't know if the problem can be solved using these technologies, or if it's possible for a Git commit or push to trigger something.

UPDATE:

Solved by @k3llydev using GitHub API. Codepen example with updates to achieve what I'm looking for.

const desiredRepo = "seachel.github.io";
const dateTagClass = ".date";

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
  if (this.readyState == 4 && this.status == 200)
  {
    let repos = JSON.parse(this.responseText);

    repos.forEach((repo)=>{
      if (repo.name == desiredRepo)
      {
        var lastUpdated = new Date(repo.updated_at);
        var day = lastUpdated.getUTCDate();
        var month = lastUpdated.getUTCMonth();
        var year = lastUpdated.getUTCFullYear();
        $(dateTagClass).text(`Last updated: ${year}-${month}-${day}`);
      }
    });
  }
};
xhttp.open("GET", "https://api.github.com/users/seachel/repos", true);
xhttp.send();

Answer 1

The quick answer is yes. It is possible. You can view how to use the official GitHub API and create an AJAX request with vanilla JavaScript to this API, then all you have left to do is to handle which data you want.

How?

Look at an example, I am calling with JavaScript trough AJAX the GitHub API and specifying that I want all repos for user k3llydev. Then I just print the repository name and its last update time.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    let repos = JSON.parse(this.responseText);
    document.write("<h3>k3llydev github repositories w/last updated</h3>");
    repos.forEach((repo)=>{
      document.write(`<code>${repo.name}</code>: <em>${new Date(repo.updated_at)}</em><br>`);
    });
  }
};
xhttp.open("GET", "https://api.github.com/users/k3llydev/repos", true);
xhttp.send();

Note: If you use the API like this, the repo last update time that you want to implement on your website will update automatically, since every time your website is loaded, the GitHub API is called and will retrieve newer and updated data about your public repos.

Answer 2

The JS answer is nice, but you can also do this with a Bash script in the root of your site:

#!/bin/bash

git_last_commit_date="$(git log -1 --format=%cd)"
echo "Git last commit date: $git_last_commit_date"

html_files="$(find . -type f -name "*.html")"

for file in $html_files; do 
  echo "Inserting date into: $file" 
  sed -i "" "s|<span id=\"git-last-commit-date\">*</span>|<span id=\"git-last-commit-date\">$git_last_commit_date</span>|g" "$file"
done 

Then have this <span> element in pages you want it to update:

<span id="git-last-commit-date"></span>