Ghost Blogging Platform - Finishing Touches

As promised, here's the follow up to my previous post Deploying Ghost Blogging Platform With OpenShift. We're going to be adding support for:

  1. Custom Domain
  2. Comments
  3. Syntax Highlighting
  4. Deploying Theme Changes

Custom domain

To use a custom domain for an OpenShift app we first need to create an alias. Since we have already installed the OpenShift Client Tools, the easiest way to do this is from the command line:

$ rhc alias add ghost blog.davekingsnorth.com

Looking at the command above, ghost is the name of my application and blog.davekingsnorth.com is the domain that we want to use.

We can check that the alias has been created by logging in to OpenShift, navigating to Applications and clicking on the link to your app. We should see something like this:

application alias link

If we click on the link that reads 1 other alias, we will see a list of the aliases.

list of app aliases

Create a new record with your DNS host

The second and final step is going to vary slightly depending on your DNS provider. The domain I want to use is registered through a cheap GoDaddy shared hosting account.

If we login to GoDaddy and navigate to My Account > Manage Domains, then click the settings drop down for the domain we want to use and select Domain Details.

manage domain

Select the DNS ZONE FILE tab and we should see a screen like this:

Click Add Record and select CNAME from the Record Type field. Complete the form, in my case the completed form looked like this:

create cname record

That's it! Wait a few minutes, hit the domain and see if your alias is working. If not, wait some more and check back later.

It's worth noting that GoDaddy doesn't allow us to configure a root-level CNAME record. So, we're able to add a record for a subdomain (blog.davekingsnorth.com) but in order to use davekingsnorth.com, we would have to set up a 301 redirect instead.

This is staright forward with GoDaddy, we just need to select Connect To Website from the same domain settings drop-down we used to bring up our Domain Details. We just have to follow the redirect wizard and make sure we select 301 redirect in the advanced options.

Discqus Comment Support

Register an account with Discqus then select Add Discqus to Site from the settings drop-down.

add discqus to site

Register the site to your Discqus acount adding the domain, etc.

register site to discqus account

Now we have finished registration, we're presented with a Choose your platform page. Select Universal code and it will provide a HTML/Javascript block for you to copy and paste.

Now we need to go to the directory where Ghost is installed and open the post.hbs template within the default Casper theme. the full path is ghost/content/themes/casper/post.hbs.

Finally, we just need to paste the code block just before the closing </footer> tag like this:

            <div id="disqus_thread"></div>
            <script type="text/javascript">
                /* * * CONFIGURATION VARIABLES * * */
                var disqus_shortname = 'hellotestcom';

                /* * * DON'T EDIT BELOW THIS LINE * * */
                (function() {
                    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                })();
            </script>
            <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
        </footer>

    {{/post}}
    </article>

</main>  

Now we should see commenting enabled at the bottom of our posts.

Syntax Highlighting For Code Blocks

We're going to use Google Code Prettify. First we need to choose a theme from the theme gallery, I've gone for the dark Sunburst theme.

The simplest way to use the Prettify javascript library and styles is to include a script tag in your default.hbs theme template.

Open ghost/content/themes/casper/default.hbs and add this script tag just before the closing </body> tag.

    {{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</body>  
</html>  

This will request Prettify with the Default theme. To request the Sunburst theme we just need to add a URL parameter ?skin=sunburst.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>  

Deploying Theme Changes

To deploy our theme changes all we need to do is open the terminal and cd to our root Ghost directory. This directory is our local git repo for our Ghost app, so we'll see any changes when we run:

$ git status

If we commit and push our changes:

$ git commit -am "some epic theme customisation"
$ git push

We'll see that Openshift stops our app, builds & deploys the changes, then restarts the app.

Counting objects: 15, done.  
Delta compression using up to 4 threads.  
Compressing objects: 100% (6/6), done.  
Writing objects: 100% (8/8), 678 bytes | 0 bytes/s, done.  
Total 8 (delta 3), reused 0 (delta 0)  
remote: Stopping NodeJS cartridge  
remote: Thu Mar 12 2015 08:17:18 GMT-0400 (EDT): Stopping application 'ghost' ...  
remote: Thu Mar 12 2015 08:17:20 GMT-0400 (EDT): Stopped Node application 'ghost'  
remote: Saving away previously installed Node modules  
remote: Building git ref 'master', commit dd2713e  
remote: Building NodeJS cartridge  
remote: npm info it worked if it ends with ok  
remote: npm info using npm@1.3.24  
remote: npm info using node@v0.10.25  
remote: npm info preinstall ghost@0.5.0  
remote: npm WARN package.json express-session@1.0.4 No description  
remote: npm WARN package.json showdown@0.3.2-ghost No description  
remote: npm info build /var/lib/openshift/####/app-root/runtime/repo  
remote: npm info linkStuff ghost@0.5.0  
remote: npm info install ghost@0.5.0  
remote: npm info postinstall ghost@0.5.0  
remote: npm info prepublish ghost@0.5.0  
remote: npm info ok  
remote: Preparing build for deployment  
remote: Deployment id is 687b7f32  
remote: Activating deployment  
remote: Creating persistent Ghost data directory  
remote: Creating persistent Ghost images directory  
remote: Symlinking data directory  
remote: Symlinking images directory  
remote: Exporting Node Environment (production)  
remote: Starting NodeJS cartridge  
remote: Thu Mar 12 2015 08:18:12 GMT-0400 (EDT): Starting application 'ghost' ...  
remote: -------------------------  
remote: Git Post-Receive Result: success  
remote: Activation status: success  
remote: Deployment completed with status: success  
To ssh://####@ghost-hanked.rhcloud.com/~/git/ghost.git/  
   908c133..dd2713e  master -> master

That's it, our changes are live. My only concern at the moment is that I don't have a dev sandbox to test my changes before deploying. I have tried following the OpenShift docs, which suggest cloning your repo, installing dependencies and starting the app. Seems straight forward:

$ npm install --production
$ npm start

However, there's a couple of unmet dependencies:

npm WARN package.json express-session@1.0.4 No description  
npm WARN package.json showdown@0.3.2-ghost No description  
npm WARN unmet dependency /Users/davekingsnorth/Desktop/playground/ghost-sandbox/openshift-ghost-quickstart/node_modules/busboy/node_modules/dicer requires readable-stream@'1.1.x' but will load  
npm WARN unmet dependency /Users/davekingsnorth/Desktop/playground/ghost-sandbox/openshift-ghost-quickstart/node_modules/busboy/node_modules/readable-stream,  
npm WARN unmet dependency which is version 1.1.13-1  

I've tried to resolve the issue by specifically installing SQLite3 and readable-stream but... no luck. I've raised an issue bu so far I've had no response.

Once I have a solution, I'll update this post. for now, I'm 'going commando' and deploying blind theme changes straight to my app.