Skip to main content

Finding out Ghost version with JS


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 includes a tag like the following for SEO and statistical reasons unless you manually disabled it.

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

That content thing was what I wanted to use. Extract that value with JS.


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 = \"\">Ghost</a>"
cloudlink = "<a href = \"\">DigitalOcean</a>"
CDN="<a href=\"\">Cloudflare</a>"

I added an id property to ghostlink.

ghostlink="<a id = \"ghost-version\" href=\"\">Ghost</a>"

Then input the string to the corresponding tag with JS.

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

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!