Bundle Content Creator Dev: Astro + MDX + Tina

TL;DR

• Stack: Astro 6 + MDX + TinaCMS + Cloudflare Pages + Buttondown/ConvertKit newsletter.
• Cost: Rp 0/bulan baseline, Rp 600rb-1 juta/bulan untuk creator dengan newsletter 5K subscriber.
• Verdict: Recommended untuk dev yang serius jadi content creator (blog + newsletter + course).

Konteks

Saya pakai bundle ini di:

1. Personal site sendiri sejak Q3 2024 (kodekarawaci.web.id dan domain personal): 80+ blog post, 1200 newsletter subscriber, 3 course sold via Lemon Squeezy
2. Klien content creator Tangerang (tech educator, dev mid-career): launch Q4 2025, 30 post, 600 subscriber
3. Klien fotografer + storyteller Jakarta (creator visual + narrative): launch Q1 2026, 25 post, 800 subscriber
4. Klien indie hacker Jakarta (dev + business writer): launch Q1 2026, 40 post, 2K subscriber
5. Klien dev junior baru build audience (career switcher): launch Q2 2026, 15 post, 200 subscriber

Total experience: 21 bulan, 5 site production.

Pricing (Juni 2026)

Astro 6

Gratis.

MDX integration

Gratis (bawaan Astro).

TinaCMS

• Free: 3 user, unlimited content, basic media library
• Pro: $29/bulan = Rp 460rb. Tambah unlimited user, advanced media, custom workflow
• Self-host: free + cost VPS (Rp 60-150rb/bulan)

Untuk solo creator: free tier cukup.

Cloudflare Pages

• Free: 100K request/hari, unlimited bandwidth
• $20/bulan untuk Pro features (rare untuk creator solo)

Newsletter

• Buttondown: $9/mo (Rp 144rb) hingga 1K subscriber, $29/mo hingga 5K
• ConvertKit: free hingga 1K, $30/mo hingga 5K
• Resend: $20/mo, transactional + broadcast email

Domain

Rp 150-450rb/year (Niagahoster, Rumahweb, CF Registrar).

Total monthly cost (typical creator)

• Solo creator 100-500 subscriber: Rp 0-150rb/bulan
• Creator 1K-5K subscriber: Rp 150rb-500rb/bulan
• Creator 5K-20K subscriber: Rp 500rb-1.5 juta/bulan

Architecture

Creator edit content
    ↓ (TinaCMS visual editor di browser)
Git commit (MDX file)
    ↓
GitHub repo
    ↓ (CF Pages webhook)
Cloudflare Pages build
    ↓ (Astro static + RSS)
CDN edge (Jakarta PoP)
    ↓
Reader / Subscriber

Newsletter:
RSS feed → ConvertKit/Buttondown trigger → email blast

Pure static, fast, cheap.

Setup recipe (6-8 jam total)

Hour 1: Init project

bunx create-astro@latest creator-site --template blog
cd creator-site
bunx astro add tailwind mdx sitemap
bun add @astrojs/rss tinacms

Setup repo + Claude Code (lihat workflow Claude Code → Astro).

Hour 2: Content Collection schema

src/content/config.ts:

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    heroImage: z.string().optional(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
    featured: z.boolean().default(false),
  }),
});

const newsletter = defineCollection({
  schema: z.object({
    title: z.string(),
    sentAt: z.coerce.date(),
    excerpt: z.string(),
    teaser: z.string().optional(),
  }),
});

export const collections = { blog, newsletter };

Hour 3: Layout + theme

Prompt Claude Code:

Build blog layout dengan:
- Header sticky dengan logo + nav + dark mode toggle
- Article layout: hero image + title + meta (date, reading time, tags) + TOC sidebar
- Footer dengan newsletter signup + social links
- Typography optimized untuk long-form reading (line-height 1.7, max-width 65ch)
- Dark mode bawaan via prefers-color-scheme
- Reading progress bar di top

Claude generate. Tweak typography manual.

Hour 4: TinaCMS integration

bun add tinacms @tinacms/cli
bunx tinacms init

Config tina/config.ts:

import { defineConfig } from 'tinacms';

export default defineConfig({
  branch: 'main',
  clientId: process.env.TINA_CLIENT_ID!,
  token: process.env.TINA_TOKEN!,
  build: { outputFolder: 'admin', publicFolder: 'public' },
  media: { tina: { mediaRoot: 'images', publicFolder: 'public' } },
  schema: {
    collections: [
      {
        name: 'blog',
        label: 'Blog Posts',
        path: 'src/content/blog',
        format: 'mdx',
        fields: [
          { type: 'string', name: 'title', label: 'Title', required: true },
          { type: 'string', name: 'description', label: 'Description', ui: { component: 'textarea' } },
          { type: 'datetime', name: 'pubDate', label: 'Publish Date' },
          { type: 'image', name: 'heroImage', label: 'Hero Image' },
          { type: 'string', name: 'tags', label: 'Tags', list: true },
          { type: 'boolean', name: 'draft', label: 'Draft' },
          { type: 'rich-text', name: 'body', label: 'Body', isBody: true },
        ],
      },
    ],
  },
});

Access TinaCMS via /admin/index.html setelah deploy.

Hour 5: RSS + sitemap + SEO

src/pages/rss.xml.js:

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export async function GET(context) {
  const posts = await getCollection('blog', ({ data }) => !data.draft);
  return rss({
    title: 'Creator Name',
    description: 'Description',
    site: context.site,
    items: posts.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      link: `/blog/${post.slug}/`,
    })),
  });
}

SEO meta component + structured data (Article schema).

Hour 6: Newsletter signup

ConvertKit form:

<form action="https://api.convertkit.com/v3/forms/[FORM_ID]/subscribe" method="post">
  <input type="email" name="email_address" required />
  <input type="hidden" name="api_key" value={import.meta.env.PUBLIC_CONVERTKIT_KEY} />
  <button>Subscribe</button>
</form>

Atau Buttondown embed (lebih simple).

Hour 7: Deploy + TinaCMS Cloud

• Push ke GitHub
• Connect Cloudflare Pages
• Add TinaCMS Cloud (gratis 3 user)
• Set env vars: TINA_CLIENT_ID, TINA_TOKEN, PUBLIC_CONVERTKIT_KEY

Hour 8: Course monetization (opsional)

Lemon Squeezy integration:

// /api/checkout/[productId].ts
const checkoutUrl = `https://[your-store].lemonsqueezy.com/buy/[variant-id]`;

Embed button “Buy course” → redirect ke Lemon Squeezy checkout. Setelah payment, webhook → grant access via Supabase.

Atau pakai Polar.sh (alternatif open-source, lebih murah commission).

Workflow daily creator

Write post (30-90 menit)

1. Login /admin/index.html (TinaCMS visual editor)
2. New post — fill title, description, tags
3. Write body di rich-text editor MDX
4. Embed component custom (CodePen, YouTube, callout, code playground)
5. Preview → publish → auto-commit + deploy

Send newsletter (15-30 menit)

1. Curate 1-3 post terbaru di Buttondown/ConvertKit
2. Add intro personal
3. Schedule send
4. Tracking open rate + click

Update course material (variable)

1. Edit di TinaCMS atau langsung edit MDX file
2. Git push → auto-deploy

Performance hasil

Average Lighthouse (5 creator site):

Metric	Mobile	Desktop
Performance	96	99
Accessibility	96	98
Best practices	100	100
SEO	100	100

TTFB Jakarta median: 19ms. Reading experience: smooth, no layout shift, dark mode optimal.

Trade-off

Pro

• Content tetap di Git (portable, no vendor lock-in heavy)
• TinaCMS visual edit untuk non-dev contributor
• Newsletter + course monetization integrate
• Hosting Rp 0/bulan baseline
• Performance world-class

Con

• Setup awal 6-8 jam (lebih lambat dari WordPress click-install)
• TinaCMS pro features butuh $29/mo (jika butuh multi-user atau advanced media)
• Tidak ada native comment (butuh Giscus/Disqus integration)
• Search butuh integration external (Pagefind, Algolia, Meilisearch)

Konteks Indonesia

Personal site saya: 80+ post, 1200 subscriber, 3 course sold (Rp 6 juta avg). ARR Rp 18 juta dari course + Rp 4 juta affiliate income. Total cost: Rp 250rb/bulan (domain + Buttondown).

Klien tech educator Tangerang: launch Q4 2025. 30 post, 600 subscriber. Monetize via consulting referral dari blog. Cost: Rp 150rb/bulan.

Klien indie hacker Jakarta: 40 post, 2K subscriber, sell ebook tech (Rp 99rb-249rb). ARR Rp 24 juta. Cost: Rp 700rb/bulan.

Klien dev junior career switcher: build audience untuk job search. 15 post, 200 subscriber. Got 3 job offer dari blog traffic Q2 2026.

Verdict

Recommended untuk dev content creator Indonesia 2026.

Setup bundle ini jika:

• Anda dev + suka nulis (blog technical, tutorial, opinion)
• Tujuan: build audience, newsletter, monetize course/consulting
• Comfort dengan workflow technical (git, deploy)
• Budget tool Rp 0-500rb/bulan

Skip jika:

• Anda full-time content creator non-dev (WordPress lebih ergonomis)
• Butuh interactive feature heavy (forum, comment threading kompleks)
• Workload writing minimal (< 1 post/bulan) — overhead setup tidak worth

Variasi:

• Ganti Cloudflare Pages dengan Vercel (jika prefer Vercel ecosystem)
• Ganti TinaCMS dengan Decap CMS (free tier lebih besar, UX lebih kaku)
• Skip TinaCMS jika Anda solo dev yang OK edit MDX langsung di editor

Untuk portfolio launch cepat: Bundle Portfolio Astro + Claude 1 Hari.