So, this blog runs on Ghost CMS. 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 CMS, I had to update that string in my theme package manually and re-upload those. While I automated theme deploy 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

For SEO and statistical reasons, every Ghost blog includes a tag like the following 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 softwares 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.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!