Post Context

Over the past month I have been using Cloudflare Pages to host my hugo-based blog and portfolio. Since the beginning I have seen this site as a development diary and portfolio. This site by its very nature is open-source. I want people not only to see the code but also see my developmental process and problem-solving skills. This might be useful for perspective employers but also those who love to code or those exploring using a similar development stack for client projects.

This site is set up so that Hugo and Cloudflare interact through Gitlab which acts as the code repository for this site. When I push commits (specific changes in code) I associate that code with a git issue labeled for bugs, new features, posts etc. which allows easy organisation.

a screen shot of the issues associated with the website
a screenshot of 'issues' in this sites git repository

Using Hugo’s “.GitInfo” for Accountability

A week ago I realised that in order to be fully in-step with my goal to make this site fully transparent I needed to create git issues for each of the posts and pages of this site and not just the code changes. That would allow the posts (like this one right now) to have a traceable link for people to see page changes and updates to posts when I correct spelling mistakes or update posts when new information becomes available.

This common on many news sites and in API documentation. News articles, tutorials, and APIs are not static so neither should their documentation be. As new information or features become available there should be an indication of when the change took place and why.

Thankfully for me Hugo has this functionality built in! Hugo can access the commit data of repositories hosting a static site’s files through the use of .GitInfo variable which can be used to tell a user when a specific page was last updated, producing something like this:

a screenshot of of 'page last updated' on the hugo documentation site showing `when and why`
a screenshot of of 'page last updated' on the hugo documentation site showing `when and why`

Constructing the Code

Following the documentation on the Hugo website I needed to enable .GitInfo in my site config file config.toml by adding:

1

enableGitInfo = true

I then added the following code to a template partial called post-footer.html. I then called post-footer.html in my post.html partial so that .GitInfo can be placed at the bottom of each post/page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="post-footer">
    <small>
        {{ if .GitInfo }}
            {{ with .GitInfo.AuthorDate }}
                This page was last updated: 
                {{ dateFormat "January 2, 2006" . }}
            {{ end }}
            <br />
             {{ with .GitInfo.Subject }}
                "{{ . }}"
            {{ end }}
            <br />
            See the history of this page by clicking here: <a
            href="https://gitlab.com/conorjwryan/conorjwryan-site/-/issues/
            {{ .Params.gitIssue }}">#{{
            .Params.gitIssue }}</a>
        {{ else }}
            This page has not been committed yet and
             thus will not show any "gitInfo"
        {{ end }}
    </small>
</div>

The above code is placed at the bottom of each post. It first checks if .GitInfo is available.

If conditions are met: it proceeds to add This page was last updated October 10, 2022 (for example). Below that shows the message from the last git commit "#32 added feat img caption and link for post imgs". Below that it invites the user to see the accompanying git issue (only available if you add gitissue parameter to your post frontmatter).

the result of the above code stating the use of gitinfo at the end of each page
showing the result of the gitinfo at the bottom of a post in local development mode

If conditions are NOT met: (such as when a page has not been committed to the repository - like this post in draft form) then below it states This page has not been committed yet and thus will not show any "gitInfo"

A Screenshot of this page under construction not and thus having not been committed informing the author of such by not meeting the conditions of the code above
Notice of this post not being committed during post draft stage

Potential Errors in Local Development

The if/else statement checking for the existence of GitInfo is the most important part of the above code. If you call any .GitInfo term without it like .AuthorDate then hugo will throw out an error saying term is null like the error below:

An error error stating 'term is nil' when trying to work out how to incorporate 'GitInfo' in local development

Errors like this are so overwhelming it took me ages to realise what the cause was and that all I required to fix it was the {{ if .GitInfo }}. I thought hugo serve was broken as the code would work while in active development but as soon as I started hugo serve fresh it would produce errors. I figured out a “hotfix” where it would only show .GitInfo “in production”. This post would’ve been a different story entirely if I didn’t realise the mistake was purely mine.

.GitInfo In Production on Cloudflare Pages

The result from the above code is that each and every page and post has different GitInfo stating when the page was last updated. Below is a selection of three posts on this site showing how `GitInfo is supposed to work (shown in local development environment).

a composite screenshot of gitinfo on 3 different posts/pages. Each have different commit messages
how gitinfo works in the development environment 'hugo serve'

On my production environment deployed on Cloudflare Pages it is a different story entirely. All posts/pages default to the last commit message/date in the repo. This defeats the whole purpose of including .GitInfo in the first place!

a composite screenshot of gitinfo on deployed Cloudflare Pages which breaks the gitinfo variable
the same posts as above hosted on 'cloudflare pages' which replaces all individual gitinfo-based information with the latest commit message/date

Having doubted myself thinking that this was a problem with my code rather then the platform itself I deployed the same instance on Netlify (another service offering free hosting provider/deployment engine for Jamstac applications/static sites) and it had no problem displaying the correct .GitInfo information. This leads me to believe that this is not a Hugo issue but rather a Cloudflare Pages-specific platform issue resulting from the way it clones/caches repositories and deals with specific git commit refs.

Decisions, Decisions

I have no doubt this will be fixed in time but there is no telling when this will happen. However, when it does I will be sure to update this page. In the meantime there are two options I am presented with if I want to be able to use .GitInfo:

  1. Choose another hosting provider like Netlify that can properly show .GitInfo

  2. Wait for Cloudflare to fix the issue

I am more inclined to choose the latter option because I already use Cloudflare for other things (like their R2 storage offerings as my own image CDN - post coming soon) or their DNS. However, while waiting I will adapt my code accordingly.

Instead of using .GitInfo I will use the following code at the bottom of each page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

{{ if .Params.gitIssue }}
<div class="post-footer">
    <small>
        {{ if .Params.lastmod }}
            This post was last updated on: 
            {{ dateFormat "January 2, 2006" .Params.lastmod}}
        <br />
        {{ else }}
            This page is under version git version control.
            <br />
        {{ end }}
            Click here: 
            <a href="https://gitlab.com/conorjwryan/conorjwryan-site/
            -/issues/{{ .Params.gitIssue }}">
            #{{ .Params.gitIssue }}
            </a>
            to view changes made.
    </small>
</div>
{{ end }}

This code is reliant on the custom gitIssue parameter being present on the post (which it always will be for the sake of versioning as stated above). I have also included the lastmod variable in post frontmatter to state that the page has been changed. I have to change this manually, however it is better than not having it at all.

However, as noted in the .GitInfo documentation, using lastmod with .GitInfo enabled through the config file (as above) is not ideal. When .GitInfo is enabled, regardless of it being used, Hugo overwrites any page lastmod value with the .GitInfo.AuthorDate value. Using Cloudflare Pages this will result in ALL POSTS ACROSS THE SITE stating they were last updated on the day of most recent repository commit…

For now I’ve gotten rid of the --enableGitInfo in my site config which fixes circumvents the lastmod bug and the site is at least a little bit more accountable/acuate than before. When this issue is fixed you’ll know about it!

a screenshot of the current state of my post footer present on each page linking people to the git issue of the page
the current state of my post `footer` section linking to the pages relevant git issue