Post preview is blank

Developer help Installation
1
  • What version of Ghost are you using? - V4.3.3 (latest).
  • What configuration? - All defaults.
  • Theme? - The default theme, Casper.
  • Any theme edits? - No.
  • What browser? - Tried on Edge, Chrome and Safari.
  • What errors or information do you see in the console? - None
  • How did you install Ghost? - I followed this guide, I don’t have multiple ghost installations on my VPS though, so I ignored everything in the guide after you get the first ghost blog installed. I have one Ghost installation, and a discourse server. mysite.com hosts the ghost blog and forum.mysite.com hosts the discourse forum (naturally, mysite is a fake url).

Hello there.

When I go to preview a post in Ghost, I get a blank preview window. This applies to the desktop + mobile preview options. The email preview option works. This applies to the default example posts too, it’s not just my test posts.

If I click the “open in new tab” button, the preview displays as expected.

This is what the preview looks like:

Here is what it looks like
Here is what it looks like1329×685 42.6 KB

Everything else on the blog seems to be working just fine, like posting articles, along with all the sample posts, which are displaying correctly on the main site.

Has anyone encountered this before? Any advice on how I can proceed? If I’ve left out any pertinent information, I’d be happy to divulge.

Thank you.

2

Can you share any errors you’re seeing in the browser’s dev tool console? I expect you’re hitting cross-domain or x-frame-options security issues.

3

Hey @Kevin, sorry for the delay in responding.

I do see one error in the dev console:

Mixed Content: The page at ‘https://mysite.com/ghost/#/editor/post/60e3a2fbb79e970392c767be’ was loaded over HTTPS, but requested an insecure frame ‘http://gameseal.reviews/p/0482a724-4e89-4dd5-8baf-7794e7d6d384/’. This request has been blocked; the content must be served over HTTPS.

‘Test’ Is the blog post title, in this case.
Thanks for your help thus far.

4

This is the issue. For previews to work your site needs to be set up with SSL and your site’s configured url to be set to the https URL.

2 Likes
5

Thanks Kevin. I did setup letsencrypt and the site does work over https. I guess I missed something though.

I’ll look into it. At least I know what the problem is now. I’m new to server admin stuff, and appreciate the knowledge you’ve shared here.

Thank you again!

Edit: Turns out my config.production.json had the url set to http instead of https. Fixed that, restarted ghost and the preview works now.

Great support guys, cheers!

6

I know you haven’t had this issue in a while, but I’m having the same issue. I setup Ghost using the default Docker template in Portainer, and just like you everything worked and it’s just the preview. I’m using Nginx proxy and using LetsEncrypt too. But I’m not sure where to go to change the http to https. Is that in the docker container, or the site’s .json file? I only have a few files and a single .json file but it’s not a config.production.json file. Not sure where I’m supposed to look to edit it. Any help would be greatly appreciated!

7

This is an old topic but one which I just ran into setting up a fresh install, following the instructions no less, on Linode on Ubuntu.

No need to edit a file at this point. Go to where you set the Ghost folder (/var/www/ghost in my case) as the ghost user you set up and run ghost config url set https://<your domain>. That fixed it for me anyhow.

Its curious to me that this issue happens at all since all of the setup is automatic. Seems like the scripts aren’t reconfiguring the site with https once the LetsEncrypt stage is done.

8

2024 and ran into the same issue where my page and post previews were blank, and it’s because my docker-compose had http rather than https! Thank you.