Complete Guide to Blog Subscription and Email Notification Systems

Add link to blog:
[Subscribe via Email](https://blogtrottr.com)
(Enter https://0andwild.github.io/index.xml on the site)

1. Create Mailchimp account
2. Create Audience
3. Campaign → Create → Email → RSS Campaign
4. Enter RSS URL: https://your-blog.com/index.xml
5. Set sending frequency (Daily/Weekly)
6. Design email template
7. Copy subscription form code
8. Insert in Hugo (layouts/partials/subscribe.html)

<!-- Mailchimp subscription form -->
<div id="mc_embed_signup">
  <form action="https://your-mailchimp-url.com/subscribe" method="post">
    <input type="email" name="EMAIL" placeholder="Email address" required>
    <button type="submit">Subscribe</button>
  </form>
</div>

<form action="https://buttondown.email/api/emails/embed-subscribe/YOUR_ID" method="post">
  <input type="email" name="email" placeholder="Email" required>

  <label>Select topics of interest:</label>
  <input type="checkbox" name="tags" value="kubernetes"> Kubernetes
  <input type="checkbox" name="tags" value="docker"> Docker
  <input type="checkbox" name="tags" value="golang"> Go

  <button type="submit">Subscribe</button>
</form>

name: Send Newsletter
on:
  push:
    paths:
      - 'content/posts/**'

jobs:
  send:
    runs-on: ubuntu-latest
    steps:
      - name: Extract tags from post
        run: |
          TAGS=$(grep "^tags = " content/posts/*/index.md | cut -d'"' -f2)
          echo "POST_TAGS=$TAGS" >> $GITHUB_ENV

      - name: Send to matching subscribers
        run: |
          curl -X POST https://api.buttondown.email/v1/emails \
            -H "Authorization: Token ${{ secrets.BUTTONDOWN_API_KEY }}" \
            -d "subject=New Post" \
            -d "body=..." \
            -d "tag=$POST_TAGS"

// subscribers.json (encrypted in GitHub repository)
[
  {
    "email": "user@example.com",
    "keywords": ["kubernetes", "docker"],
    "active": true
  },
  {
    "email": "dev@example.com",
    "keywords": ["golang", "rust"],
    "active": true
  }
]

-- subscribers table
CREATE TABLE subscribers (
  id UUID PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  keywords TEXT[], -- array type
  active BOOLEAN DEFAULT true,
  created_at TIMESTAMP DEFAULT NOW()
);

name: Email Notification
on:
  push:
    branches: [main]
    paths:
      - 'content/posts/**'

jobs:
  notify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Extract Post Metadata
        id: metadata
        run: |
          # Find most recently modified post
          POST_FILE=$(git diff-tree --no-commit-id --name-only -r ${{ github.sha }} | grep 'content/posts' | head -1)

          # Parse Front Matter
          TITLE=$(grep "^title = " $POST_FILE | cut -d'"' -f2)
          TAGS=$(grep "^tags = " $POST_FILE | sed 's/tags = \[//;s/\]//;s/"//g')
          SUMMARY=$(grep "^summary = " $POST_FILE | cut -d'"' -f2)
          URL="https://0andwild.github.io/$(dirname $POST_FILE | sed 's/content\///')"

          echo "title=$TITLE" >> $GITHUB_OUTPUT
          echo "tags=$TAGS" >> $GITHUB_OUTPUT
          echo "summary=$SUMMARY" >> $GITHUB_OUTPUT
          echo "url=$URL" >> $GITHUB_OUTPUT

      - name: Query Matching Subscribers
        id: subscribers
        run: |
          # Query matching subscribers from Supabase
          curl -X POST https://YOUR_PROJECT.supabase.co/rest/v1/rpc/get_matching_subscribers \
            -H "apikey: ${{ secrets.SUPABASE_KEY }}" \
            -H "Content-Type: application/json" \
            -d "{\"post_tags\": \"${{ steps.metadata.outputs.tags }}\"}" \
            > subscribers.json

      - name: Send Emails via SendGrid
        run: |
          # Execute Node.js script
          cat > send-emails.js << 'EOF'
          const sgMail = require('@sendgrid/mail');
          const fs = require('fs');

          sgMail.setApiKey(process.env.SENDGRID_API_KEY);

          const subscribers = JSON.parse(fs.readFileSync('subscribers.json'));
          const title = process.env.POST_TITLE;
          const summary = process.env.POST_SUMMARY;
          const url = process.env.POST_URL;

          subscribers.forEach(async (subscriber) => {
            const msg = {
              to: subscriber.email,
              from: 'noreply@0andwild.github.io',
              subject: `New Post: ${title}`,
              html: `
                <h2>${title}</h2>
                <p>${summary}</p>
                <p>Matched keywords: ${subscriber.matched_keywords.join(', ')}</p>
                <a href="${url}">Read Post</a>
                <hr>
                <small><a href="https://0andwild.github.io/unsubscribe?token=${subscriber.token}">Unsubscribe</a></small>
              `
            };

            await sgMail.send(msg);
            console.log(`Email sent to ${subscriber.email}`);
          });
          EOF

          npm install @sendgrid/mail
          node send-emails.js
        env:
          SENDGRID_API_KEY: ${{ secrets.SENDGRID_API_KEY }}
          POST_TITLE: ${{ steps.metadata.outputs.title }}
          POST_SUMMARY: ${{ steps.metadata.outputs.summary }}
          POST_URL: ${{ steps.metadata.outputs.url }}

<!-- layouts/shortcodes/subscribe.html -->
<div class="subscription-form">
  <h3>Subscribe to Blog</h3>
  <form id="subscribe-form">
    <input type="email" id="email" placeholder="Email address" required>

    <fieldset>
      <legend>Select topics of interest (get notified only for selected topics)</legend>
      <label><input type="checkbox" name="keywords" value="kubernetes"> Kubernetes</label>
      <label><input type="checkbox" name="keywords" value="docker"> Docker</label>
      <label><input type="checkbox" name="keywords" value="golang"> Go</label>
      <label><input type="checkbox" name="keywords" value="rust"> Rust</label>
      <label><input type="checkbox" name="keywords" value="devops"> DevOps</label>
    </fieldset>

    <button type="submit">Subscribe</button>
  </form>

  <script>
    document.getElementById('subscribe-form').addEventListener('submit', async (e) => {
      e.preventDefault();

      const email = document.getElementById('email').value;
      const keywords = Array.from(document.querySelectorAll('input[name="keywords"]:checked'))
        .map(cb => cb.value);

      // Save to Supabase
      const response = await fetch('https://YOUR_PROJECT.supabase.co/rest/v1/subscribers', {
        method: 'POST',
        headers: {
          'apikey': 'YOUR_ANON_KEY',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ email, keywords, active: true })
      });

      if (response.ok) {
        alert('Successfully subscribed!');
      } else {
        alert('An error occurred.');
      }
    });
  </script>
</div>

-- Function to find matching subscribers
CREATE OR REPLACE FUNCTION get_matching_subscribers(post_tags TEXT)
RETURNS TABLE(email TEXT, matched_keywords TEXT[], token TEXT) AS $$
BEGIN
  RETURN QUERY
  SELECT
    s.email,
    ARRAY(
      SELECT unnest(s.keywords)
      INTERSECT
      SELECT unnest(string_to_array(post_tags, ','))
    ) as matched_keywords,
    s.unsubscribe_token as token
  FROM subscribers s
  WHERE s.active = true
    AND s.keywords && string_to_array(post_tags, ',') -- array overlap operator
  ;
END;
$$ LANGUAGE plpgsql;

import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

await resend.emails.send({
  from: 'blog@0andwild.github.io',
  to: subscriber.email,
  subject: `New Post: ${title}`,
  html: `<p>${summary}</p><a href="${url}">Read</a>`
});