A modern, SEO-optimized Astro starter template with comprehensive meta tags, social media integration, and essential web development tools.

• 🎯 SEO Optimized: Complete OpenGraph, Twitter Cards, and meta tag setup
• 🔍 Search Engine Friendly: Automated sitemap and robots.txt generation
• ⚡ Modern Tooling: ESLint, Prettier, and TypeScript configuration
• 🚀 CI/CD Ready: GitHub Actions workflows for quality checks and builds
• 🎨 Clean Architecture: Organized component structure with layouts
• 🌐 Social Media Integration: Twitter and OpenGraph meta tags configured
• 🔧 Git Hooks: Husky and lint-staged for automated pre-commit quality checks

/
├── .github/                   # GitHub workflows and templates
│   └── workflows/             # CI/CD automation
│       ├── quality.yml        # Code quality checks
│       ├── build.yml          # Build verification
├── public/                    # Static assets
│   ├── favicon.ico            # Traditional favicon
│   ├── favicon-16x16.png      # Browser favicon (16x16)
│   ├── favicon-32x32.png      # Browser favicon (32x32)
│   ├── apple-touch-icon.png   # iOS home screen icon
│   ├── android-chrome-*.png   # Android icons (192x192, 512x512)
│   ├── og.png                 # OpenGraph/Twitter image
│   └── favicon.svg            # SVG favicon
├── src/
│   ├── assets/                # Build-time assets
│   │   ├── astro.svg
│   │   └── background.svg
│   ├── components/            # Reusable Astro components
│   │   └── Welcome.astro
│   ├── layouts/               # Page layouts
│   │   └── Layout.astro       # Main layout with SEO
│   └── pages/                 # File-based routing
│       └── index.astro
├── astro.config.mjs           # Astro configuration
├── eslint.config.mjs          # ESLint configuration
├── tsconfig.json              # TypeScript configuration
├── .prettierrc.mjs            # Prettier configuration
├── .prettierignore            # Prettier ignore patterns
├── lint-staged.config.js      # Lint-staged configuration
├── .env.example               # Environment variables template
└── package.json

• Framework: Astro - Modern static site generator
• SEO: astro-seo - Comprehensive SEO component
• Integrations:
  • @astrojs/sitemap - Automatic sitemap generation
  • astro-robots-txt - Robots.txt generation
• Development Tools:
  • ESLint with Astro plugin
  • Prettier with Astro formatting
  • TypeScript support
  • Husky for Git hooks
  • lint-staged for pre-commit quality checks
• Package Manager: pnpm for fast installations

1. Clone and install dependencies

   pnpm install

2. Set up environment variables

   cp .env.example .env

3. Start development server

   pnpm dev

4. Open your browser Navigate to http://localhost:4321

This project uses Husky and lint-staged to ensure code quality before commits:

When you commit changes, the following checks run automatically:

• Type Checking: Astro's TypeScript checker validates all .ts, .tsx, and .astro files
• Linting: ESLint fixes code style issues automatically
• Formatting: Prettier formats code according to project standards

The pre-commit hooks are configured in lint-staged.config.js:

{
  "**/*.{ts,tsx,astro}": "pnpm run type-check",
  "**/*.astro": ["eslint --fix", "prettier --write"],
  "**/*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"],
  "**/*.{md,json,yaml,yml,css,scss,sass}": "prettier --write"
}

Git hooks are automatically installed when you run pnpm install via the prepare script. If you need to reinstall them manually:

pnpm run prepare

Create a .env file in the root directory:

SITE_URL=https://your-domain.com
APP_ENV=production

The Layout.astro includes comprehensive SEO setup:

• Meta Tags: Title, description, keywords, author
• OpenGraph: Complete social media preview setup
• Twitter Cards: Large image cards with metadata
• Favicons: Full cross-platform icon support
• Structured Data: Basic website structured data

1. Update site information in src/layouts/Layout.astro
2. Modify social media handles in the Twitter configuration
3. Replace favicon files in the public/ directory
4. Update the OpenGraph image (public/og.png)

• astro - Core framework
• astro-seo - SEO component library
• @astrojs/sitemap - Sitemap generation
• astro-robots-txt - Robots.txt generation

• eslint + eslint-plugin-astro - Code linting
• prettier + prettier-plugin-astro - Code formatting
• typescript-eslint - TypeScript linting
• husky - Git hooks management
• lint-staged - Pre-commit quality checks
• Various configuration plugins

This starter includes automated GitHub Actions workflows for continuous integration and deployment:

The .github/workflows/ directory contains the following CI/CD pipelines:

• Code Quality (quality.yml): Automated code quality checks

  • Runs on push/PR to main/develop branches
  • TypeScript checking with astro check
  • ESLint code linting
  • Prettier formatting validation
  • Security audit with pnpm audit

• Build (build.yml): Build verification

  • Runs after Code Quality workflow completes successfully
  • Uses pnpm to install dependencies and build the project
  • Validates that the project compiles correctly

Recommended platforms:

• Netlify: Automatic builds from repository with Git integration
• Cloudflare Workers: Serverless deployment with global CDN
• GitHub Pages: Static site hosting
• Any static hosting provider

1. GitHub Actions run automatically on push/PR:

   • Quality checks must pass before builds run
   • Failed quality checks prevent unnecessary builds

2. For Netlify deployment:

   • Connect repository to Netlify
   • Set SITE_URL and APP_ENV environment variable in Netlify dashboard
   • Netlify will build directly from source

• Astro Documentation
• Astro Discord Community
• SEO Best Practices

This project is licensed under the MIT License. See the LICENSE file for details.