Skip to main content

Tutorial: Build a Homepage

Build a complete company homepage with hero, features, testimonials, and CTA — then deploy it live in under 5 minutes.

Prerequisites​

  • SpiderIQ credentials (Bearer token or PAT)
  • MCP server connected (see Quick Install)

Step 1: Read the Content Reference​

MCP: template_get_help

This returns the full reference (~2,867 tokens YAML). Skim it to see available block types and template variables.

Step 2: Configure Site Settings​

PATCH /api/v1/dashboard/content/settings
{
  "site_name": "Acme Corp",
  "site_tagline": "Building the future of work",
  "primary_color": "#2563eb",
  "logo_dark_url": "https://media.cdn.spideriq.ai/branding/acme-logo-white.svg",
  "logo_light_url": "https://media.cdn.spideriq.ai/branding/acme-logo-dark.svg",
  "google_analytics_id": "G-XXXXXXXXXX",
  "social_links": {
    "twitter": "https://twitter.com/acmecorp",
    "linkedin": "https://linkedin.com/company/acme"
  }
}

Step 3: Set Up Navigation​

PUT /api/v1/dashboard/content/navigation/header
{
  "items": [
    { "label": "Home", "url": "/", "order": 0 },
    { "label": "Features", "url": "/features", "order": 1 },
    { "label": "Pricing", "url": "/pricing", "order": 2 },
    { "label": "Blog", "url": "/blog", "order": 3 },
    { "label": "Contact", "url": "/contact", "order": 4 }
  ]
}
PUT /api/v1/dashboard/content/navigation/footer
{
  "items": [
    {
      "label": "Product",
      "url": "#",
      "order": 0,
      "children": [
        { "label": "Features", "url": "/features", "order": 0 },
        { "label": "Pricing", "url": "/pricing", "order": 1 },
        { "label": "Changelog", "url": "/changelog", "order": 2 }
      ]
    },
    {
      "label": "Company",
      "url": "#",
      "order": 1,
      "children": [
        { "label": "About", "url": "/about", "order": 0 },
        { "label": "Blog", "url": "/blog", "order": 1 },
        { "label": "Careers", "url": "/careers", "order": 2 }
      ]
    },
    {
      "label": "Legal",
      "url": "#",
      "order": 2,
      "children": [
        { "label": "Privacy", "url": "/privacy", "order": 0 },
        { "label": "Terms", "url": "/terms", "order": 1 }
      ]
    }
  ]
}

Step 4: Create the Homepage​

The homepage uses slug home (this is the special slug that renders at /).

POST /api/v1/dashboard/content/pages
{
  "title": "Acme Corp — Building the Future of Work",
  "slug": "home",
  "template": "landing",
  "seo_title": "Acme Corp — AI-Powered Productivity Platform",
  "seo_description": "Acme Corp helps teams ship 10x faster with AI-powered workflows, real-time collaboration, and automated deployment.",
  "blocks": [
    {
      "id": "hero-1",
      "type": "hero",
      "data": {
        "headline": "Ship 10x Faster with AI",
        "subheadline": "The productivity platform that turns your ideas into production code in minutes, not months.",
        "cta_text": "Start Free Trial",
        "cta_url": "/pricing",
        "background_image_url": "https://media.cdn.spideriq.ai/content/hero-gradient.webp"
      }
    },
    {
      "id": "stats-1",
      "type": "stats_bar",
      "data": {
        "stats": [
          { "value": "10,000+", "label": "Teams" },
          { "value": "99.9%", "label": "Uptime" },
          { "value": "50M+", "label": "Tasks Completed" },
          { "value": "4.9/5", "label": "Rating" }
        ]
      }
    },
    {
      "id": "features-1",
      "type": "features_grid",
      "data": {
        "headline": "Everything You Need to Ship",
        "features": [
          {
            "title": "AI Code Generation",
            "description": "Generate production-ready code from natural language descriptions. Supports 20+ languages.",
            "icon": "code"
          },
          {
            "title": "Real-Time Collaboration",
            "description": "Work together in real-time with live cursors, comments, and instant syncing.",
            "icon": "users"
          },
          {
            "title": "One-Click Deploy",
            "description": "Deploy to production with a single click. Zero-downtime rollbacks included.",
            "icon": "rocket"
          },
          {
            "title": "Built-in Analytics",
            "description": "Track performance, errors, and user behavior without any third-party tools.",
            "icon": "chart"
          }
        ]
      }
    },
    {
      "id": "testimonials-1",
      "type": "testimonials",
      "data": {
        "testimonials": [
          {
            "quote": "Acme cut our deployment time from 3 hours to 30 seconds. Our entire engineering team switched within a week.",
            "author": "Sarah Chen",
            "role": "VP Engineering",
            "company": "TechFlow Inc."
          },
          {
            "quote": "The AI code generation is genuinely useful. It handles 80% of the boilerplate so we can focus on business logic.",
            "author": "Marcus Rodriguez",
            "role": "CTO",
            "company": "DataPulse"
          }
        ]
      }
    },
    {
      "id": "cta-1",
      "type": "cta_section",
      "data": {
        "headline": "Ready to Ship Faster?",
        "description": "Join 10,000+ teams already using Acme. Free 14-day trial, no credit card required.",
        "cta_text": "Start Free Trial",
        "cta_url": "/pricing"
      }
    }
  ]
}

Step 5: Publish the Page​

POST /api/v1/dashboard/content/pages/{page_id}/publish

Replace {page_id} with the UUID returned in Step 4.

Step 6: Apply Theme & Deploy​

# Apply the default Liquid theme
POST /api/v1/dashboard/templates/apply-theme
{ "theme": "default" }

# Deploy to Cloudflare edge
POST /api/v1/dashboard/content/deploy

Step 7: Verify​

# Check deploy status
GET /api/v1/dashboard/content/deploy/status

# Visit your site
curl -sL https://yoursite.com/ | grep "Acme Corp"

Your homepage is live.

What's Next?​