How to know your Ghost version 👻

If you use Ghost only as a headless CMS , with its Content API, you may not know its version if you do not host it yourself. But, if you do not have this information, how do you know if it is up to date? Or what are the latest features that have been added or bugs that have been fixed?

Fortunately, Ghost (or the theme you are using) injects the following meta data into the header:

<meta name="generator" content="Ghost 3.37" />

If you are like me, you probably do not want to check the source code every time to see if the software has been updated or not. As Eleventy generates my static site, I do not use Ghost as a frontend. So one solution might be to display the version.

You will find below the code that I have been applied into the Settings → Code Injection section. The end result can be seen on the cover image of this post.

Site Header

The CSS below applies styling to ensure the version is always on top of the content and is widely visible.

<!-- These styles are applied only on the "backend" website -->
<style>
    /* Advertise the Ghost version, to easily follow the new versions */
    .generator {
        position: fixed;
        bottom: 1rem;
        left: calc(50vw - 6rem);
        z-index: 9999;
        color: red;
        font-size: 3rem;
    }
</style>

Site Footer

The following JavaScript code gets the meta tag from the head section and creates a new div with the CSS class defined above.

<script>
      const div = document.createElement("div");
      const generateBy = document.querySelector('meta[name="generator"]').content;
      const contentText = document.createTextNode(generateBy);
      div.appendChild(contentText);
      div.classList = "generator";
      document.body.appendChild(div);
</script>

Bonus

If you have carefully examined the cover image of this post, you may have noticed that the view also has a red dashed border. While I was in the previous settings, I was wondering if there was anything I could do to indicate that I was not on my real website, as they looked almost identical in its early versions.

So I have applied the following CSS in the style section:

/* Show visually that we are not on the "frontend" website */
html, .site-nav-main { 
    border: 5px dashed red;
}

Conclusion

One of the downsides of using these settings for this is that we can no longer use them from the Ghost API. In my case, I did not use them, so I have not lost any functionality.

Do you have another tip if you are currently using Ghost only as a backend?