Adding last updated date to GitHub Pages from private repository

user_10733096 0
Viewed 290

I use a github page for my personal website and would like to include a little piece at the bottom that says when the website was last updated (i.e., when the most recent commit was). I have seen questions asking about the API, but I'd also like to know how to integrate this with the GitHub page so it automatically updates this also. The website is on a private repository.

github-pages github
3 Answers

It depends what static site generator you are using.

For Jekyll, for instance, you have the plugin gjtorikian/jekyll-last-modified-at, a liquid tag for Jekyll to indicate the last time a file was modified.

This plugin determines a page's last modified date by checking the last Git commit date of source files.
In the event Git is not available, the file's mtime is used.

With Hugo, you have the lastmod Git variable, that you can configure (as shown in "Last Modified Date with Hugo" by Andrew Stevens , or in "Last Modified Date in Hugo" from MERT BAKIR)

[frontmatter]
enableGitInfo = true
date = ["date", "publishDate", "lastmod"]
lastmod = ["lastmod", ":git", "date", "publishDate"]

By default, :git comes before lastmod but the configuration change above allows you to still define lastmod in your front-matter to override git derived dates if you wish.

You can now display lastmod:

<p>Last Modified: {{ .Lastmod.Format "2 January 2006" }}</p>

With 11ty/eleventy, you would use contentDate: see issue 330.

The goal is, of course, to not use a dynamic script (with API call) in your page, since it would involve an API call each time you access the page.
The "last modification" should be a static data, generated once when you are building and publishing your page.

VonC_63090

With a little bit of AJAX this can be achieved utilizing the GitHub API.

const desiredRepo = "yoursite.github.io";
const dateTagClass = ".date"; // The HTML element you want to update

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/YOUR_USERNAME/repos", true);
xhttp.send();

Make sure to change desiredRepo to your GitHub pages URL, dateTagClass to the appropriate class for the element you want to update, and to update the xhttp.open() call to include your username where it says YOUR_USERNAME.

user_122111570

One way to do this would be to use a service like If This Then That (IFTTT). IFTTT has a "GitHub" channel which can be used to monitor a repository for changes. When changes are detected, IFTTT can then send a message to a webhook which can update the timestamp on your website.

user_177255620
Related