Finding out Ghost version with JS

200711

So, this blog runs on Ghost. At the footer of this website, I wanted to keep the message "Ghost version self-hosted on DigitalOcean distributed by Cloudflare." But that meant every time I updated Ghost, I had to manually update that string in my theme package and re-upload those. While I automated theme deployment with GitHub Actions (you can find the post here), it was a hassle to clone the theme package, fix the string, commit and push it back.

Then I thought it would be great to automatically insert the current Ghost version so that I don't have to update it every time manually. At first, I investigated the Ghost engine side to make the Node.js include the value before responding to the client browser, but I figured that there was a much simpler way after a while.

Extracting the Ghost version on client-side

Every Ghost blog ships a tag like this for SEO and stats, unless you turned it off by hand.

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

That content is exactly what I want. Grab it with JS.

document.getElementsByName("generator")[0].content;

Of course, if you made some other HTML tag with a name generator before this generator, this wouldn't work. But you really shouldn't do that. generator tags should only be used by automatic software and aren't supposed to be edited. So either leave this tag as-is or remove it altogether.

Displaying the extracted Ghost version

The footer's HTML is generated with a handlebars file.

{
  {
    {
      t "{ghostlink} self-hosted on {cloudlink} distributed by {CDN}"
      ghostlink = "<a href = \"https://github.com/TryGhost/Ghost\">Ghost</a>"
      cloudlink = "<a href = \"https://www.digitalocean.com/\">DigitalOcean</a>"
      CDN="<a href=\"https://www.cloudflare.com/\">Cloudflare</a>"
    }
  }
}.

I added an id property to ghostlink.

ghostlink="<a id = \"ghost-version\" href=\"https://github.com/TryGhost/Ghost\">Ghost</a>"

Then input the string to the corresponding tag with JS.

<script>
  document.getElementById("ghost-version").innerText =
  document.getElementsByName("generator")[0].content;
</script>

Paste this to Admin Panel → Code Injections → Site Footer.

You are good to go. See this in action down at the footer. ↓

One less hard-coded magic number!