Implementing the jskomment open source commenting system within Pelican (Redux)

This is an updated tutorial for jskomment as quite a few things have changed in the year since my original tutorial was posted.

This tutorial will show you how to quickly and easily setup jskomment and integrate it into Pelican which is an excellent Python-powered static website generator.

While this tutorial is geared towards Pelican it is very easily adaptable for use with other platforms.

What is jskomment?

jskomment is an self-hosted open source commenting system created by Martin Monperrus. It is light-weight, easy to setup, and available under the MIT License.

Additionally, it is completely themable via CSS and offers the unique ability of supporting multiple discussion instances per page if desired.

Getting started

Download jskomment

jskomment is available through Github. You can download a Zip file containing the master branch or you can clone a local copy of the Git repository by issuing the following command:

git clone https://github.com/monperrus/jskomment.git

Optional: Download additional libraries

  1. The reCAPTCHA PHP library allows you to enable anti-spam captchas within jskomment.
  2. The json2.js file from JSON in JavaScript implements JSON encoders/decoders for browsers that do not have native support for it.

Although these two are optional, I personally recommend that you use them.

Initial Setup

Create a folder called jskomment in your website's root directory and then upload all the files (minus htaccess) from within both the "server" and "client" directories to that directory.

Next, you will want to create the folder jskomment-data within the jskomment folder. This folder is where jskomment will store all of your comments.

The jskomment directory should look like this when you are done:

jskomment-data/
jskomment-core.js  
jskomment.css
jskomment.php
modal-ajax-wait.gif

If you downloaded the optional additional libraries listed above they should also be placed in this directory.

Editing files

.htaccess

In order for jskomment to work properly a few entries need to be added to your .htaccess file. This is done by simply appending the following lines into your existing file or creating a new file in your website's root directory if required.

RewriteEngine on

# test service
RewriteRule ^jskomment/t$ jskomment/jskomment.php?action=t [QSA,L]

# getting a list of comments
RewriteRule ^jskomment/s$ jskomment/jskomment.php?action=s [QSA,L]

# getting a list of list of comments
RewriteRule ^jskomment/sx$ jskomment/jskomment.php?action=sx [QSA,L]

# posting a new comment
RewriteRule ^jskomment/p$ jskomment/jskomment.php?action=p [QSA,L]

jskomment-core.js

Open the jskomment-core.js file and make the following changes:

On line 14 change:

JSKOMMENT.url = JSKOMMENT_CONFIG.url || 'http://jskomment.appspot.com';

To:

JSKOMMENT.url = JSKOMMENT_CONFIG.url || 'http://YOURSITEHERE.COM/jskomment';

On line 17 change:

JSKOMMENT.CSS = JSKOMMENT_CONFIG.CSS || "./client/jskomment.css";

To:

JSKOMMENT.CSS = JSKOMMENT_CONFIG.CSS || "http://YOURSITEHERE.COM/jskomment/jskomment.css";

On line 20 change:

JSKOMMENT.waitImg = JSKOMMENT_CONFIG.waitImg || "./client/modal-ajax-wait.gif";

To:

JSKOMMENT.waitImg = JSKOMMENT_CONFIG.waitImg || "http://YOURSITEHERE.COM/jskomment/modal-ajax-wait.gif";

Don't forget to change YOURSITEHERE.COM to your actual website's URL.

Adjusting your Pelican theme file

Edit your Pelican theme's article.html file and add the following directly above {% if DISQUS_SITENAME and SITEURL and article.status != "draft" %}:

{% if SITEURL and article.status != "draft" %}
<div class="comments">
  <h2>Comments?</h2>
  <div class="jskomment" title="{{ SITEURL }}/{{ article.url }}"></div>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="{{ SITEURL }}/jskomment/jskomment-core.js"></script>
  <script> JSKOMMENT.main(); </script>
  <noscript>Please enable JavaScript to view the comments.</noscript>
</div>
{% endif %}

Save the file and then regenerate your website via make html as usual.
Once you have uploaded your files you should have a working installation of jskomment.

All that is left is for you to change how jskomment looks so it suits the design of your website better.
You can do this by editing the CSS in jskomment.css to your liking.

If you use Pelican's default theme "notmyidea" like I do please feel free to use my jskomment.css file.

Anti-Spam Support (Optional)

jskomment has built-in support for reCAPTCHA to help combat comment spam. If you do not have an account you will need to get one as it requires a supplied public and private key to work.

Open jskomment-core.js. You will need to edit line 38 and add your reCAPTCHA public key.

It should look like the following when you are done.

JSKOMMENT.recaptchaPublicKey = JSKOMMENT_CONFIG.recaptchaPublicKey || "Your_reCAPTCHA_Public_Key";

Finally, you will need to create a file called jskomment.local.php and insert the following code:

<?
    @define('RECAPTCHA_PRIVATE_KEY','Your_reCAPTCHA_PRIVATE_Key');
?>

Save and upload the two files and you will be done.

Comments?

recommended sites

social