Connecting Hashnode to Slack: A Step-by-Step Webhook Integration Guide

Automating workflows is key to staying efficient. A great way to keep your team updated is to automatically announce new blog posts in a dedicated Slack channel. While both Hashnode and Slack support webhooks, they don't speak the same language out of the box.

This guide will walk you through the process of connecting Hashnode to Slack using a lightweight middleware API. We'll build this translator using the Hono framework and deploy it for free on Vercel.

The Core Problem: Incompatible JSON Formats

The challenge is simple:

• Hashnode's webhook sends a rich JSON object when a new post is published, containing details about the post, the blog, and the author.

• Slack's Incoming Webhook expects a very specific, simple JSON format. At its most basic, it needs a text property, like this: {"text": "Hello, world"}.

Because Hashnode's payload doesn't have this top-level text property, a direct connection will fail. We need to create a small application to sit in the middle, catch the data from Hashnode, reformat it, and then forward it to Slack.

---

Prerequisites

Before you start, make sure you have the following:

• A Hashnode account and a blog.

• A Slack workspace where you have permission to add applications.

• A Vercel account for deployment (a free-tier account is sufficient).

• Node.js and npm (or your preferred package manager) installed on your machine.

• (Optional but Recommended) ngrok to inspect the initial webhook data.

---

Step 1: Get Your Slack Incoming Webhook URL

First, we need to tell Slack to listen for incoming messages.

1. Go to the Slack App Directory and search for "Incoming Webhooks."

2. Click "Add to Slack" and choose the channel where you want the notifications to be posted.

3. Click "Add Incoming Webhooks Integration."

4. Slack will generate a unique Webhook URL. It will look something like this: https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX.

5. Copy this URL and keep it safe. Treat it like a password, as anyone with this URL can post messages to your channel.

---

Step 2: (Optional) Inspect the Hashnode Payload with ngrok

To understand what data we're working with, we can use ngrok to temporarily expose a local server to the internet and catch a sample webhook from Hashnode.

1. Create a simple local server. Create a file named inspector.js and add the following code:

    import http from 'http';
   
    const server = http.createServer((req, res) => {
      let body = '';
      req.on('data', chunk => {
        body += chunk.toString();
      });
      req.on('end', () => {
        console.log("--- Webhook Received ---");
        console.log(JSON.parse(body));
        console.log("------------------------");
        res.end('OK');
      });
    });
   
    server.listen(3000, () => console.log('Server listening on port 3000'));
   

2. Run the server:

    node inspector.js
   

3. Expose it with ngrok. In a new terminal window, run:

    ngrok http 3000
   

   ngrok will give you a public "Forwarding" URL (e.g., https://random-string.ngrok.io). Copy the https version.

4. Configure Hashnode Webhook.

   • Go to your Hashnode blog's Dashboard -> Integrations.

   • In the "Webhooks" section, paste your ngrok URL.

   • Click "Add webhook."

   • Publish a new post (or update an existing one) on Hashnode to trigger the webhook.

5. Check your terminal. You will see the full JSON object sent by Hashnode. You'll notice it has a structure like {"post": {"title": "...", "url": "...", "author": {"name": "..."}}}. This confirms we need to extract data from this structure.

---

Step 3: Build the Translator API with Hono

Now we'll build the actual middleware. Hono is an excellent choice because it's fast, lightweight, and easy to deploy on serverless platforms like Vercel.

1. Set up your project:

    mkdir hashnode-to-slack
    cd hashnode-to-slack
    npm init -y
    npm install hono
   

2. Create the API file. Create a new folder api and inside it, a file named index.js. Vercel automatically recognizes this structure.

    hashnode-to-slack/
    └── api/
        └── index.js
   

3. Write the code. Open api/index.js and add the following:

    import { Hono } from 'hono';
   
    const app = new Hono();
   
    app.post('/', async (c) => {
      // Get the Slack Webhook URL from environment variables for security
      const SLACK_WEBHOOK_URL = c.env.SLACK_WEBHOOK_URL;
   
      if (!SLACK_WEBHOOK_URL) {
        console.error("Slack Webhook URL is not configured.");
        return c.json({ error: 'Server configuration error' }, 500);
      }
   
      try {
        // 1. Receive and parse the webhook data from Hashnode
        const hashnodeData = await c.req.json();
        const post = hashnodeData.post;
   
        // Ensure it's a new post publication event (optional but good practice)
        if (hashnodeData.type !== 'post_published') {
            return c.text('Event ignored. Not a new post.');
        }
   
        // 2. Extract the necessary information
        const postTitle = post.title;
        const postUrl = post.url;
        const authorName = post.author.name;
   
        // 3. Construct the Slack message payload
        const slackMessage = {
          text: `🎉 New post published by *${authorName}*!\n\n*<${postUrl}|${postTitle}>*`,
        };
   
        // 4. Send the formatted data to Slack
        const response = await fetch(SLACK_WEBHOOK_URL, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(slackMessage),
        });
   
        if (!response.ok) {
          throw new Error(`Slack API responded with status: ${response.status}`);
        }
   
        // 5. Return a success response
        return c.json({ success: true, message: 'Notification sent to Slack.' });
   
      } catch (error) {
        console.error('Error processing webhook:', error);
        return c.json({ error: 'Failed to process request' }, 500);
      }
    });
   
    export default app;
   

---

Step 4: Deploy to Vercel and Configure

Deploying our Hono app to Vercel is straightforward.

1. Push to a Git provider. Push your hashnode-to-slack folder to a GitHub, GitLab, or Bitbucket repository.

2. Import to Vercel.

   • Log in to your Vercel dashboard and click "Add New... -> Project."

   • Import the Git repository you just created.

   • Vercel will automatically detect it as a Hono project. No special build commands are needed.

3. Add Environment Variable.

   • Before deploying, go to the project's Settings -> Environment Variables.

   • Add a new variable with the name SLACK_WEBHOOK_URL.

   • In the value field, paste the Slack Incoming Webhook URL you saved in Step 1.

   • Click "Save."

4. Deploy. Go back to the deployments tab and trigger a deployment. Vercel will build and deploy your application, giving you a production URL (e.g., https://your-project-name.vercel.app).

---

Step 5: Finalize the Connection

You're on the final step!

1. Copy your new Vercel production URL.

2. Go back to your Hashnode blog's Dashboard -> Integrations.

3. Delete the old ngrok webhook and add a new one, pasting in your Vercel URL.

4. Publish a new post on Hashnode to test the entire flow.

Within seconds, you should see a perfectly formatted notification appear in your designated Slack channel! 🚀

Conclusion

By creating a simple middleware service, you have successfully bridged the gap between Hashnode's webhook format and Slack's requirements. This pattern is incredibly powerful and can be adapted to connect many other services that have incompatible APIs. You can now easily customize the message format in your Hono app to include more details, like tags or a cover image, to create even richer notifications. Happy automating!