Supabase-x-Hexo [Build Own Comment System]

Say Goodbye to Disqus! 👋

How to build a free, private, and customizable comment system.

---

Introduction

Build our own “Local” Comment System using Supabase (Backend) and some simple JavaScript (Frontend).

It supports:

• Privacy (You own the data)
• Nested Replies (Like Reddit!)
• Custom Themes (Match your website colors)
• 100% Free (Supabase Free Tier)

Let’s dive in! 🛠️

---

Step 1: Backend Setup (Supabase)

First, we need a place to store the comments.

1. Go to Supabase.com and create a New Project.
2. Go to the SQL Editor (the sidebar icon that looks like terminal code).
3. Copy & Paste the code below to set up your database instantly.

SQL The Magic Of Building

-- 1. (OPTIONAL) Reset: Drop the table so we can rebuild it correctly
-- drop table if exists comments;

-- 2. Create Table: Columns EXACTLY match your JavaScript
create table comments (
  id bigint generated by default as identity primary key,
  slug text not null,      -- Identifies which blog post the comment belongs to
  name text not null,      -- The commenter's name
  email text,              -- Optional email
  message text not null,   -- The actual comment
  parent_id bigint,        -- (IMPORTANT) This allows for nested replies!
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- 3. Security: Enable Row Level Security (RLS)
alter table comments enable row level security;

-- 4. Policies: Allow the Public to Read & Write
-- Allow anyone to SEE comments
create policy "Public can read comments"
on comments for select to anon using (true);

-- Allow anyone to POST comments
create policy "Public can post comments"
on comments for insert to anon with check (true);

---

Once you run this, in Supabase, go to
Project Settings > Data API get your Project URL.
Project Settings > API Keys > Legacy anon, service_role API keys get youranon public key

💡 Pro Tip:
The URL: It is Public. It is essentially the address of your database. It is safe to be seen.
The anon (public) key: It is safe to publish, provided you have set up Row Level Security (RLS).

---

Step 2: Frontend Integration

1. Create the Component

Create a new file at: themes/your-theme/layout/_partial/supabase-comments.ejs

Download the exmaple supabase-comments.ejs: supabase-comments.ejs

2. Configuration

Open themes/your-theme/_config.yml and add this at the bottom:

# Supabase Comments Configuration
supabase:
  enable: true
  url: "[https://your-project-id.supabase.co](https://your-project-id.supabase.co)"
  key: "your-anon-public-key-here"

3. Add to Blog

Now, open your Post Layout .ejs file (usually themes/your-theme/layout/post.ejs or _partial/article.ejs or themes/your-theme/layout/post-detailed.ejs).

Add this code where you want the comments to appear (usually at the bottom):

<% if (theme.supabase.enable) { %>
  <div class="comments-section">
    <h3>Join the Discussion</h3>
    <%- partial('_partial/supabase-comments') %>
  </div>
<% } %>

---

Step 3: Deployment

Test Locally

hexo clean && hexo g && hexo s

Deploy

hexo clean && hexo g && hexo d

# (Optional) Install git deployer if you haven't yet
npm install hexo-deployer-git --save

---

CONGRATULATION!

Now you have a comment system that is fully yours. No ads, no tracking, just pure community interaction.

If you have any questions, feel free to leave a comment below… using the system we just built!