Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
astuanax opened this issue Oct 8, 2022 · 3 comments
Open

Comments

@astuanax
Copy link

astuanax commented Oct 8, 2022

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
Copy link
Contributor

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

SITE_URL=http://localhost:8080

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

@harrywesterman
Copy link

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
Copy link
Contributor

daviddarnes commented Jan 2, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants