hugo git hash, build time extract instead of using .GitInfo

By JIMz

background info

want to include the last git commit hash in the footer ( not page specific, only in terms of the whole repo ), just like what was done in the old instance of jimz.cc, but that was built with Gatsby, that component cannot be reused directly and now therefore looking for a solution in Hugo.

not a fan of the official GitInfo

officially there is the hugo gitinfo page method, kind of cleaner than the Gatsby counterpart which has to mess slightly with graphql - yes the data collection is pretty unified but the process is somewhat overkill, BUT the hugo GitInfo thing has its own hassles, involve a bit more config ( that enableGitInfo thing ) and worse still, even if you managed to make it work in local development, requires some additional config when deploying remotely.

sticking with AWS Amplify

don’t want to further bother with the deployment testing which is very time-consuming, and info can be found online are all about github actions, while the current CD workflow of this site is based on AWS Amplify, not a strong reason to make this major change only for this tiny add-on.

the goal

this solution meant to :

  • be compatible with the current CD workflow on AWS Amplify ;
  • extract the git info in the prebuild stage ;
  • save it as a local data source so as to make sure it will be available in build time ;
  • present the data with partials / shortcodes ;

prerequisites

make sure the .git directory exists in the deployment environment, by simply add a test command like :

ls -la .git

during the prebuild stage.

the git command must also be available for git log to work.

procedures

1. modify amplify.yml

modify amplify.yml, by adding this line

- ./bin/git-set-aws.sh

under

frontend:
  phases:
    preBuild:
      commands:

in which all related scripts are kept inside [root]/bin.

the scripts simply do the followings :

  • prepare a blank new file [root]/data/git.yaml
  • extract related git info via the command git log

the sample git.yaml will look something like this :

---
git_author: xxxxxx
git_date: xxxxxx
git_hash_long: xxxxxx
git_hash_short: xxxxxx

2. add the githash partial

add the file

githash-data.yaml

under :

[root]/layouts/partials/git

with the following contents:

{{/* git info from data/git.yaml */}}
, last commit : {{ .Site.Data.git.git_hash_short }}

3. call githash partials

the current version of jimz.cc use the hugo theme ananke. to show the githash in the footer, a quick way is to override the related partial of the theme.

the file to be overriden is in :

[theme root]/layouts/partials/site-footer.html

so copy that partial and put that in :

[site root]/layouts/partials/

and add a line inside like :

{{ partial "git/githash-data.html" . }}

summary on the flow

  1. extract basic git info from the last commit via shell scripts ;
  2. make the extracted info available as hugo data source in git.yaml ;
  3. get the git info via hugo data source ( with optional formatting ) by partials/git/githash-data.html ;
  4. show the git info by overriding the theme partial with partials/site-footer.html ;