Setting Up Comments.js with Jekyll and GitHub Pages in 5 Minutes Flat

  • By Jason Victor
  • October 2, 2020

Build a beautiful web home for your portfolio and show off your personal brand in five minutes flat.

In this post, we will demonstrate how to quickly setup a highly functional and stylish personal site on GitHub Pages (using Jekyll as a static-site generator). As you might know, the usual complaint about static sites is you have to sacrifice quite a bit in the way of functionality — there is no backend allowed with static sites, so it's hard to build any kind of custom logic. Fortunately, we have a solution for that.

One popular tool to date has been Disqus, which will run a comment section on your blog for the super-low-low price of $89/month (yikes). Well, if you're looking for a Disqus alternative, you're in the right spot. Unlike Disqus, Comments.js is an open-source project you can extend and customize as you see fit. No reason to stop at comments — you can easily integrate whatever social features you may please using the Zetabase client library.

Creating your new Pages repository

Let's get into it

First, we need to create a GitHub Pages site. This is a simple process documented here on GitHub's website. The steps to take are roughly as follows:

  1. Make a new repository, usually yourhandle.github.io.
  2. Go to the repository's Settings > GitHub Pages and select a theme.
  3. Make any desired customizations to the default template and click "Commit".
  4. Go to the _posts directory and replace some of the placeholder text. Push and your site will update within a few minutes.
Go to repository settings

Once you've run through these steps, it will be about ten minutes until the site is publicly available at yourhandle.github.io. Whenever you commit a new post to your repository, it will automatically rebuild your site, and the changes will be reflected within a few minutes.

Choosing a theme for your Pages

Creating a Comments.js account

At this point, you have a well-designed page to host your personal accomplishments, but it's lacking in one key feature of the modern blog: a comments section. This might seem like a small detail, but it is in fact extremely important for creating buzz and momentum around your writing. In a recent survey, 81% of users said the comments section was a critical medium for communicating with the author. Comments also create a sense of community and encourage return visits, increasing engagement on average by 118%.

In Comments.js, we have a free, open-source solution to this problem. We'll finish off our blog by installing Comments.js into our blog pages.

Next, head over to the Comments.js signup page here. Fill out the form as such:

Signing up for a Comments.js account

This will cause your identity file to download automatically (it will have a .json) extension. You will be prompted to enter the verification code from your mobile device, after which you will receive a success screen like so:

Created a Comments.js identity

Click the bold link to continue onto the Comments.js schema creation page (the last step) and enter the password you just created:

Setting up schema for Comments.js

When you click "Submit," Comments.js will be setup in your account. And, a file called comments.html will automagically download.

Adding the Comments.js snippet to your pages

In this next step, we're going to drop the Comments.js code snippet into a file called _includes/comments.html. Simply copy the comments.html file that just downloaded into the _includes folder of your GitHub Pages repo.

This auto-generated piece of template code contains some boilerplate with your user ID injected into it. The benefit of this approach is that now you can easily bring comments into any of your pages — blog posts or otherwise — with the directive {% include comments.html %}.

For our last step, we can open up our post file (the template one will do just fine) and scroll to the bottom. At the very end of the file, we can add our special directive:

{% include comments.html %}

You should end up with something like this:

Adding comments to a blog post

Be sure to commit all the changed files, including comments.html. Now, when you push your repository back up to GitHub, you will see that a comments section has appeared. By default, the code snippet uses Google sign-in with standard layout. You can play around with these settings by changing the options passed to the commentsify function.

And that's it! Your page is ready to begin adding posts and pages to host your ideas, open source projects, and resume. Happy hacking!

To all Zetabase users: please join our Discord! We'd love to build with you.

 

 

Description