Desktop Commander Landing Page (Astro)

Modern, SEO-optimized landing page for Desktop Commander built with Astro and React.

🚀 Quick Start

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Visit http://localhost:4321 to see the site.

📦 Build for Production

For Custom Domain (desktopcommander.app)

npm run build

This builds with base: '/' and:

• Outputs to docs/ folder
• Generates sitemap.xml
• Adds CNAME file for custom domain
• Creates 404.html fallback
• All assets use root paths: /assets/...

For GitHub Pages Subdirectory (desktop-commander.github.io/main-web-astro)

npm run build:github

This builds with base: '/main-web-astro' and:

• Outputs to docs/ folder
• All assets use subdirectory paths: /main-web-astro/assets/...
• Note: Remove the CNAME file after this build if deploying to subdirectory

Deployment Workflow

Production (Custom Domain):

npm run build
git add docs/
git commit -m "Deploy to production"
git push

GitHub Pages Testing:

npm run build:github
rm docs/CNAME  # Remove CNAME to use subdirectory
git add docs/
git commit -m "Deploy to GitHub Pages subdirectory"
git push

🌐 Deployment (GitHub Pages)

The site is configured to deploy to GitHub Pages from the docs/ folder:

# Build and commit the docs folder
npm run commit-static

# Push to GitHub
git push

GitHub Pages Configuration

1. Go to repository Settings → Pages
2. Set Source: Deploy from docs/ folder on main branch
3. Set Custom Domain: desktopcommander.app
4. GitHub will automatically serve from docs/

The docs/ folder is committed to git (not gitignored) for GitHub Pages deployment.

📁 Project Structure

main-web-astro/
├── astro-src/             # Astro pages and layouts
│   ├── layouts/           # Page layouts
│   └── pages/             # Route pages (.astro files)
├── src/                   # React components and utilities
│   ├── components/        # React components
│   ├── data/              # Data files (prompts, etc)
│   ├── hooks/             # React hooks
│   └── lib/               # Utilities
├── public/                # Static assets
├── docs/                  # Build output (committed for GitHub Pages)
├── package.json           # Dependencies and scripts
└── astro.config.mjs       # Astro configuration

🛠️ Available Scripts

npm run dev             # Start dev server (localhost:4321)
npm run dev:host        # Start dev server (network accessible)
npm run build           # Build for production → docs/
npm run build:dev       # Build for development
npm run preview         # Preview production build
npm run lint            # Run ESLint
npm run serve           # Serve built site from docs/
npm run serve:static    # Serve built site (alias)
npm run serve:docs      # Serve built site (alias)
npm run commit-static   # Build + commit docs/ folder
npm run generate:sitemap # Generate sitemap only

🎨 Tech Stack

• Framework: Astro 5.x
• UI Library: React 18
• Styling: Tailwind CSS + shadcn/ui
• Icons: Lucide React
• Analytics: PostHog
• Build: Vite

📝 Key Features

• ✅ Static site generation (SSG) for optimal SEO
• ✅ React component hydration for interactivity
• ✅ Tailwind CSS for styling
• ✅ shadcn/ui components
• ✅ Dynamic prompt library with individual pages
• ✅ Automatic sitemap generation
• ✅ GitHub Pages ready
• ✅ Custom domain support
• ✅ Hot reload in development

🔧 Configuration

Astro Config (astro.config.mjs)

• Output directory: ./docs (for GitHub Pages)
• Base URL: / (for custom domain)
• Format: directory (clean URLs)

Build Output

• The docs/ folder contains the built static site
• This folder IS committed to git for GitHub Pages
• GitHub Pages serves directly from docs/ on the main branch

🚨 Important Notes

• The docs/ folder IS committed (not gitignored) for GitHub Pages
• Always run npm run build before committing changes
• Use npm run commit-static to build and commit in one step
• CNAME file is auto-generated with custom domain
• 404.html is auto-generated for client-side routing fallback

📚 Documentation

• Astro Documentation
• React Documentation
• Tailwind CSS
• shadcn/ui

🐛 Troubleshooting

Port already in use

# Kill process on port 4321
lsof -ti:4321 | xargs kill -9

Build fails

# Clean and reinstall
rm -rf node_modules package-lock.json
npm install

Docs folder not building

# Ensure build completes
npm run build
# Check for errors in output

📄 License

ISC