# 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`](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:
    
    ```javascript
    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:**
    
    ```bash
    node inspector.js
    ```
    
3. **Expose it with** `ngrok`. In a new terminal window, run:
    
    ```bash
    ngrok http 3000
    ```
    
    `ngrok` will give you a public "Forwarding" URL (e.g., [`https://random-string.ngrok.io`](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:**
    
    ```bash
    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.
    
    ```typescript
    hashnode-to-slack/
    └── api/
        └── index.js
    ```
    
3. **Write the code.** Open `api/index.js` and add the following:
    
    ```javascript
    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... -&gt; 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 -&gt; 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`](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 -&gt; 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!