Landing Page Platform Deployment

Purpose

This recipe deploys a landing page to production on a custom domain with SSL, CDN, and analytics — covering six platforms (Vercel, Netlify, Cloudflare Pages, Webflow, Framer, Carrd) with complete DNS configuration and verification steps. The output is a live, publicly accessible landing page at your own domain with automatic HTTPS, global CDN distribution, and basic analytics tracking. [src1]

Prerequisites

• Landing page files or project — static HTML/CSS/JS, a framework project (Next.js, Astro), or a no-code project in Webflow/Framer/Carrd
• Registered domain name — purchased from Cloudflare Registrar, Namecheap, or Porkbun ($10-15/yr)
• Hosting platform account — free account at Vercel, Netlify, Cloudflare Pages, Webflow, Framer, or Carrd
• DNS management access — ability to edit A records and CNAME records at your domain registrar
• Git repository (developer path only) — project pushed to GitHub, GitLab, or Bitbucket

Constraints

• DNS propagation can take 5 minutes to 48 hours. Do not assume instant availability after changing records. [src1]
• All six platforms auto-provision SSL via Let's Encrypt or equivalent. Never purchase a separate SSL certificate. [src1] [src3]
• Apex domains (example.com) require A records; subdomains (www.example.com) use CNAME records. CNAME records cannot coexist with other record types on the same hostname per DNS specification. [src2]
• Cloudflare Pages offers unlimited bandwidth on free tier; Vercel and Netlify cap at 100 GB/mo on free tier. [src6]
• Webflow requires a paid Site plan ($14/mo minimum) to use a custom domain. Framer requires $5/mo. Carrd requires Pro Standard ($19/yr). [src4] [src5]

Tool Selection Decision

Which path?
├── User is non-technical AND budget = free
│   └── PATH A: Carrd Free (*.carrd.co subdomain only, no custom domain)
├── User is non-technical AND budget > $0
│   └── PATH B: No-Code Paid — Carrd Pro ($19/yr) / Framer ($5/mo) / Webflow ($14/mo)
├── User is developer AND budget = free
│   └── PATH C: Developer Free — Vercel / Netlify / Cloudflare Pages (Git deploy)
└── User is developer AND budget > $0
    └── PATH D: Developer Paid — Vercel Pro / Netlify Pro / Cloudflare Pro

Execution Flow

Step 1: Choose Platform and Create Account

Duration: 5 minutes · Tool: Web browser

Select platform based on the decision tree above, then create a free account. For developer platforms (Vercel, Netlify, Cloudflare Pages), sign up with your GitHub account for seamless Git integration. [src1] [src2]

Platform Selection Quick Reference:
───────────────────────────────────────
Simplest (1-page site):          Carrd Pro ($19/yr)
Best visual editor:              Webflow ($14/mo) or Framer ($5/mo)
Best free tier (developers):     Cloudflare Pages (unlimited bandwidth)
Best Next.js support:            Vercel (first-class integration)
Best all-rounder (developers):   Netlify (Git deploy + forms + functions)

Verify: You can log into the platform dashboard and see the project creation screen. · If failed: Check email for verification link. Some platforms require email confirmation before dashboard access.

Step 2: Deploy the Landing Page

Duration: 5-15 minutes · Tool: Platform dashboard or CLI

Path B (No-Code Paid): For Carrd: Build your page in the editor, click Publish. For Framer: Design in the editor, click Publish in the top-right. For Webflow: Use the Designer, then click Publish to staging or production.

Path C/D (Developer — Vercel):

# Option 1: Import from GitHub (recommended)
# In Vercel dashboard: New Project → Import Git Repository → Select repo

# Option 2: CLI deployment
npm i -g vercel
cd your-landing-page-project
vercel
# Follow prompts: project name, directory, settings

Path C/D (Developer — Netlify):

# Option 1: Import from GitHub
# In Netlify dashboard: Add new site → Import an existing project → GitHub

# Option 2: CLI deployment
npm i -g netlify-cli
cd your-landing-page-project
netlify deploy --prod --dir=.

# Option 3: Drag-and-drop
# Drag your build folder directly onto the Netlify dashboard

Path C/D (Developer — Cloudflare Pages):

# Option 1: Connect Git repository
# In Cloudflare dashboard: Workers & Pages → Create → Pages → Connect to Git

# Option 2: Direct upload via CLI
npm i -g wrangler
cd your-landing-page-project
npx wrangler pages deploy ./dist --project-name=your-project

# Option 3: Drag-and-drop upload in dashboard

Verify: The site loads at the platform-provided subdomain (e.g., your-project.vercel.app, your-project.netlify.app, your-project.pages.dev). [src1] [src2] [src3] · If failed: Check build logs in the platform dashboard. Common issues: missing build command, wrong output directory, or missing dependencies.

Step 3: Register or Prepare Your Custom Domain

Duration: 5-15 minutes · Tool: Domain registrar

If you do not have a domain, register one from a cost-effective registrar.

Registrar Comparison:
───────────────────────────────────────
Cloudflare Registrar:  At-cost pricing (~$10/yr for .com)
Porkbun:               ~$10/yr for .com, simple interface
Namecheap:             ~$11/yr for .com, includes WhoisGuard

Verify: You can log into your registrar and access the DNS management panel. · If failed: If you just registered, wait 5-15 minutes for the registrar to provision the domain.

Step 4: Configure DNS Records

Duration: 5-10 minutes · Tool: Domain registrar DNS panel

Configure DNS to point your domain to your hosting platform. Delete any existing A or AAAA records for the apex domain before adding new ones.

For Vercel: [src1]

Type    Host    Value                       TTL
A       @       76.76.21.21                 Auto
CNAME   www     cname.vercel-dns.com        Auto

For Netlify: [src2]

Type    Host    Value                       TTL
A       @       75.2.60.5                   Auto
CNAME   www     your-site.netlify.app       Auto

# If your DNS provider supports ALIAS/ANAME records (preferred):
ALIAS   @       apex-loadbalancer.netlify.com   Auto

For Cloudflare Pages: [src3]

# If domain is already on Cloudflare DNS (easiest):
# Dashboard → Pages project → Custom domains → Add → enter domain

# If domain is on external DNS:
CNAME   @       your-project.pages.dev      Auto
CNAME   www     your-project.pages.dev      Auto

For Framer: [src4]

# Site Settings → Domains → Connect a domain you own
# Use the IP addresses and CNAME values shown in your Framer dashboard
A       @       [Framer IP 1]               Auto
A       @       [Framer IP 2]               Auto
CNAME   www     [value from Framer dashboard]   Auto

For Carrd: [src5]

# Publish → Custom Domain → enter your domain
# Use the IP addresses shown in Carrd's setup wizard
A       @       [Carrd IP 1]                Auto
A       @       [Carrd IP 2]                Auto
CNAME   www     [value from Carrd dashboard]    Auto

Verify: Run dig +short example.com A to confirm DNS propagation, or use dnschecker.org. · If failed: Verify you deleted conflicting A/AAAA records. If using Cloudflare DNS proxy, check that the proxy status (orange cloud) is set correctly for your platform.

Step 5: Verify SSL/TLS Certificate

Duration: 1-15 minutes (automatic) · Tool: Browser

All six platforms auto-provision SSL certificates after DNS verification succeeds. [src1] [src3]

Verification checklist:
───────────────────────────────────────
1. Visit https://yourdomain.com — loads without certificate warnings
2. Visit https://www.yourdomain.com — loads or redirects to apex
3. Visit http://yourdomain.com — auto-redirects to https://
4. Click padlock icon — certificate shows valid issuer

Verify: All four URLs above load correctly with valid HTTPS. · If failed: Wait 15-30 minutes for SSL provisioning. If still failing, check domain verification in platform dashboard. If using Cloudflare DNS proxy, set SSL mode to "Full" or "Full (Strict)".

Step 6: Add Analytics Tracking

Duration: 5-10 minutes · Tool: Analytics platform + code editor or platform settings

Google Analytics 4 (free):

<!-- Add to <head>, replace G-XXXXXXXXXX with your Measurement ID -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Plausible Analytics (privacy-focused):

<!-- Lightweight, no cookies, GDPR-compliant -->
<script defer data-domain="yourdomain.com"
  src="https://plausible.io/js/script.js"></script>

For no-code platforms: Webflow: Project Settings → Custom Code → Head Code. Framer: Site Settings → General → Custom Code. Carrd: Settings → Head section.

Verify: Visit your landing page, then check the analytics dashboard. GA4 shows real-time data within 30 seconds. · If failed: Check browser console for script loading errors. Ad blockers may block GA4 — test in incognito mode.

Output Schema

{
  "output_type": "deployed_landing_page",
  "format": "live URL + configuration record",
  "columns": [
    {"name": "domain", "type": "string", "description": "Custom domain where landing page is live", "required": true},
    {"name": "platform", "type": "string", "description": "Hosting platform used", "required": true},
    {"name": "ssl_status", "type": "string", "description": "SSL certificate status (valid/pending/error)", "required": true},
    {"name": "dns_records", "type": "string", "description": "A and CNAME records configured", "required": true},
    {"name": "analytics_id", "type": "string", "description": "GA4 Measurement ID or Plausible domain", "required": false},
    {"name": "deployment_url", "type": "string", "description": "Platform subdomain URL for reference", "required": true}
  ],
  "expected_row_count": "1",
  "sort_order": "N/A",
  "deduplication_key": "domain"
}

Quality Benchmarks

If below minimum: Re-check DNS records and SSL certificate status. Run PageSpeed Insights to diagnose load time issues. Test on mobile devices directly.

Error Handling

Cost Breakdown

Anti-Patterns

Wrong: Purchasing a separate SSL certificate

All six platforms auto-provision and renew SSL certificates via Let's Encrypt or equivalent. Buying a separate certificate wastes money and creates configuration conflicts. [src1] [src3]

Correct: Rely on platform-managed SSL

Let the platform handle certificate provisioning automatically after DNS verification.

Wrong: Setting Cloudflare SSL mode to "Flexible" when proxying

Flexible mode creates an unencrypted connection between Cloudflare and the origin server, causing redirect loops when the origin enforces HTTPS. [src6]

Correct: Use Cloudflare SSL mode "Full" or "Full (Strict)"

Always set SSL/TLS encryption mode to "Full (Strict)" to ensure end-to-end encryption when using Cloudflare DNS proxy with platforms that have their own SSL.

Wrong: Deploying without testing mobile responsiveness

Over 60% of landing page traffic comes from mobile. Deploying without mobile testing leads to broken layouts and lost conversions.

Correct: Test on mobile viewport before going live

Use Chrome DevTools device mode (Ctrl+Shift+M) or the platform's responsive preview to verify at 375px width before connecting the custom domain.

When This Matters

Use this recipe when the agent needs to take a completed landing page (HTML files, framework project, or no-code design) and make it live on a custom domain with SSL and analytics. Requires the landing page content to exist already — this recipe handles deployment, DNS, SSL, and analytics only, not page design or content creation.