New blog post: Isso comments
This commit is contained in:
parent
0aaf6e7748
commit
8388a94f2c
240
_posts/2017-11-15-isso-comments.md
Normal file
240
_posts/2017-11-15-isso-comments.md
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
---
|
||||||
|
title: "Isso Comments"
|
||||||
|
layout: post
|
||||||
|
---
|
||||||
|
|
||||||
|
I've been meaning to add a commenting system to this blog for a while, but I
|
||||||
|
couldn't think of a good way to do it. I implemented my own commenting system on
|
||||||
|
my [old Django personal site](https://github.com/thallada/personalsite). While I
|
||||||
|
enjoyed working on it at the time, it was a lot of work, especially to fight the
|
||||||
|
spam. Now that my blog is hosted statically on Github's servers, I have no way
|
||||||
|
to host something dynamic like comments.
|
||||||
|
|
||||||
|
[Disqus](http://disqus.com/) seems to be the popular solution to this problem
|
||||||
|
for other people that host static blogs. The way it works is that you serve a
|
||||||
|
javascript client script on the static site you own. The script will make AJAX
|
||||||
|
requests to a separate server that Disqus owns to retrieve comments and post new
|
||||||
|
ones.
|
||||||
|
|
||||||
|
The price you pay for using Disqus, however, is that [they get to sell all of
|
||||||
|
the data that you and your commenters give
|
||||||
|
them](https://replyable.com/2017/03/disqus-is-your-data-worth-trading-for-convenience/).
|
||||||
|
That reason, plus the fact that I wanted something more DIY, meant this blog has
|
||||||
|
gone without comments for a few years.
|
||||||
|
|
||||||
|
Then I discovered [Isso](https://github.com/posativ/isso). Isso calls itself a
|
||||||
|
lightweight alternative to [Disqus](http://disqus.com/). Isso allows you to
|
||||||
|
install the server code on your own server so that the comment data never goes
|
||||||
|
to a third party. Also, it does not require logging into some social media
|
||||||
|
account just to comment. Today, I installed it on my personal AWS EC2 instance
|
||||||
|
and added the Isso javascript client script on this blog. So far, my experience
|
||||||
|
with it has been great and it performs exactly the way I expect.
|
||||||
|
|
||||||
|
I hit a few snags while installing it, however.
|
||||||
|
|
||||||
|
## Debian Package
|
||||||
|
|
||||||
|
There is a very handy [Debian package](https://github.com/jgraichen/debian-isso)
|
||||||
|
that someone has made for Isso. Since my server runs Ubuntu 16.04, and Ubuntu is
|
||||||
|
based off of Debian, this is a package I can install with my normal ubuntu
|
||||||
|
package manager utilities. There is no PPA to install since the package is in
|
||||||
|
the [main Ubuntu package archive](https://packages.ubuntu.com/xenial/isso). Just
|
||||||
|
run `sudo apt-get install isso`.
|
||||||
|
|
||||||
|
I got a bit confused after that point, though. There seems to be no
|
||||||
|
documentation I could find about how to actually configure and start the server
|
||||||
|
once you have installed it. This is what I did:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo cp /etc/default/isso /etc/isso.d/available/isso.cfg
|
||||||
|
sudo ln -s /etc/isso.d/available/isso.cfg /etc/isso.d/enabled/isso.cfg
|
||||||
|
```
|
||||||
|
|
||||||
|
Then you can edit `/etc/isso.d/available/isso.cfg` with your editor of choice to
|
||||||
|
[configure the Isso server for your
|
||||||
|
needs](https://posativ.org/isso/docs/configuration/server/). Make sure to set
|
||||||
|
the `host` variable to the URL for your static site.
|
||||||
|
|
||||||
|
Once you're done, you can run `sudo service isso restart` to reload the server
|
||||||
|
with the new configuration. `sudo service isso status` should report `Active
|
||||||
|
(running)`.
|
||||||
|
|
||||||
|
Right now, there should be a [gunicorn](http://gunicorn.org/) process running
|
||||||
|
the isso server. You can check that with `top` or running `ps aux | grep
|
||||||
|
gunicorn`, which should return something about "isso".
|
||||||
|
|
||||||
|
## Nginx Reverse Proxy
|
||||||
|
|
||||||
|
In order to map the URL "comments.hallada.net" to this new gunicorn server, I
|
||||||
|
need an [nginx reverse
|
||||||
|
proxy](https://www.nginx.com/resources/admin-guide/reverse-proxy/).
|
||||||
|
|
||||||
|
To do that, I made a new server block: `sudo vim
|
||||||
|
/etc/nginx/sites-available/isso` which I added:
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
listen [::]:80;
|
||||||
|
server_name comments.hallada.net;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Script-Name /isso;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_pass http://localhost:8000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Then I enabled this new server block with:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo ln -s /etc/nginx/sites-available/isso /etc/nginx/sites-enabled/isso
|
||||||
|
sudo systemctl restart nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
## DNS Configuration
|
||||||
|
|
||||||
|
I added a new A record for "comments.hallada.net" that pointed to my server's IP
|
||||||
|
address to the DNS configuration for my domain (which I recently switched to
|
||||||
|
[Amazon Route 53](https://aws.amazon.com/route53/)).
|
||||||
|
|
||||||
|
After the DNS caches had time to refresh, visiting `http://comments.hallada.net`
|
||||||
|
would hit the new `isso` nginx server block, which would then pass the request
|
||||||
|
on to the gunicorn process.
|
||||||
|
|
||||||
|
You can verify if nginx is getting the request by looking at
|
||||||
|
`/var/log/nginx/access.log`.
|
||||||
|
|
||||||
|
## Adding the Isso Script to my Jekyll Site
|
||||||
|
|
||||||
|
I created a file called `_includes/comments.html` with the contents that [the
|
||||||
|
Isso documentation](https://posativ.org/isso/docs/quickstart/#integration)
|
||||||
|
provides. Then, in my post template, I simply included that on the page where I
|
||||||
|
wanted the comments to go:
|
||||||
|
|
||||||
|
```html
|
||||||
|
{% include comments.html %}
|
||||||
|
```
|
||||||
|
|
||||||
|
Another thing that was not immediately obvious to me is that the value of the
|
||||||
|
`name` variable in the Isso server configuration is the URL path that you will
|
||||||
|
need to point the Isso JavaScript client to. For example, I chose `name = blog`,
|
||||||
|
so the `data-isso` attribute on the script tag needed to be
|
||||||
|
`http://comments.hallada.net/blog/`.
|
||||||
|
|
||||||
|
## The Uncaught ReferenceError
|
||||||
|
|
||||||
|
There's [an issue](https://github.com/posativ/isso/issues/318) with that Debian
|
||||||
|
package that causes a JavaScript error in the console when trying to load the
|
||||||
|
Isso script in the browser. I solved this by uploading the latest version of the
|
||||||
|
Isso `embeded.min.js` file to my server, which I put at
|
||||||
|
`/var/www/html/isso/embeded.min.js`. Then I modified the nginx server block to
|
||||||
|
serve that file when the path matches `/isso`:
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
listen [::]:80;
|
||||||
|
server_name comments.hallada.net;
|
||||||
|
root /var/www/html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Script-Name /isso;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_pass http://localhost:8000;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /isso {
|
||||||
|
try_files $uri $uri/ $uri.php?$args =404;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Now requesting `http://comments.hallada.net/isso/embeded.min.js` would return
|
||||||
|
the newer script without the bug.
|
||||||
|
|
||||||
|
## Sending Emails Through Amazon Simple Email Service
|
||||||
|
|
||||||
|
I already set up [Amazon's SES](https://aws.amazon.com/ses/) in my [last
|
||||||
|
blog
|
||||||
|
post](http://www.hallada.net/2017/08/30/making-mailing-list-jekyll-blog-using-sendy.html).
|
||||||
|
To get Isso to use SES to send notifications about new comments, create a new
|
||||||
|
credential in the SES UI, and then set the `user` and `password` fields in the
|
||||||
|
`isso.cfg` to what get's generated for the IAM user. The SES page also has
|
||||||
|
information for what `host` and `port` to use. I used `security = starttls` and
|
||||||
|
`port = 587`. Make sure whatever email you use for `from` is a verified email in
|
||||||
|
SES. Also, don't forget to add your email as the `to` value.
|
||||||
|
|
||||||
|
## Enabling HTTPS with Let's Encrypt
|
||||||
|
|
||||||
|
[Let's Encrypt](https://letsencrypt.org/) allows you to get SSL certificates for
|
||||||
|
free! I had already installed the certbot/letsencrypt client before, so I just
|
||||||
|
ran this to generate a new certificate for my new sub-domain
|
||||||
|
"comments.hallada.net":
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo letsencrypt certonly --nginx -d comments.hallada.net
|
||||||
|
```
|
||||||
|
|
||||||
|
Once that successfully completed, I added a new nginx server block for the https
|
||||||
|
version at `/etc/nginx/sites-available/isso-https`:
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
server {
|
||||||
|
listen 443 ssl http2;
|
||||||
|
listen [::]:443 ssl http2;
|
||||||
|
server_name comments.hallada.net;
|
||||||
|
root /var/www/html;
|
||||||
|
|
||||||
|
ssl_certificate /etc/letsencrypt/live/comments.hallada.net/fullchain.pem;
|
||||||
|
ssl_certificate_key /etc/letsencrypt/live/comments.hallada.net/privkey.pem;
|
||||||
|
ssl_trusted_certificate /etc/letsencrypt/live/comments.hallada.net/fullchain.pem;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Script-Name /isso;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_pass http://localhost:8000;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /isso {
|
||||||
|
try_files $uri $uri/ $uri.php?$args =404;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
And, I changed the old http server block so that it just permanently redirects
|
||||||
|
to the https version:
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
listen [::]:80;
|
||||||
|
server_name comments.hallada.net;
|
||||||
|
root /var/www/html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
return 301 https://comments.hallada.net$request_uri;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Then I enabled the https version:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo ln -s /etc/nginx/sites-available/isso-https /etc/nginx/sites-enabled/isso-https
|
||||||
|
sudo systemctl restart nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
I checked that I didn't get any errors visiting `https://comments.hallada.net/`,
|
||||||
|
and then changed my Jekyll include snippet so that it pointed at the `https`
|
||||||
|
site instead of `http`.
|
||||||
|
|
||||||
|
Now you can securely leave a comment if you want to yell at me for writing the
|
||||||
|
wrong thing!
|
||||||
Loading…
Reference in New Issue
Block a user