I wrote a post earlier this summer on how to use Cloudinary with your Ghost blog as a means of hosting your images so you don't fill up your SD card on your Raspberry Pi.

Well, with the rapid pace at which Ghost is climbing their version ladder (not a complaint, just an observation) it would seem that the former method of using Cloudinary to do my bidding fell off somewhere in between July and October. It didn't "just stop working," I actually left Ghost for Wordpress for a bit and then came back. But in coming back, things had changed.

Without Cloudinary to back me up I had to find a new avenue to ensure I didn't fill up my little SD card. The Ghost team gives a great list of different options for Storage Adapters (which still have the Cloudinary options on there that I can't get to work any longer). However, I did find one that I could use, AND I have full control over it: WebDAV Storage.

My control comes via my Nextcloud server and attached hard drives holding all my own data, my own Dropbox if you will. The nice thing is, Nextcloud comes enabled as a WebDAV server out of the box.

Honestly, it's a pretty easy process to get from hosting your images in your /content/images folder on the SD card to a WedDAV server (Nextcloud or otherwise). Let's do this.

We're first going to visit the needed GitHub page of Bart Teeuwisse, specifically his ghost-webdav-storage-adapter page to read about what we need to do. Don't worry, I'm going to copy it here so we don't have to go back and forth.

First, let it be known that I'm running Ubuntu Server 18.04 LTS (yes, on my RPi, see this post). Much of what I'm doing I'm doing from an Ubuntu standpoint as opposed to Raspbian. But the commands should be the same.

As is always the case we'll want to make sure our system is up to date:

sudo apt update && sudo apt upgrade -y

After that's done we need to make sure we have npm installed, let's check:

npm --version

As of this writing the most update package is at version 6.4.1. If you get an error, you probably don't have it installed. So, for those with the error:

sudo apt install npm

Side note: If you're having issues installing npm via apt or apt-get you can always use Yarn. It's actually what I used, and it works great.

Ok, now that we've got npm on there, let's move on with:

cd /var/www/ghost to get us into our Ghost director. Then:

mkdir -p ./content/adapters/storage/webdav  and

cp -v ./node_modules/ghost-webdav-storage-adapter/dist/*.js ./content/adapters/storage/webdav

Now that we've installed what's needed we just need to add some code to the config.production.json file. This will "normally" be located in the /var/www/ghost folder, depending on your install.

Once this is open via sudo nano config.production.json you should see something like this

Screen Shot of my .json file.

We're going to add some code at the bottom of this file. The code we're adding is:

"storage": {
    "active": "webdav",
    "webdav": {
      "url": "URL_TO_YOUR_WEBDAV_SERVER",
      "username": "YOUR_WEBDAV_USERNAME",
      "password": "YOUR_WEBDAV_PASSWORD",
      "pathPrefix": "YOUR_PATH_PREFIX",
      "storagePathPrefix": "YOUR_STORAGE_PATH_PREFIX"
    }
  }

We're going to take this and merge it with our own .json file. Again, I use nano to do my editing, so use

sudo nano /var/www/ghost/config.production.json Taking what you see above and the standard .json file you'll merge them to look similar to what you see below.

{
  "url": "https://ryanerickson.com",
  "server": {
    "port": 2368,
    "host": "127.0.0.1"
  },
  "database": {
    "client": "mysql",
    "connection": {
      "host": "localhost",
      "user": "ghost-866",
      "password": "",
      "database": "ghost_prod"
    }
  },
  "mail": {
    "transport": "Direct"
  },
  "logging": {
    "transports": [
      "file",
      "stdout"
    ]
  },
  "process": "systemd",
  "paths": {
    "contentPath": "/var/www/ghost/content"
  },
  "bootstrap-socket": {
    "port": 8000,
    "host": "localhost"
  },
  "storage": {
    "active": "webdav",
    "webdav": {
      "url": "https://your.web.site",
      "username": "username",
      "password": "password",
      "pathPrefix": "/ghost",
      "storagePathPrefix": "/content/images"
    }
  }
}

So, this doesn't look so bad, right? Well, be careful here, there's a few catches if you've never played with a .json file. A single missed comma, space, quotation mark will leave your site inoperable. Here I've highlighted the common issues:

  1. The red circle above, that comma, will end a working site. Make sure you don't forget that comma!
  2. For each open (left facing) bracket, you need a closing (right facing) bracket. This hold true for the entire .json file, you need a one for one open/close bracket ratio.

In my example above you place your own WebDAV server address (Nexcloud address) in the url call. The same goes for your username and password. As far as your pathPrefix goes, this will depend on what you want. Mine is /ghost, to make is simple. The storagePathPrefix is where you normal images are saved. It's safe to say that it too will be /content/images.

Screenshot of my Nexcloud instance under my /ghost folder for this site.

Now that you have your .json file done we'll need to save that file (Control + X).

Once saved you need to restart your Ghost site to get the change to take place:

ghost restart

If all works out you'll see something like;

My Ghost is working!

As always, if you need help, let me know.