gatsby-rehype-ghost-images

Rewrites absolute links to relative links coming from a Ghost CMS.

Install

yarn add gatsby-transformer-rehype gatsby-rehype-ghost-images

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-rehype`,
    options: {
      plugins: [
        {
          resolve: `gatsby-rehype-ghost-images`,
        },
      ],
    },
  },
]

Details

Due to current limitations of the Ghost Content API, links within posts and pages are always returned as absolute URLs rather than relative ones. For example, if you have a link in one of your pages that refers to an internal post (e.g. /welcome-post/) the Ghost Content API will always return an absolute URL such as https://your-ghost-cms.org/welcome-post/.

Those links won't work on your Gatsby site as you host them on a different siteUrl. gatsby-rehype-ghost-images is part of the rehype collection and rewrites https://your-ghost-cms.org/welcome-post/ into /welcome-post/ so internal links work as expected.

Limitations

Currently the detection mechanism for the CMS site URL is limited to content coming from a headless Ghost CMS, but it should be easy to add some options, so this plugin becomes useful in other contexts.

Contributions

PRs are welcome! Consider contributing to this project if you are missing feature that is also useful for others. Explore this guide, to get some more ideas.

Copyright & License

Copyright (c) 2020 styxlab - Released under the MIT license.