gatsby-starter-ghost
gatsby-starter-ghost copied to clipboard
Internal links in blog posts broken
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.
Hey @styxlab, were you able to find a way around this issues somehow?
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.