Hey!
I’m using a headless Ghost with a Gatsby site. In Ghost’s admin portal, it shows the default casper theme. Is there a way to have that point to my Gatsby app that’s on another port? Am I supposed to build Gatsby first?
The admin interface will show the URL configured in your config file (it’s just an iframe). I think you might find this thread useful:
Got it! Thanks you!
1 Like
Hey @jackhedaya & @vikaspotluri123 
I’ve just updated our docs to include a method of setting up redirects if you’re using Ghost as a headless CMS:
https://ghost.org/docs/api/v3/gatsby/use-cases-pitfalls/#redirecting-to-external-urls
Example:
[
{
"from": "^\/(?!content/images)(.*)",
"to": "https://staticsite.com/$1",
"permanent": true
}
]
You may also need to include the following in your static site headers:
Access-Control-Allow-Origin: *
Credit to @fedetibaldo for contributing to Ghost and extending the redirects functionality 
1 Like
Have my Gatsby site on port 8000 and Ghost on 2368:
Is there a way to have uploaded images hosted in the CMS? The featured_image link seems to be pointing to localhost:8000 for some reason when the images are being stored on 2368. I’ve tried using the redirects file above and without to no avail.
Thank you for all the help!
Did a little digging around and found this Gatsby plugin which should copy your Ghost images to the Gatsby build:
https://www.gatsbyjs.org/packages/gatsby-plugin-ghost-images/
However it might be worth looking around for a more standard method 
That’s an awesome plugin (which I’m definitely going to use) but was wondering how to get the image to be uploaded to the cms. The url seems to point to base_url instead of server. I’d like images to be saved in their original folder which was localhost:2368/content/<date>/image.png
I think an apology for my ignorance here is due.
Thanks for all the help!
1 Like
No rush but any updates on this?
Sorry, I’m not entirely sure what you’re asking here? Can to elaborate a little? Thanks 
Just trying to specify where images are saved –– in the cms as opposed to on my gatsby site. I currently have my config setup like so:
cms/development.config.json
{
"url": "http://localhost:2368/",
"server": {
"port": 2368,
"host": "127.0.0.1"
},
"database": {
"client": "sqlite3",
"connection": {
"filename": "<...>/cms/content/data/ghost-local.db"
}
},
"mail": {
"transport": "Direct"
},
"logging": {
"transports": [
"file",
"stdout"
]
},
"process": "local",
"paths": {
"contentPath": "<...>/cms/content"
}
}
and my Gatsby site being deployed to localhost:8000. However, when I go to my Ghost admin page at localhost:2368/ghost and add an image to a Post the image is not uploaded to cms/content/images and the uri is set to localhost:8000/images/…
I am looking to have the images uploaded as it would in a non-headless Ghost.
Thanks!!
By default Ghost stores images in content/images, and automatically creates the alternate sizes. When using Ghost as a headless CMS the SSG, Gatsby in this case, can either link directly to those images or extract them into the static deployment. In both cases there’s no need to reconfigure image management in Ghost . In your case it looks like Gatsby needs to be configured instead, so images are being requested from your Ghost installation rather than the Gatsby images directory.
Does that make sense? Let me know if this needs further explanation 
Hi @jackhedaya. I’m sorry, I’m late to the party. Anyway, your setup sounds a lot like mine. My Ghost instance in not available to the public, so I had to find a way to add the inline post images to my Gatsby website in some other way.
By default, the content of the post is exposed as plain html. Hence, extracting the images is quite cumbersome, but doable. You can head over to the plugin I wrote on my website repo and take a look yourself. The relevant part is in the index.js. You can safely remove the portion from line 33 to 41.
To use it, copy the plugin into your project to the plugins/@fedetibaldo/gatsby-rehype-ghost-images folder, and add the following snippet to your gatsby-config plugins array. Once done, you’re ready to go!
{
resolve: `gatsby-transformer-rehype`,
options: {
// Condition for selecting an existing GrapghQL node (optional)
// If not set, the transformer operates on file nodes.
filter: node => node.internal.type === `GhostPost` || node.internal.type === `GhostPage`,
// Plugins configs (optional but most likely you need one)
plugins: [
{
resolve: `@fedetibaldo/gatsby-rehype-ghost-images`,
options: {},
},
],
},
},
@fedetibaldo Ended up migrating to Nextjs for better fine tune control on the db and api calls. Think I’m just going to create SymLink between my Next content folder and my Ghost folder considering they’re going to be hosted on the same server. Thanks!
Right those images are there but the Ghost API tells me the that image url is on my Gatsby site when instead it should point at Ghost headless’s port.
Ghost API <2368>
Nextjs Site <3000>
When Nextjs calls a post from Ghost API, the response tells me the image is at http://localhost:3000/content/… instead of http://localhost:2368/content/…
How can I configure it otherwise?
FYI to other’s having a similar issue
I’ve had great success using a symlink from my public content directory:
ln -s ../../cms/content content
1 Like
This leads me to believe that Next.js is rewriting your image URLs. If you look at our Gatsby demo you’ll see the images are hosted on the original Ghost install and not the Gatsby site. If you do want them on your static site you’ll need to add a step in the build process to copy images over and rewrite the URLs