Important: doing this means altering the core portal.min.js file by loading it from your theme – not from the third party unpkg.com CDN.
You need to monitor any and all changes in the original file yourself and if and when needed, modify your local version.
This article will be updated each time there’s an Ghost update and it will always be available for free.
As of 2021-12-20: The file in question, in version 4.32.0, is located under Core → Shared → Config .
The name of the file is defaults.json and close to the bottom of that file, you’ll find this:
"portal": {
"url": "https://unpkg.com/@tryghost/portal@~1.12.0/umd/portal.min.js",
"version": "1.12"
},
The Portal File, portal.min.js
This is the file that controls the entire portal experience on your website. It is also the file that contains all the placeholders such as “Jamie”. This is the file we not only want to modify, but more importantly, load directly from our theme - from our own server.
New in version 4.32.x
In previous versions, the portal script did not include an actual image ( *.png ) but rather an SVG version of the Ghost “bars”. In version 4.32.x we have a direct link to their “powered by” image.
Simply put - we can now change that image into whatever we want by loading it from a CDN or from our own server (. ./themes/your-theme/your-image.png )
Final Result Example
Follow these steps and you’ll be done in less than a five minutes.
#1: Click here to open the portal.min.js file in a new tab (unpkg.com original file). This link is taken from the source of Ghost (from defaults.json ).
#2: Highlight the entire code and copy it.
To highlight: CTRL or CMD + A
To copy: CTRL or CMD + C
#3: Paste the code into a new empty text document.
#4: Edit according to your own needs. When done, save it as portal.min.js on your computer.
TIP: I did a search (CTRL + F) to find all the strings that matched what I wanted to change. I then changed them one by one very carefully by checking that they were not in relation to anything else. I also changed all the placeholders by replacing “jamie”.
#5: Upload your edited and now saved portal.min.js file to your theme folder on your server. I recommend using something simple like FileZilla for this. Connect to your server and go to /var/www/ghost/content/themes/your-theme
#6: Once you have uploaded the portal file to your theme, navigate upwards until you get to Ghost , which is the root of your installation. From here, download the config.environment.json file to your computer.
There are two types of environments , development as in local development and production as in a live website, hosted on a server such as Digital Ocean.
On a local development, the file is called config.development.json and on a live website, the file is called config.production.json .
#7: Edit your local copy of config.environment.json and add the below code to it BEFORE the last } bracket by adding a comma to the line before. Remember to change example.com into your own domain name.
"portal": {
"url": "https://example.com/portal.min.js",
"version": "~1.12"
}
The last } bracket is there because the json file comes to an end after the portal code. In other words, it should look like this:
},
"portal": {
"url": "https://example.com/portal.min.js",
"version": "~1.12"
}
}
#8: Make sure the filename is the same as the one you’re pointing to in the URL. When done, save your local config.development.json or config.production.json file but do not upload it yet.
If the URL do not match the filename you just uploaded to your theme, this won’t work.
You cannot upload a file to your theme and call it portal.js and then point, in your config file, to a portal.min.js file. Makes sense, right?
Important: Rename config.production.json or config.development.json on your server into old__config.production.json or old__config.development.json in case you ever need to revert back. You never know .
You can rename the file by, in FileZilla as an example, right-clicking on the filename and choosing “Rename”.
Once you have done this, upload your own version to your server.
It is now time to restart Ghost. If you do not restart Ghost, these changes will not come into affect.
Restarting Ghost
Open a command prompt or a terminal window (Windows / Mac) and login to your installation using ssh root@ipnumber .
Make sure to replace ipnumber with the IP to your server. Go to Ghost by entering the following: cd /var/www/ghost and from there, type in ghost restart and press enter.
If doing this as a test on your local machine, navigate to the installation folder and open the terminal / command prompt from there. On my Linux computer, I have the installation in a folder located under Documents. The folder name is LG (local ghost). In the terminal, it looks like this: user@user:~/Documents/LG$
The restart process will go through even though you’re running it as root. It will take 3-5 seconds to complete.
Digital Ocean Droplet Console
If you’re hosting on a digital ocean droplet and you do not want to use a command prompt or terminal, follow these steps:
#1: login to your account
#2: go to your droplet
#3: click on the console (the link to the right)
Type in your username (you can use root if you want) and press enter. Enter the root / username password and press enter. Now navigate to your installation by typing in cd /var/www/ghost followed by enter. Once there, type in ghost restart and wait for it to finish (3-5 seconds).
What happens during the restart of Ghost?
If anyone tries to view your site at this exact moment, they will be greeted by the maintenance view.
The “maintenance” is a HTML file with a message. If the visitor refreshes the page, your site will be back. That’s how quick a Ghost restart is over.
That’s it!
You can now enjoy a completely different portal experience!