Embed documents in your Ghost blog using ViewerJS and Express
Whether you are using Ghost as a blogging platform or to host your CV and research projects, it could come handy to embed documents such as PDF presentations or spreadsheets in a post. Embedding documents will ensure that your readers don’t have to download anything which will make their experience smoother.
Ghost and files
Ghost doesn’t host documents for you as it does with post images. So we will have to setup our own simple file server. We will achieve this using the famous
Express module for NodeJS.
#####Setting up a minimalistic file server
First your will need to download ViewerJS from their GetIt page. From a Linux-based server, you can use the command line:
wget http://viewerjs.org/releases/ViewerJS-latest.zip unzip ViewerJS-latest.zip -d ViewerJS
Create a folder somewhere in your server and, and copy the ViewerJS folder inside.
mkdir docServer cp -R ~/Downloads/ViewerJS/viewerjs-0.5.8/ViewerJS ./docServer/ cd docServer
Now that we are in
docServer we can install the
Express which will serve the ViewerJS library and the embedded documents.
npm install express
Finally we create a
server.js file in which we put the minimalistic server code. (We picked 2375 but you can use any available port you want - preferably above 1024 so that you don’t need sudo privileges to run it).
var express = require('express'); var app = express(); app.use('/ViewerJS', express.static(__dirname + '/ViewerJS')); app.use('/docs', express.static(__dirname + '/data')); var server = app.listen(2375);
Let’s now launch the server (We assume that you use PM2 to run Ghost on your production server - if not you should seriously think about it-.)
pm2 start server.js --name docServer
Even better on port 80
We assume that you have a Ghost blog proxied through a web server such as Nginx or Apache and that you have a certain level of privileges allowing to modify virtual host configuration files.
Modify your existing Ghost virtualhost to make it look like that:
<VirtualHost *:80> ServerName yourghostblog.com ProxyPreserveHost on ProxyPass /docs/ http://localhost:2375/docs/ ProxyPass /ViewerJS/ http://localhost:2375/ViewerJS/ ProxyPass / http://localhost:2368/ </VirtualHost>
It is quite annoying to upload documents through ssh. To reduce the pain,you can use Rsync (On Mac and Linux) to synchronize you documents between you local environment and the server host the Ghost blog.
##Conclusion Here we go, you can now include embedded documents using ViewerJS instructions, i.e in a Ghost blog post, just use the following HTML
<iframe src = "/ViewerJS/#/docs/path/to/your/doc.pdf" width='100%' height='600' allowfullscreen webkitallowfullscreen></iframe>