Changing Ghost theme and add Disqus comment

Last post, we have set up the Ghost blogging site on Windows Azure. In this post, we will continue customizing our Ghost site by changing the theme as well as add Disqus comment.

By changing the theme, you can either fork the default casper theme and modify it or you can look for a new theme at the Ghost’s market place.

008-Marketplace

Basically, what we have to do is to download the theme and copy the whole folder to content/themes folder.

To copy files to our Windows Azure web site, the easiest way is to set up your deployment credentials if you haven’t done it already and use FTP client (like SmartFTP or Filezilla) to copy the theme folder.

Once you copy the theme folder (you might need to refresh the setting page), and you should see those new themes.

012-Select-N-Coded-Theme

Here is the N-Coded theme.

013-After-Theme-Change

 

Ghost doesn’t come with commenting capability. However, we could easily add Disqus comment to our blogging site. With Disqus, you can moderate commenting on any of your sites.

First, let’s go to disqus site and add your blogging site information.

014-Add-Disqus

 

For Ghost, select the Universal Code.

015-Disqus-Universal

Then, Disqus should give you the HTML and JavaScript that you can copy and paste to your web site.

image

 

For Ghost, what we need to do is to copy the code block to the post.hbs in the theme folder. In this example, we will copy the code block into between {{/post}} and </article> in the file content/themes/N-Coded/post.hbs. If you change the theme later, don’t forget to copy the code block to file in the new theme.

017-Add-Disqus-N-Coded

 

In the above screenshot, I use the Visual Studio Online or “Monaco” which can be integrated with your Windows Azure web site. However, you can still modify the theme file on your machine and upload it via FTP.

Now you should see the Disqus comment section under your post!

018-Post-with-Disqus

I think I like Ghost more and more. Hopefully, I have more cool stuff about it to share in the future posts.

Happy New Year!

About these ads

3 thoughts on “Changing Ghost theme and add Disqus comment

  1. Pingback: Add Code Syntax Highlighting to your Ghost blogging site | Cyan By Fuchsia

  2. Pingback: Set up Ghost blogging site on Windows Azure Websites | Cyan By Fuchsia

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s