Hugo & GithubPages 블로그 구독 및 이메일 알림 시스템 구현 가이드

블로그에 링크 추가:
[이메일로 구독하기](https://blogtrottr.com)
(사이트에서 https://0andwild.github.io/index.xml 입력)

1. Mailchimp 계정 생성
2. Audience 생성
3. Campaign → Create → Email → RSS Campaign
4. RSS URL 입력: https://your-blog.com/index.xml
5. 발송 주기 설정 (Daily/Weekly)
6. 이메일 템플릿 디자인
7. 구독 폼 코드 복사
8. Hugo에 삽입 (layouts/partials/subscribe.html)

<!-- Mailchimp 구독 폼 -->
<div id="mc_embed_signup">
  <form action="https://your-mailchimp-url.com/subscribe" method="post">
    <input type="email" name="EMAIL" placeholder="이메일 주소" required>
    <button type="submit">구독하기</button>
  </form>
</div>

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

  <label>관심 주제 선택:</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">구독하기</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 (GitHub 저장소에 암호화하여 저장)
[
  {
    "email": "user@example.com",
    "keywords": ["kubernetes", "docker"],
    "active": true
  },
  {
    "email": "dev@example.com",
    "keywords": ["golang", "rust"],
    "active": true
  }
]

-- subscribers 테이블
CREATE TABLE subscribers (
  id UUID PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  keywords TEXT[], -- 배열 형태
  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: |
          # 가장 최근 수정된 포스트 찾기
          POST_FILE=$(git diff-tree --no-commit-id --name-only -r ${{ github.sha }} | grep 'content/posts' | head -1)

          # 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: |
          # 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: |
          # Node.js 스크립트 실행
          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: `새 글: ${title}`,
              html: `
                <h2>${title}</h2>
                <p>${summary}</p>
                <p>관심 키워드와 일치: ${subscriber.matched_keywords.join(', ')}</p>
                <a href="${url}">글 읽기</a>
                <hr>
                <small><a href="https://0andwild.github.io/unsubscribe?token=${subscriber.token}">구독 취소</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>블로그 구독하기</h3>
  <form id="subscribe-form">
    <input type="email" id="email" placeholder="이메일 주소" required>

    <fieldset>
      <legend>관심 주제 선택 (선택한 주제의 글만 알림)</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">구독하기</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);

      // 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('구독이 완료되었습니다!');
      } else {
        alert('오류가 발생했습니다.');
      }
    });
  </script>
</div>

-- 매칭되는 구독자를 찾는 함수
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, ',') -- 배열 겹침 연산자
  ;
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: `새 글: ${title}`,
  html: `<p>${summary}</p><a href="${url}">읽기</a>`
});