Images in build use Ghost url (instead of a domain or relative url)

[astuanax]

When building the website from a ghost base, all images are copied, hashed, and referenced using the Ghost URL. However, the src is still using the Ghost URL. The result is that images are unavailable when deploying because the src attribute points to a localhost url.

A basic config such as a domain name seems missing from eleventy (https://www.11ty.dev/docs/config/), so I have no idea how to configure the domain name.

How to configure this theme so that images can be displayed on a real website?

Current outcome: <img src="http://localhost:2368/lvnjnaregnrae.jpeg"/> expected outcome: <img src="/lvnjnaregnrae.jpeg"/>

There seems to be some work done for URLs in the config:

// Strip Ghost domain from urls
const stripDomain = url => {
  return url.replace(process.env.GHOST_API_URL, "");
};

However that doesn't apply to images.

Some config info:

Version 1 of this package (eleventy starter ghost) with node 16.17.1

"dependencies": {
    "@11ty/eleventy": "^0.11.0",
    "@11ty/eleventy-plugin-rss": "^1.1.1",
    "@tryghost/content-api": "^1.4.4",
    "@tryghost/helpers": "^1.1.6",
    "clean-css": "^4.2.1",
    "cross-env": "^7.0.0",
    "dotenv": "^8.0.0",
    "eleventy-plugin-lazyimages": "liamfiddler/eleventy-plugin-lazyimages",
    "eleventy-plugin-local-images": "^0.4.0",
    "eslint-utils": "3.0.0",
    "html-minifier": "^4.0.0",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-plugin-ghost": "2.11.0"
  }

[daviddarnes]

This starter assumes your Ghost instance is on a live domain rather than localhost. There are some places where the domain is replaced but replacing image URLs inside long strings of HTML isn’t easy. The eleventy site URL can be set here in the .env file https://github.com/TryGhost/eleventy-starter-ghost/blob/d570730d67278db21229b0c892331e44eea9fe39/.env#L3

If you really want images hosted on the same domain I’d check out the Eleventy ecosystem for plugins and techniques

[harrywesterman]

Hi David, first thank you for this repo, it works! I'm even running my Ghost blog in a couple of NUC machines running my own Kubernetes cluster, just for fun :-)

But I have the same issue as Astuanax, only worse: not only the pictures but all the urls of the posts and pages point back to the real Ghost blog. And I wanted to make that one private :-( Any tips?

[daviddarnes]

Hi @harrywesterman, that’s awesome to hear! Thanks for sharing. Have you considered making the Ghost site unlisted through meta tags and redirects instead of private? That’s what I do. It means that the Ghost site doesn’t turn up for anyone but my builds can still access it the content