Set up schnack! with Hexo

This post is a note to official tutorial, please read them altogeher.
Hope you will able to avoid some issues that I encounter during set up schnack!.

Before the installation

  • If you are using https, make sure also issue the ssl certificate to the subdomain that schnack! service is going to use.
    • This will avoid CORB and similar resource blocking issues.
    • Set up proxy pass (specific subdomain to a port) for schnack! service, this would also reduce some confuse for later set up.
  • If you are behind a firewall make sure open the port 3000(default) for schnack!.

Install and Configuration

Minimal configuration requires at least one notfication and login method.

1
2
"schnack_host": "http://comment-service.example.com"
"page_url": "http://anysub.example.com/anypath/%SLUG%" or "https://blog.example.com/%SLUG%""

schnack_host => point to where the schnack! service is, can be your domain example.com with specific port or a comment.example.com, becareful with the protocol use, also make sure which http is in-use.
%slug% => bascially point to slug of the post path produce by site generator.

Customize Layout

Using the default Hexo Landscape theme as an exmaple,

Modify layout

The idea is to populate schnack! for each blog post page.
It seems reasonable to add comment section right after </article>,
to do so, edit themes/landscape/layout/_partial/article.ejs and add these:

1
2
3
4
5
6
7
8
9
10
<% if (!index && post.layout == 'post'){ %>
<section id="comments">
<h3>Comments</h3><br />
<div class="schnack-it-here"></div>
<script src="https://comment-service.example.com/embed.js"
data-schnack-slug="<%- url_for(post.path).replace(/\//g, ''); %>"
data-schnack-target=".schnack-it-here" >
</script>
</section>
<% } %>

data-schnack-slug => schnack! currently doesn’t seem to take backslash as url, so I decided to simply strip them off.

Add stylesheets

To make sure comment threading work as design, simply borrow the styling files from schnack! project:
$ cp schnack/test/*.css -iv hexo/source/

You might want to use the specialized font type for icons as well:
$ cp schnack/test/fonts -iav hexo/source/

Then include files into Hexo layout, add following lines somewhere between <head> tags in themes/landscape/layout/_partial/head.ejs

1
2
<%- css('schnack-icons.css') %>
<%- css('schnack.css') %>

Until now you are good to go, since schnack! uses first user as moderator, so make sure login once before expose to public.

Additional configurations

To make sure schnack! service restarts when host system is rebooted.
First, get into schanck working directory.

Install pm2 package, $ sudo npm install -g pm2
To start the schnack! service $ pm2 start npm -- start // If you use nvm, remember to use full path of npm
Then, install startup script $ sudo pm2 startup systemd 0 //Please follow the output instruction (on mainstream Linux distros you are most likely running on systemd, otherwise check the pm2 docs.
Lastly, $ pm2 save

Thoughts, feedback, questions, please leave your comment below.