Adding a mailing list to a static Astro blog with Resend

Adding a mailing list to a static site is one of those features that looks like it needs a whole backend — a database of subscribers, a queue, an unsubscribe flow. In practice, if you’re already on Netlify and already using Resend for transactional email, you can bolt on a working subscription form in an afternoon.

Here’s exactly how I did it on this site.

What we’re building

A MailingListCTA Astro component that:

• Renders an email input and a subscribe button
• Submits via fetch to a Netlify Function
• Shows inline success or error feedback without a page reload
• Includes a honeypot field to block bot submissions

The Netlify Function:

• Validates the email server-side
• Silently discards bot submissions (honeypot check)
• Calls the Resend Segments API to add the contact

Setting up Resend Segments

Resend recently migrated from Audiences to Segments — Audiences still work but are deprecated and will be removed. The concept is the same: a named list of contacts you can send broadcasts to.

Create a segment in the Resend dashboard. Once created, copy the segment ID — you’ll need it as an environment variable.

The Netlify Function

Create netlify/functions/subscribe.ts. The function receives a POST with { email, website } in the body. The website field is the honeypot.

1
import type { HandlerEvent } from "@netlify/functions";
2

3
const ALLOWED_ORIGIN = process.env.SITE_URL?.replace(/\/$/, "") ?? "";
4

5
function isValidEmail(email: string): boolean {
6
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
7
}
8

9
export const handler = async (event: HandlerEvent) => {
10
  const corsHeaders = {
11
    "Access-Control-Allow-Origin": ALLOWED_ORIGIN,
12
    "Access-Control-Allow-Methods": "POST, OPTIONS",
13
    "Access-Control-Allow-Headers": "Content-Type",
14
  };
15

16
  if (event.httpMethod === "OPTIONS") {
17
    return { statusCode: 204, headers: corsHeaders, body: "" };
18
  }
19

20
  if (event.httpMethod !== "POST") {
21
    return { statusCode: 405, headers: corsHeaders, body: JSON.stringify({ error: "Method not allowed" }) };
22
  }
23

24
  const apiKey = process.env.RESEND_API_KEY;
25
  const segmentId = process.env.RESEND_SEGMENT_ID;
26

27
  if (!apiKey || !segmentId) {
28
    console.error("subscribe: RESEND_API_KEY or RESEND_SEGMENT_ID is not set");
29
    return { statusCode: 500, headers: corsHeaders, body: JSON.stringify({ error: "Server configuration error" }) };
30
  }
31

32
  let body: { email?: unknown; website?: unknown };
33
  try {
34
    body = JSON.parse(event.body ?? "{}");
35
  } catch {
36
    return { statusCode: 400, headers: corsHeaders, body: JSON.stringify({ error: "Invalid request body" }) };
37
  }
38

39
  const email = (typeof body.email === "string" ? body.email : "")
40
    .trim()
41
    .toLowerCase();
42
  const honeypot = body.website ?? "";
43

44
  if (honeypot) {
45
    return { statusCode: 200, headers: corsHeaders, body: JSON.stringify({ success: true }) };
46
  }
47

48
  if (!email || !isValidEmail(email)) {
49
    return { statusCode: 400, headers: corsHeaders, body: JSON.stringify({ error: "A valid email address is required" }) };
50
  }
51

52
  const res = await fetch(`https://api.resend.com/contacts`, {
53
    method: "POST",
54
    headers: {
55
      Authorization: `Bearer ${apiKey}`,
56
      "Content-Type": "application/json",
57
    },
58
    body: JSON.stringify({ email, unsubscribed: false, segments: [{ id: segmentId }] }),
59
  });
60

61
  if (!res.ok) {
62
    const errorBody = await res.text();
63
    console.error(`subscribe: Resend API error ${res.status}: ${errorBody}`);
64
    return { statusCode: 502, headers: corsHeaders, body: JSON.stringify({ error: "Could not subscribe. Please try again later." }) };
65
  }
66

67
  return {
68
    statusCode: 200,
69
    headers: { ...corsHeaders, "Content-Type": "application/json" },
70
    body: JSON.stringify({ success: true }),
71
  };
72
};

A few things worth noting:

• No Resend SDK — calling the REST API directly with fetch keeps the function dependency-free and fast to cold-start.
• CORS headers — the function sets Access-Control-Allow-Origin to SITE_URL from environment, with an OPTIONS preflight handler.
• Honeypot is silently accepted — returning 200 when the honeypot is filled means bots get no signal that they were caught. Returning 400 would tell them to try again without the field.

Welcome email

After the contact is successfully added, the function sends a welcome email using POST /emails. The send is done with .catch() so a failure doesn’t break the subscription response.

Rather than embedding HTML directly in the function, the welcome email is stored as a Resend template. This means you can edit the email copy in the Resend dashboard without touching or redeploying the function.

When RESEND_WELCOME_TEMPLATE_ID is set, the function sends via the template. Otherwise it falls back to inline HTML, so the function keeps working before you’ve set up the template.

1
const emailPayload = welcomeTemplateId
2
  ? {
3
      from: `Sourcier <${fromEmail}>`,
4
      to: [email],
5
      template: {
6
        id: welcomeTemplateId,
7
        variables: { BLOG_URL: `${siteUrl}/blog` },
8
      },
9
    }
10
  : {
11
      from: `Sourcier <${fromEmail}>`,
12
      to: [email],
13
      subject: "You're subscribed to Sourcier",
14
      html: `<div style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;max-width:560px;margin:0 auto;padding:2rem 1.5rem;color:#0f0f0f">
15
  <p style="font-size:1.5rem;font-weight:800;text-transform:uppercase;letter-spacing:0.02em;margin:0 0 1rem">Welcome to Sourcier</p>
16
  <p style="margin:0 0 1rem;line-height:1.6">Thanks for signing up. You'll get an email whenever I publish something new — engineering deep-dives, lessons from the field, and the occasional opinion.</p>
17
  <p style="margin:0 0 1.5rem;line-height:1.6">In the meantime, browse the <a href="${siteUrl}/blog" style="color:#e8006a">blog</a> to see what's already there.</p>
18
  <p style="margin:0;color:#6b6b6b;font-size:0.875rem">You can unsubscribe at any time by replying to this email.</p>
19
</div>`,
20
    };
21

22
await fetch("https://api.resend.com/emails", {
23
  method: "POST",
24
  headers: {
25
    Authorization: `Bearer ${apiKey}`,
26
    "Content-Type": "application/json",
27
  },
28
  body: JSON.stringify(emailPayload),
29
}).catch((err) => console.error("subscribe: welcome email failed:", err));

Note that template and html are mutually exclusive — Resend returns a validation error if you include both. The template must also be published in the Resend dashboard before it can be used; draft templates won’t send.

The fromEmail guard means the function still works in local dev without NOTIFY_FROM_EMAIL set — it simply skips the welcome email.

Creating the template with a script

Rather than manually creating the template in the Resend dashboard, the repo includes a setup script at scripts/create-welcome-template.js. Run it once after cloning:

1
RESEND_API_KEY=re_xxx node scripts/create-welcome-template.js

The script:

1. Checks whether a template with the alias sourcier-welcome already exists
2. If it does — updates it with PATCH /templates/:id and re-publishes
3. If it doesn’t — creates it with POST /templates and publishes
4. Prints the template ID to copy into your Netlify env vars

The alias acts as a stable lookup key, so running the script again on future edits updates the template in-place rather than creating duplicates. After publishing via the script, email sends using the template will immediately use the updated version.

The Astro component

Click the expand icon to view it fullscreen.

The MailingListCTA component is a dark card that sits at content width on any page. The submit logic lives in a shared subscribeForm.ts utility so both the full-width card and the sidebar component use the same behaviour without duplicating code.

Honeypot field

The honeypot is a text input that is visually hidden using CSS — positioned off-screen, not just display: none, because some bots skip fields hidden that way.

1
<p class="mailing-cta__honeypot" aria-hidden="true">
2
  <label for="mailing-cta-website">Leave this blank</label>
3
  <input id="mailing-cta-website" name="website" type="text" tabindex="-1" autocomplete="off" />
4
</p>

1
.mailing-cta__honeypot {
2
  position: absolute;
3
  left: -9999px;
4
  width: 1px;
5
  height: 1px;
6
  overflow: hidden;
7
  opacity: 0;
8
  pointer-events: none;
9
}

tabindex="-1" ensures keyboard users and screen readers can’t reach it. aria-hidden="true" on the wrapper removes it from the accessibility tree entirely.

Shared form utility

The submit handler lives in src/utils/subscribeForm.ts. Both MailingListCTA and MailingListCTASidebar call bindSubscribeForm() with a config object that maps DOM IDs to CSS class names and copy:

1
interface SubscribeFormConfig {
2
  formId: string;
3
  emailId: string;
4
  feedbackClass: string;
5
  feedbackSuccessClass: string;
6
  feedbackErrorClass: string;
7
  successLabel: string;
8
  defaultButtonLabel: string;
9
  source?: string;
10
}
11

12
export function bindSubscribeForm(config: SubscribeFormConfig): void {
13
  const form = document.getElementById(config.formId) as HTMLFormElement | null;
14
  const feedback = form?.querySelector<HTMLElement>("[aria-live]") ?? null;
15
  const input = document.getElementById(config.emailId) as HTMLInputElement | null;
16

17
  if (!form || !feedback || !input) return;
18

19
  form.addEventListener("submit", async (e) => {
20
    e.preventDefault();
21

22
    const email = input.value.trim();
23
    if (!email) return;
24

25
    const btn = form.querySelector<HTMLButtonElement>("button[type=submit]");
26
    if (!btn) return;
27

28
    btn.disabled = true;
29
    btn.textContent = "Subscribing…";
30
    feedback.hidden = true;
31
    feedback.className = config.feedbackClass;
32

33
    try {
34
      const res = await fetch("/.netlify/functions/subscribe", {
35
        method: "POST",
36
        headers: { "Content-Type": "application/json" },
37
        body: JSON.stringify({
38
          email,
39
          website: (form.elements.namedItem("website") as HTMLInputElement | null)?.value ?? "",
40
          ...(config.source ? { source: config.source } : {}),
41
        }),
42
      });
43

44
      const data = await res.json();
45

46
      if (res.ok) {
47
        feedback.textContent = config.successLabel;
48
        feedback.classList.add(config.feedbackSuccessClass);
49
        form.reset();
50
        btn.textContent = "You're in";
51
        btn.disabled = true;
52
      } else {
53
        feedback.textContent = (data as { error?: string }).error ?? "Something went wrong. Please try again.";
54
        feedback.classList.add(config.feedbackErrorClass);
55
        btn.disabled = false;
56
        btn.textContent = config.defaultButtonLabel;
57
      }
58
    } catch {
59
      feedback.textContent = "Something went wrong. Please try again.";
60
      feedback.classList.add(config.feedbackErrorClass);
61
      btn.disabled = false;
62
      btn.textContent = config.defaultButtonLabel;
63
    } finally {
64
      feedback.hidden = false;
65
    }
66
  });
67
}

A few things worth noting:

• feedback.className is reset on each submission so a previous success or error class doesn’t carry over if the user submits again.
• btn.textContent = "You're in" on success locks the button with a confirmation label so the user knows the action was recorded.
• source is an optional field passed through to the function body, giving a hook for tracking which page the subscriber came from.
• The feedback element has aria-live="polite" so screen readers announce the outcome. It starts hidden so it takes up no space until there’s something to show.

Environment variables

Add these in the Netlify dashboard under Site configuration → Environment variables:

RESEND_API_KEY is likely already set if you’re using Resend for other notifications on the same site. RESEND_WELCOME_TEMPLATE_ID and RESEND_TOPIC_ID are optional — the function falls back to inline HTML if the template ID is absent.

Adding the component to pages

Import and drop the component wherever you want the CTA to appear:

1
---
2
import MailingListCTA from "../components/MailingListCTA.astro";
3
---
4

5
<!-- rest of page -->
6
<MailingListCTA />

I added it to blog posts, guide pages, tag pages, and the standalone pages — home, blog index, about, and contact.

Sidebar variant

Blog post pages have a sticky sidebar that shows the table of contents. A full-width card below the article felt like too much repetition, so I also built a compact MailingListCTASidebar component that sits below the ToC and shares the same Netlify Function.

The sidebar variant is a self-contained dark card with the same form logic, but uses display: block; width: 100% for the input and button rather than a side-by-side layout.

1
---
2
import MailingListCTASidebar from "../components/MailingListCTASidebar.astro";
3
---
4

5
<aside class="post__sidebar">
6
  <nav class="toc"><!-- ... --></nav>
7
  <MailingListCTASidebar />
8
</aside>

Dark mode theming

The card background is hardcoded to #0f0f0f rather than var(--color-ink). This is intentional — --color-ink flips to #f0f0f0 in dark mode (it’s the text colour token), so using it for a background produces a near-white card. The footer on this site has the same issue and uses the same fix.

To make the card visible in dark mode where the page background is #111111, I added a pink top border and a subtle edge border:

1
.mailing-cta__card {
2
  background-color: #0f0f0f;
3
  border-radius: 8px;
4
  padding: 2.5rem;
5
  border-top: 3px solid var(--color-pink);
6
  border-left: 1px solid rgba(255, 255, 255, 0.06);
7
  border-right: 1px solid rgba(255, 255, 255, 0.06);
8
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
9
}

The pink top border serves as the primary visual anchor in both modes. In light mode the contrast between in the dark card and white page does the work; in dark mode the subtle borders define the card edges.

What Resend handles for you

Once a contact is in your audience, Resend takes care of the rest:

• Duplicate contacts — adding the same email again updates the existing record rather than creating a duplicate.
• Unsubscribe management — you can send broadcasts with unsubscribe links built in, and Resend updates the contact’s unsubscribed flag automatically.
• Broadcasts — send to the full audience from the Resend dashboard or via the POST /broadcasts API.

The free tier covers 3,000 emails per month and 100 contacts in audiences, which is plenty for a personal blog getting started.

Wrap-up

The full implementation is around 200 lines across three files: subscribe.ts, subscribeForm.ts, and the two Astro components. Resend handles deduplication, unsubscribe management, and broadcast delivery, keeping the site code lean.

If you’re already using Resend for comment notifications, the only new piece is subscribe.ts. The welcome email script is a one-off setup, and the components drop in wherever a CTA makes sense.