Facebook & Twitter share buttons lead to "localhost" in production

Developer help
1

I’m building my blog with Liebling theme through gatsby and hosting in Github pages. When I push into the GitHub repo, the blog gets deployed at aba-blog.xyz. All usual links (post links, tags…etc.) work fine.

But after deployment, the facebook/twitter sharing links on the right-hand side and the facebook/twitter share buttons at the bottom (with disqus) lead to localhost.

For example, in this post, the links lead to

Any idea how to fix this?

Info:

  • What’s your URL? - aba-blog.xyz
  • What version of Ghost are you using? - Ghost: 4.22.3 | Ghost CLI: 1.17.3

And

  • How was Ghost installed and configured? - blog.kithmin.xyz/building-my-personal-blog/index.html
  • What Node version, database, OS & browser are you using? Node v12.22.1, OS: WSL2 (5.10.16.3-microsoft-standard-WSL2) browser: Chrome 95
  • What errors or information do you see in the console? - N/A
  • What steps could someone else take to reproduce the issue you’re having?
2

Your URL config is set to localhost.

Screen Shot 2021-11-22 at 2.42.55 PM
Screen Shot 2021-11-22 at 2.42.55 PM1204×394 74.7 KB

3

Thanks a lot for the reply.

I have a file named config.development.json inside my ghost admin folder, which contains the following:

{
  "url": "http://localhost:2368/",
  "server": {
    "port": 2368,
    "host": "127.0.0.1"
  },
  "database": {
    "client": "sqlite3",
    "connection": {
      "filename": "/mnt/d/blog/ghost_admin/content/data/ghost-local.db"
    }
  },
  "mail": {
    "transport": "Direct"
  },
  "logging": {
    "transports": [
      "file",
      "stdout"
    ]
  },
  "process": "local",
  "paths": {
    "contentPath": "/mnt/d/blog/ghost_admin/content"
  }
}

There is no file called config.production.json. Should I create one? If yes, how exactly would it look? I am using gatsby to generate the static site and I’m hosting on github pages, btw.

4

I’m not sure how it should work with Gatsby but create a config.production.json file with your website URL on it – not localhost – and see how it goes.

5

Alright. I managed to fix it with a workaround. I’ll document it here in case anyone else has this use case.

My workflow:

  • I have ghost 4 and gatsby installed on WSL2 Linux of my local Windows machine.
  • I open the terminal, navigate to my local folder and ghost start to start ghost on localhost:2368
  • I write my posts, change theme…etc. to update my blog.
  • In terminal, I navigate into the gastby directory, do a wget as follows to copy all the static files from localhost into docs.
wget -r -nH -P ./docs -E -T 2 -np -k http://localhost:2368/
  • The gatsby directory is fully git-tracked. I add . , commit and push into my public repo.
  • My public repo is hosted via github pages, and connected to my domain aba-blog.xyz. So after few minutes, the changes are available on my public blog.

Here lies the problem. Since I copy the static files (HTML, CSS) from localhost, I need to run ghost in development mode. If I run in production mode (in my local machine), the url env variable will be set to ‘aba-blog.xyz’, and nothing will be available on localhost to wget.

My workaround:

  • After I do a wget from localhost, I run the following to find all occurrences of the phrase http://localhost:2368 in the gatsby/docs directory among all static files (HTML, CSS) and replace them with https://aba-blog.xyz 
find ./docs -type f -exec sed -i 's/http:\/\/localhost:2368/https:\/\/aba-blog.xyz/g' {} \;
  • I then git add . , commit and push, so that the static files will have the right address.

Note:

My setup isn’t ideal. It is a pain to run wget every time. But this is the cheapest way I found. I’m only paying for my domain name (3$ a year) and nothing else. If any of you know of any easier method, please let me know. I would also love to have the whole ghost setup hosted online, so I can edit my blog from any computer without the fear of data getting corrupted.