Astro Boom! 💥

Boom! Create production-ready static sites in seconds. A powerful CLI tool that scaffolds modern websites with Astro, Tailwind CSS, Sveltia CMS, and automatic deployment to Netlify.

Features

🚀 Modern Stack

• Astro - Lightning-fast static site generator
• Tailwind CSS - Utility-first CSS framework
• MDX - Markdown with JSX components
• Sveltia CMS - Modern, lightweight Git-based CMS (replaces Decap CMS)
• Pagefind - Static search that works offline
• Netlify Forms - Serverless form handling
• Plausible Analytics - Privacy-first analytics

📦 Out of the Box

• Customizable content collections (choose News/Blog/Articles, People/Team)
• Pre-configured content types with empty state handling
• Responsive navigation and footer
• Contact and volunteer forms
• Event management with date filtering
• SEO-friendly structure
• Accessibility-first approach
• 90-100 Lighthouse score

🎨 Beautiful CLI

• Interactive setup with Ink (React for CLIs)
• Progress indicators and error handling
• GitHub repository creation
• Automatic Netlify deployment

Installation

npm install -g astro-boom

Or use directly with npx (recommended):

npx astro-boom

Usage

Interactive Mode (Default)

Run the CLI and follow the interactive prompts:

npx astro-boom

# Or after global install:
astro-boom

The CLI will guide you through:

1. Project name - Your site's directory name
2. Content section - Choose between News, Blog, or Articles
3. Members section - Choose between People or Team
4. GitHub repository - Optionally create a private GitHub repo
5. Netlify deployment - Optionally deploy to Netlify
6. Analytics - Choose between Plausible or none

Non-Interactive Mode

For CI/CD pipelines or quick scaffolding:

# Create project only
npx astro-boom --non-interactive my-project-name

# Create, install deps, and start dev server automatically
npx astro-boom --non-interactive --auto my-project-name

This creates a project with default settings (News/Team labels, no GitHub, no Netlify, no analytics).

Automatic Setup

After creating a project, Astro Boom will ask if you want to automatically:

• Install dependencies
• Start the development server

In interactive mode, you'll be prompted. In non-interactive mode, use the --auto flag.

Quick Start Example

# Create a new site
npx astro-boom

# Navigate to your project
cd your-project-name

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

your-site/
├── src/
│   ├── content/          # Content collections
│   │   ├── pages/        # Static pages
│   │   ├── [news/blog/articles]/  # Your chosen content type
│   │   ├── events/       # Events
│   │   └── [people/team]/  # Your chosen members type
│   ├── layouts/          # Page layouts
│   ├── components/       # Reusable components
│   └── pages/            # Astro pages
│       ├── [news/blog/articles].astro  # Content list page
│       ├── [news/blog/articles]/       # Content detail pages
│       ├── events.astro  # Events list page
│       ├── events/       # Event detail pages
│       └── [people/team].astro  # Members page
├── public/
│   ├── admin/           # Sveltia CMS admin panel
│   └── uploads/         # Media uploads
├── astro.config.mjs     # Astro configuration
├── tailwind.config.mjs  # Tailwind configuration
└── netlify.toml         # Netlify configuration

Content Management

Access the CMS at /admin after deploying to Netlify:

1. Enable Identity in Netlify dashboard
2. Set up Git Gateway
3. Invite users or enable registration
4. Start editing content through the web interface

Note: This project uses Sveltia CMS, a modern, fast alternative to Decap/Netlify CMS with:

• 3x smaller bundle size (< 500KB vs 1.5MB)
• Faster content loading with GraphQL
• Better mobile support
• No React dependency conflicts

Available Scripts

After creating your site, these scripts are available:

# Start development server with hot reload
npm run dev             # → http://localhost:4321

# Build for production + generate search index
npm run build

# Preview production build
npm run preview

Building and Deployment

Build locally

npm run build

Deploy to Netlify

Option 1: Through CLI (if Netlify CLI is installed)

netlify deploy --dir=dist --prod

Option 2: Through Netlify Dashboard

1. Connect your GitHub repository
2. Set build command: npm run build
3. Set publish directory: dist
4. Deploy!

Customization

Collection Names

During setup, you can choose custom names for your content sections:

• Content: News, Blog, or Articles
• Members: People or Team

These choices affect URLs, navigation labels, and CMS configuration throughout your site.

Colors and Typography

Edit tailwind.config.mjs to customize colors and fonts:

theme: {
  extend: {
    colors: {
      primary: '#your-color',
      secondary: '#your-color',
    },
    fontFamily: {
      sans: ['YourFont', 'system-ui', 'sans-serif'],
    },
  },
}

Add New Content Types

1. Define collection in /src/content/config.ts
2. Add to CMS config in /public/admin/config.yml
3. Create display components

Forms

Add new Netlify Forms by including the data attribute:

<form name="volunteer" method="POST" data-netlify="true">
  <!-- Your form fields -->
</form>

Environment Variables

For Plausible Analytics, update the domain in BaseLayout.astro:

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

Requirements

• Node.js 18+
• npm or yarn
• Git (for GitHub integration)
• GitHub CLI (optional, for repo creation)
• Netlify CLI (optional, for deployment)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Beez Fedia

Support

For issues and feature requests, please visit the GitHub repository.

💥 Boom! Built with ❤️ by Beez Fedia