Firebase Jekyll Comments

Jekyll is the coolest static-everything blogging platform out there, but if you came from a more dynamic blogging platform, you probably miss comments. I know I do.

Unsocial Blogging

The Realtime Solution

Anyway, here's a handy dandy include for Jekyll that adds real time comments to your blog without any backend code. The backend part is handled by Firebase

Interested? Check out a live demo.

Setup

1. Create a new Firebase for your blog comments.

2. Copy the files from _includes into the _includes folder in the root of your blog. Create the directory if it does not already exist.

3. Edit your _config.yaml and specify fbc-comments-firebase, the URL of the Firebase to host your comments, e.g. https://jekyll-comments-demo.firebaseio.com/

4. _includes/firebase-comment-form-template.html represents your comments form. Edit it to match your blog.

   • Use the same markup as the rest of your blog. Jekyll interprets it like any other include at build time.
   • Preserve the fbc-* element ids and data-auth-provider attributes. They are required by the plugin to function.

5. _includes/firebase-comment-template.html represents an individual comment. Edit it to match your blog.

   • Use the same markup as the rest of your blog. Jekyll interprets it like any other include at build time.
   • It is further processed with a JavaScript template engine at the time of rendering. Use these template tags:
     • <%=link %> - Commenter's profile URL
     • <%=picture %> - The beautiful mug shot of your commenter
     • <%=displayName %> - Their name
     • <%=comment %> - What they said about your stuff

6. Enable SimpleLogin and add API keys and secrets to forge for Facebook, Twitter, GitHub, and Google.

7. Paste the contents of firebase-security-rules.json into the security rules pane for your Firebase, or edit firebase.json to deploy them to Firebase Hosting.

8. Add the include to the appropriate layout files.

    {% include firebase-comments.ext %}
   

9. Deploy your blog, share your posts with your friends, and watch the comments arrive in real time.