gatsby-starter-ghost icon indicating copy to clipboard operation
gatsby-starter-ghost copied to clipboard

Internal links in blog posts broken

Open styxlab opened this issue 4 years ago • 2 comments

Description

When adding url links in Ghost CMS, you are forced to enter them as absolute paths, e.g. https://ghost-cms.com/welcome/ to link to the welcome post. These links don't work anymore in the gatsby site, as they should be served from the siteUrl, e.g. https://gatsby-ghost.com/welcome/.

You can see the issue also in the demo. Goto the bottom of the demo welcome page and click on "The ghost editor". As a consequence of this issue, the latter is linked to https://gatsby.ghost.io/the-editor/ instead of https://gatsby.ghost.org/the-editor/.

Suggested solution

During static site generation all links in posts starting with https://ghost-cms.com/slug/should be replaced by relative paths such as /slug/

Expected behaviour

Internal links to pages/posts athored by Ghost CMS should also work with Gatsby after static site generation.

styxlab avatar Feb 25 '20 10:02 styxlab

Hey @styxlab, were you able to find a way around this issues somehow?

matyashlavacek avatar Apr 03 '20 12:04 matyashlavacek

For now I did a quick dirty hack to posts.js in /src/temaplates/, where I replaced both the dev and prod hosts with an empty string making the links relative:

import ghost from '../../.ghost.json'
...
const Post = ({ data, location }) => {
    const post = data.ghostPost
    const postHtml = post.html.replace(ghost.development.apiUrl, '').replace(ghost.production.apiUrl, '')
...
                            <section
                                className="content-body load-external-scripts"
                                dangerouslySetInnerHTML={{ __html: postHtml }}
                            />

Though there certainly is a better way to achieve this.

matyashlavacek avatar Apr 03 '20 18:04 matyashlavacek