Skip to content

Instantly share code, notes, and snippets.

@nghyane
Created March 3, 2026 07:05
Show Gist options
  • Select an option

  • Save nghyane/22da6ce6de978d2d4ca39639c2ba3058 to your computer and use it in GitHub Desktop.

Select an option

Save nghyane/22da6ce6de978d2d4ca39639c2ba3058 to your computer and use it in GitHub Desktop.
DevTools Compare — Project Plan (SolidStart + AdSense + Affiliate)

DevTools Compare — Project Plan

Tổng quan

Site so sánh dev tools với programmatic SEO, monetize bằng AdSense (baseline) + Affiliate (primary revenue).

  • Stack: SolidStart (SSG) + Tailwind + MDX
  • Deploy: Cloudflare Pages (free)
  • Content: Agent-generated, template-driven
  • Target: 200+ trang trong tháng đầu

Phase 0 — Setup (Ngày 1)

0.1 Domain & Infra

  • Mua domain (gợi ý: devcompare.dev, toolsvs.com, devpick.io...)
  • Setup Cloudflare Pages project
  • Google Search Console — verify domain
  • Google Analytics 4

0.2 Project scaffold

# SolidStart với SSG
npx create-solid@latest devtools-compare
# Chọn: bare, TypeScript
devtools-compare/
├── src/
│   ├── routes/
│   │   ├── index.tsx                     # Landing page
│   │   ├── compare/
│   │   │   └── [slug].tsx                # Dynamic: react-vs-solidjs
│   │   ├── best/
│   │   │   └── [slug].tsx                # Dynamic: best-hosting-for-startups
│   │   └── blog/
│   │       └── [slug].tsx                # Tutorial posts
│   ├── components/
│   │   ├── layout/
│   │   │   ├── header.tsx
│   │   │   ├── footer.tsx
│   │   │   ├── sidebar.tsx
│   │   │   └── seo-head.tsx
│   │   ├── comparison/
│   │   │   ├── comparison-table.tsx       # Bảng so sánh chính
│   │   │   ├── feature-row.tsx            # Một dòng feature
│   │   │   ├── verdict-card.tsx           # Kết luận + điểm số
│   │   │   ├── pros-cons.tsx              # Ưu nhược điểm
│   │   │   └── score-badge.tsx            # Điểm đánh giá
│   │   ├── monetization/
│   │   │   ├── adsense-slot.tsx           # AdSense container
│   │   │   ├── affiliate-cta.tsx          # Nút affiliate
│   │   │   └── affiliate-banner.tsx       # Banner affiliate
│   │   ├── content/
│   │   │   ├── toc.tsx                    # Table of contents
│   │   │   ├── related-comparisons.tsx    # Internal links
│   │   │   └── faq-section.tsx            # FAQ schema markup
│   │   └── common/
│   │       ├── button.tsx
│   │       ├── card.tsx
│   │       ├── badge.tsx
│   │       └── icon.tsx
│   ├── data/
│   │   ├── comparisons/                   # Agent-generated
│   │   │   ├── react-vs-solidjs.json
│   │   │   ├── vue-vs-svelte.json
│   │   │   └── ...
│   │   ├── best-of/                       # Agent-generated
│   │   │   ├── best-hosting-for-startups.json
│   │   │   └── ...
│   │   ├── categories.json                # Danh mục
│   │   └── affiliates.json                # Affiliate links + programs
│   ├── templates/                         # Agent đọc để generate
│   │   ├── comparison.spec.md
│   │   ├── best-of.spec.md
│   │   └── blog-post.spec.md
│   └── lib/
│       ├── seo.ts                         # Meta tags, JSON-LD
│       ├── sitemap.ts                     # Sitemap generator
│       └── affiliate.ts                   # Affiliate link helper
├── scripts/
│   ├── generate-comparison.ts             # Agent script: tạo 1 comparison
│   ├── generate-batch.ts                  # Batch generate nhiều trang
│   └── generate-sitemap.ts                # Build sitemap.xml
├── app.config.ts
├── tailwind.config.ts
└── package.json

0.3 Component specs cho agent

Viết spec trước, agent generate component sau:

# comparison-table.spec.md

## Props
- toolA: Tool
- toolB: Tool  
- categories: Category[] (performance, dx, ecosystem, learning-curve...)
- scores: Record<category, { a: number, b: number }> // 1-10

## Render
- Bảng 3 cột: Feature | Tool A | Tool B
- Score hiện progress bar + số
- Hàng thắng highlight xanh
- Responsive: mobile stack thành cards
- Tổng điểm ở footer row

## SEO
- Dùng <table> semantic, không div grid
- Caption cho bảng

Phase 1 — Core Build (Ngày 2-4)

1.1 Data schema

// types.ts

interface Tool {
  slug: string;           // "solidjs"
  name: string;           // "SolidJS"
  logo: string;           // URL hoặc local
  website: string;
  github: string;
  category: string;       // "framework", "hosting", "database"
  description: string;
}

interface Comparison {
  slug: string;           // "react-vs-solidjs"
  toolA: Tool;
  toolB: Tool;
  title: string;          // "React vs SolidJS: Which Frontend Framework in 2026?"
  metaDescription: string;
  intro: string;
  
  categories: ComparisonCategory[];
  
  verdict: {
    winner: "a" | "b" | "tie";
    summary: string;
    useA: string[];       // Khi nào chọn A
    useB: string[];       // Khi nào chọn B
  };
  
  faqs: FAQ[];            // FAQ schema cho Google
  
  affiliates: AffiliateLink[];
  
  relatedComparisons: string[];  // slugs
  
  publishedAt: string;
  updatedAt: string;
}

interface ComparisonCategory {
  name: string;           // "Performance"
  slug: string;
  scoreA: number;         // 1-10
  scoreB: number;
  analysis: string;       // 2-3 đoạn phân tích
  winner: "a" | "b" | "tie";
}

interface FAQ {
  question: string;
  answer: string;
}

interface AffiliateLink {
  label: string;          // "Deploy trên Vercel"
  url: string;
  program: string;        // "vercel", "cloudflare"
  position: "intro" | "mid" | "verdict";
}

1.2 Agent generate content

Input: cặp tool names Output: JSON theo schema trên

Agent workflow:

1. Nhận cặp: "React" vs "SolidJS"
2. Research (web search) → thu thập data thực tế
3. Fill template → comparison JSON
4. Validate schema
5. Ghi vào src/data/comparisons/react-vs-solidjs.json

Prompt template cho agent (templates/comparison.spec.md):

# Comparison Generator

## Input
- Tool A: {{toolA}}
- Tool B: {{toolB}}
- Category: {{category}}

## Research
Tìm thông tin mới nhất (2025-2026) về:
- Performance benchmarks (Lighthouse, bundle size, TTFB)
- Developer experience (learning curve, DX, docs quality)
- Ecosystem (packages, community size, job market)
- Use cases (khi nào dùng A, khi nào dùng B)
- Pricing (nếu có)

## Output rules
- Khách quan, có số liệu cụ thể
- Mỗi category analysis 150-300 từ
- FAQ 5-8 câu, target featured snippet
- Meta description < 160 ký tự, chứa cả 2 tên tool
- Title format: "{{toolA}} vs {{toolB}}: [compelling hook] (2026)"
- Không bias — phân tích trung thực

1.3 SEO fundamentals

// JSON-LD cho mỗi trang comparison
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "React vs SolidJS...",
  "datePublished": "...",
  "dateModified": "...",
  "author": { "@type": "Organization", "name": "DevTools Compare" },
  "publisher": { ... }
}

// FAQ schema → featured snippets
{
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Is SolidJS faster than React?",
      "acceptedAnswer": { "@type": "Answer", "text": "..." }
    }
  ]
}

On-page SEO checklist (agent tự kiểm):

  • Title tag: {toolA} vs {toolB}: ... (2026) — < 60 chars
  • H1 chứa cả 2 tên tool
  • Meta description < 160 chars
  • H2 cho mỗi comparison category
  • Internal links đến related comparisons
  • FAQ section cuối bài
  • Image alt text (logos)
  • Canonical URL

Phase 2 — Content Generation (Ngày 4-7)

2.1 Content matrix — Batch 1 (50 trang)

Frameworks (15 trang):

react-vs-solidjs, react-vs-svelte, react-vs-vue,
react-vs-angular, vue-vs-svelte, vue-vs-solidjs,
svelte-vs-solidjs, angular-vs-react, angular-vs-vue,
nextjs-vs-sveltekit, nextjs-vs-solidstart, nextjs-vs-nuxt,
nuxt-vs-sveltekit, astro-vs-nextjs, remix-vs-nextjs

Hosting & Deploy (10 trang):

vercel-vs-netlify, vercel-vs-cloudflare-pages,
cloudflare-vs-aws, railway-vs-render,
fly-io-vs-railway, supabase-vs-firebase,
planetscale-vs-neon, vercel-vs-railway,
netlify-vs-cloudflare-pages, heroku-vs-railway

Databases (10 trang):

postgres-vs-mysql, mongodb-vs-postgres,
supabase-vs-firebase, redis-vs-memcached,
sqlite-vs-postgres, prisma-vs-drizzle,
turso-vs-planetscale, dynamodb-vs-mongodb,
fauna-vs-supabase, neon-vs-supabase

Dev Tools (10 trang):

vscode-vs-cursor, bun-vs-node, bun-vs-deno,
pnpm-vs-npm, vitest-vs-jest, biome-vs-eslint,
tailwind-vs-css-modules, typescript-vs-javascript,
github-vs-gitlab, docker-vs-podman

Languages (5 trang):

typescript-vs-go, rust-vs-cpp, python-vs-javascript,
go-vs-rust, kotlin-vs-swift

2.2 Batch generation script

// scripts/generate-batch.ts

const pairs = [
  { a: "React", b: "SolidJS", category: "frameworks" },
  { a: "Vercel", b: "Netlify", category: "hosting" },
  // ... 50 cặp
];

for (const pair of pairs) {
  // Agent generate comparison JSON
  // Validate schema
  // Write to src/data/comparisons/{slug}.json
  // Log progress
}

2.3 "Best of" pages — Batch 1 (20 trang)

Các trang "best X for Y" convert affiliate tốt hơn comparison:

best-hosting-for-solidjs
best-hosting-for-nextjs
best-database-for-startups
best-frontend-framework-2026
best-css-framework-2026
best-javascript-runtime-2026
best-orm-for-typescript
best-free-hosting-2026
best-headless-cms-2026
best-backend-framework-nodejs
best-react-alternative-2026
best-vscode-alternative-2026
best-ci-cd-platform-2026
best-api-testing-tool-2026
best-monitoring-tool-2026
best-auth-service-2026
best-email-service-developers
best-payment-gateway-2026
best-serverless-platform-2026
best-static-site-generator-2026

Phase 3 — Monetization Setup (Ngày 7-10)

3.1 AdSense

  • Đăng ký Google AdSense (cần ít nhất 15-20 trang content chất lượng)
  • Placement strategy:
Trang comparison:
  - Leaderboard (728x90) — dưới H1, trên intro
  - In-article (native) — giữa bài, sau category thứ 2-3
  - Sidebar (300x250) — sticky trên desktop
  - Bottom (728x90) — trước related comparisons

Trang "best of":
  - Leaderboard — trên
  - Sau mỗi tool recommendation (in-feed)
  - Bottom
  • Auto ads ON nhưng exclude: header, footer, navigation
  • Ads.txt file

3.2 Affiliate Programs

Program Commission Cookie Apply
Cloudflare Referral program partners.cloudflare.com
Vercel Enterprise referral vercel.com/partners
DigitalOcean $200/referral 30 days do.co/affiliate
Hostinger 40-60% 30 days hostinger.com/affiliates
Udemy 10-15% 7 days udemy.com/affiliate
Frontend Masters 20-30% Apply direct
AWS 3-8% 24h affiliate-program.amazon.com
Namecheap 20-35% 30 days namecheap.com/affiliates
PlanetScale Referral Check availability
Railway Credits referral railway.app
Impact/ShareASale Aggregator Varies Nhiều SaaS programs

3.3 Affiliate integration

// src/data/affiliates.json
{
  "vercel": {
    "name": "Vercel",
    "url": "https://vercel.com/?ref=YOUR_ID",
    "cta": "Try Vercel Free →",
    "description": "Deploy trong 30 giây"
  },
  "digitalocean": {
    "name": "DigitalOcean",
    "url": "https://m.do.co/YOUR_ID",
    "cta": "Get $200 Free Credit →",
    "description": "Cloud hosting cho developers"
  }
}

Rules:

  • Mỗi comparison page: 2-3 affiliate CTAs max
  • CTA phải relevant với content (đừng nhét hosting vào bài so sánh CSS frameworks)
  • Disclosure: "This page contains affiliate links" — bắt buộc cho FTC compliance
  • rel="nofollow sponsored" trên mọi affiliate link

Phase 4 — Scale Content (Tuần 2-4)

4.1 Mở rộng content (thêm 150 trang)

  • Thêm cặp so sánh mới theo Google Search Console data (xem keyword nào impression cao)
  • Agent viết blog posts (tutorials ngắn 800-1500 từ) internal link về comparison pages
  • Thêm alternative pages: "Top 5 React Alternatives 2026" — link về từng comparison

4.2 Content calendar

Tuần 2: +50 comparison pages (tổng 100)
Tuần 3: +50 comparison + 20 "best of" pages (tổng 170)
Tuần 4: +30 comparison + 10 blog posts (tổng 210)
Tháng 2: Agent update existing content + thêm 50 trang mới
Tháng 3: Optimize dựa trên data

4.3 Link building (passive)

  • Submit lên Product Hunt, Hacker News (Show HN)
  • Reddit — share comparisons trong relevant subreddits (r/webdev, r/javascript)
  • Dev.to / Hashnode — cross-post blog với canonical URL về site chính
  • GitHub — open source component library hoặc comparison data

Phase 5 — Optimize (Tháng 2+)

5.1 Analytics-driven

Google Search Console:
  → Trang nào impression cao nhưng CTR thấp? → Đổi title/description
  → Keyword nào ranking #5-20? → Agent expand content cho trang đó
  → Query mới xuất hiện? → Agent tạo trang mới

Google Analytics:
  → Trang nào bounce rate cao? → Cải thiện content
  → Trang nào time-on-page cao? → Thêm affiliate CTA
  → User flow? → Tối ưu internal linking

5.2 A/B test

  • Vị trí AdSense (trên vs dưới fold)
  • CTA text ("Try Free" vs "Get Started" vs "Deploy Now")
  • Verdict card design
  • Có/không sidebar

5.3 Content refresh

  • Agent tự động check: data cũ hơn 3 tháng → research lại → update
  • updatedAt field → Google thấy content fresh

KPIs & Milestones

Milestone Timeline Metric
Ship v1 (50 trang) Ngày 7 Site live, indexed
AdSense approved Ngày 14-21 Ads hiển thị
100 trang indexed Tuần 3 Search Console
First $1 Tuần 4-6 AdSense
10K pageviews/mo Tháng 2-3 GA4
First affiliate sale Tháng 2-3 Affiliate dashboard
50K pageviews/mo Tháng 4-6 GA4
$500/mo revenue Tháng 4-6 AdSense + Affiliate
100K pageviews/mo Tháng 6-9 GA4
$1500+/mo revenue Tháng 6-12 AdSense + Affiliate

Risks & Mitigation

Risk Impact Mitigation
Google penalize AI content Traffic drop Đảm bảo content có giá trị thực, data chính xác, agent research kỹ — không spam
AdSense reject Mất baseline Fallback: Mediavine (cần 50K sessions), hoặc direct ad sales
Low traffic Revenue thấp Double down SEO, thêm long-tail keywords
Affiliate program thay đổi Mất commission Đa dạng hoá — không phụ thuộc 1 program
Content outdated Trust giảm Agent auto-refresh content theo schedule
Competitor clone Traffic chia Tập trung quality + speed — first mover advantage

Budget

Item Cost
Domain $10-15/năm
Hosting (Cloudflare Pages) Free
AI API (agent generate content) $20-50/tháng
Total tháng đầu ~$30-65
Breakeven Tháng 2-3

Checklist tóm tắt

Tuần 1

  • Mua domain, setup Cloudflare
  • Agent scaffold SolidStart project
  • Agent build core components
  • Agent generate 50 comparison pages
  • Deploy, submit sitemap
  • Setup Google Search Console + GA4

Tuần 2

  • Apply AdSense
  • Apply 5-10 affiliate programs
  • Agent generate thêm 50 trang
  • Share trên Reddit, Dev.to, HN

Tuần 3-4

  • AdSense integration
  • Affiliate CTA integration
  • Agent generate thêm 100 trang
  • Bắt đầu blog posts

Tháng 2+

  • Analyze Search Console data
  • Optimize theo data
  • Agent refresh outdated content
  • Scale content tiếp
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment