In my previous post, I described how you can use Dropbox’s share links to add images to your blog. While it’s not a bad idea, it does cary a risk that one day Dropbox decides to block this option and you’ll be left with blog full of posts with broken links to images.
I gave it a bit more thought and recalled how I set up my two step Dropbox workflow, which basically uses a script on my VPS to check for new or updated files in a monitored Dropbox folder and copy those into Jekyll’s
_posts folder. And there it hit me! Why not utilise the same approach and copy images from my Dropbox folder to the
assets directory of my blog?
Putting it together
The following applies to a Jekyll blog installed on a VPS as per my Installing Jekyll publishing posts from monitored Dropbox folder post.
The first thing I needed to do was to create an
images folder within my
jekyllposts directory on my Dropbox account.
Avoiding duplicates in ‘assets’ and ‘_posts’ folders
This, unfortunately meant that this folder and all the images inside it were being synced to the blog’s
_posts directory. It’s a big problem because we can’t link images from this folder on the live website. We need them in the
assets folder instead. And having them in both only wastes your server’s expensive storage space.
In order to avoid the above issue, I had to update the copyfiles.sh script’s second line like so:
rsync -a --exclude=/images /home/username/Dropbox/jekyllfilesfolder/ /home/username/www/_posts --delete
As you can see, the nested
images folder is now excluded from the file sync.
Syncing images from Dropbox to ‘assets’ folder
Creating the script and
incron job is easy and we’ll basically just copy what we already have for syncing the markdown files.
First, let’s copy the copyfiles.sh script into copyimages.sh:
‘cp copyfiles.sh copyimages.sh’
Open the copyimages.sh file
nano copyimages.sh and update the second line so it looks like this:
rsync -a /home/username/Dropbox/jekyllfilesfolder/images/ /home/username/www/assets
Notice that I removed the
--deletedirective. This is to prevent the sync script to remove images from the server if they happen to be removed from the monitored Dropbox folder. I only have a personal Dropbox account with about 6GB of space so for me, deleting the images is important. At the same time, I don’t want the images to be wiped off the server’s disk.
Make the .sh file executable:
chmod u+rwx copyimages.sh
Now, open up the
incron job editor:
Add this on a new line:
/home/username/Dropbox/jekyllfilesfolder/images IN_MODIFY,IN_DELETE,IN_CLOSE_WRITE,IN_MOVE /home/username/copyimages.sh
Save, close, and you’re done. From now on, you can reference images in your posts like so:
![some image description](/assets/imagename.jpg)
Image won’t show up in your markdown editor on a local machine. but will show up once published on your server. The reason is that the image link doesn’t include your blog’s web address.