Tutorial for Custom Admin URL Configuration for Ghost [NGINX]

This is one way I found to change ghost admin URL to subdomain :

  1. Using Cloudflare
  2. Nginx Server
  3. Config.production.json
  4. Sites enabled configuration

What you want to do is, Go to your Domain name provider, here in my case it’s I am using Cloudflare as my DNS provider. I pointed my A record to the IP address of my root domain and named it admin.mysite.com.

A record → admin.mysite.com → IP address of root

This setting is pretty much the same for everyone.
Your subdomain might be working by this point displaying the default Nginx welcome page if you open admin.mysite.com.
Open your config.production.json, which is located in the root installation folder of Ghost, you have to edit it this way.

{
  "url": "https://mysite.com",
  "admin": {
    "url": "https://admin.mysite.com/"
  },
  "server": {
    "port": 2369,
    "host": "127.0.0.1"
  },

Replace details of HTTPS, and your domain according to your own needs.
Now, if you open mysite.com/ghost, it will redirect you automatically to admin.mysite.com/ghost.
Voila!
This comes with 2 errors which you will observe, 1st error is that admin.mysite.com/ will still show the default Nginx page and 2nd error will be not displaying preview features inside the dashboard.
It will display like this in the following picture.

That’s not very cool, right?
So what you wanna do is go back to Cloudflare, Your domain > Rules > Create a forwarding rule for https://admin.mysite.comhttps://admin.mysite.com/ghost.
This step will fix your routing issue for accessing the main admin link which won’t let anyone see the default Nginx page.

To second and most annoying error is Not displaying of preview window which is called I-frame.
It’s actually a security bug that doesn’t allow embedding of a page within a page if it’s not from the same Origin, that means if your ghost is installed on mysite.com, then it won’t allow this preview feature to be accessible on any other domain like admin.mysite.com which makes sense.

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame> , <iframe> , <embed> or <object> . Sites can use this to avoid click-jacking attacks, by ensuring that their content is not embedded into other sites.
The added security is provided only if the user accessing the document is using a browser that supports X-Frame-Options .

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
This is the article reference, but we want to allow this vulnerability to show preview panels Iframe, for that we need to edit our Nginx configuration.

My Nginx configuration is inside etc > Nginx > sites-enabled > here you will find probably 2 files for your domain name First one is for SSL and the other would be a normal one for HTTP. You have to edit both by adding this line.

SSL →

location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2369;
        add_header X-Frame-Options "ALLOW-FROM URI";
        
    }

Normal conf file needs to be edited as well, which doesn’t have ssl →

  location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2369;
        add_header X-Frame-Options "ALLOW-FROM URI";
        
    }

If you observe your console while loading the preview panel, you may notice an error being thrown that says “The same ORIGIN”, that’s a security measure for preventing embedding a page that isn’t from the same origin. To fix that, we added add_header X-Frame-Options "ALLOW-FROM URI";

Restart NGINX
Hopefully, with 0 errors, you will be seeing your admin URL at admin.mysite.com/ghost with the preview panel fixed.

1 Like