Skip to content
Astro Starlight Docs Template
Blog

Quick Start

Prerequisites

Section titled “Prerequisites”
  • An existing Astro Starlight project
  • Node.js 18.0.0 or higher
  • Google Analytics 4 Measurement ID (optional but recommended)

Installation

Section titled “Installation”

No installation needed! Use npx to run directly:

Terminal window
npx astro-starlight-docs-template init

Or install globally:

Terminal window
npm install -g astro-starlight-docs-template
astro-starlight-docs-template init

Step-by-Step

Section titled “Step-by-Step”

1. Navigate to Your Project

Section titled “1. Navigate to Your Project”
Terminal window
cd my-astro-docs

2. Run the Optimizer

Section titled “2. Run the Optimizer”
Terminal window
npx astro-starlight-docs-template init

3. Answer the Prompts

Section titled “3. Answer the Prompts”

The CLI will ask you a series of questions:

🚀 Astro Starlight Docs Template v1.0.1


🔍 Checking if this is an Astro Starlight project...


✓ Astro project detected


? Google Analytics Measurement ID: G-XXXXXXXXXX
? Site URL: https://example.com
? Base path: /docs
? Author name: Your Name
? Twitter handle: yourhandle
? Add Cloudflare Web Analytics? No
? Create custom footer? Yes
? Add LLM optimization? Yes

4. Review the Changes

Section titled “4. Review the Changes”

The tool will create/modify:

  • public/cookie-consent.js - Cookie consent banner
  • astro.config.mjs - Analytics and consent mode setup
  • src/components/overrides/Footer.astro - Custom footer (if enabled)
  • public/llms.txt - LLM optimization (if enabled)
  • ASTRO_DOCS_OPTIMIZER.md - Documentation of changes

5. Build and Deploy

Section titled “5. Build and Deploy”
Terminal window
npm run build

Your documentation is now production-ready with:

  • ✅ Google Analytics with Consent Mode v2
  • ✅ GDPR-compliant cookie consent
  • ✅ SEO optimization
  • ✅ LLM support

What Happens Next?

Section titled “What Happens Next?”

For EU Visitors

Section titled “For EU Visitors”
  1. They see a cookie consent banner
  2. Analytics are denied by default
  3. Only after they click “Accept” will tracking begin
  4. They can change settings anytime via the footer link

For Non-EU Visitors

Section titled “For Non-EU Visitors”
  1. No banner shown (cleaner UX)
  2. Analytics granted by default
  3. Footer link available to opt-out if desired
  4. Better measurement quality

Verify It’s Working

Section titled “Verify It’s Working”

1. Run Dev Server

Section titled “1. Run Dev Server”
Terminal window
npm run dev

2. Open in Browser

Section titled “2. Open in Browser”

Visit http://localhost:4321 (or your configured port)

Section titled “3. Check for Cookie Banner”

If you’re in a GDPR region (or using a VPN), you should see the cookie consent banner.

4. Check Google Analytics

Section titled “4. Check Google Analytics”
  • Go to your GA4 property
  • Navigate to Realtime reports
  • Browse your site
  • You should see the visit (if you accepted cookies)

Customization

Section titled “Customization”

Want to customize the setup? Check out:

Troubleshooting

Section titled “Troubleshooting”
  • Banner not showing? Check if you’re in a GDPR region or see Troubleshooting
  • Analytics not working? Verify your GA ID in astro.config.mjs
  • Footer not appearing? Make sure you selected “Yes” for custom footer

Next Steps

Section titled “Next Steps”

Now that your documentation is optimized, learn more about: