Skip to content

README.md

Latest commit

 

History

History
118 lines (91 loc) · 2.91 KB

README.md

File metadata and controls

118 lines (91 loc) · 2.91 KB
Raw

Frontend2 - Astro 5 Static Site

Modern static site generator built with Astro 5, featuring component islands architecture and optimal performance.

🚀 Features

  • Astro 5 with latest static site generation capabilities
  • TypeScript for type safety and better development experience
  • Component Islands architecture for optimal performance
  • Zero JavaScript by default - only loads JS when needed
  • Built-in TypeScript checking with @astrojs/check
  • Fast development server with hot module replacement
  • Static site generation for optimal SEO and performance
  • Multi-framework support (React, Vue, Svelte, etc.)

🛠️ Setup

  1. Install dependencies:
yarn install
  1. Start development server:
yarn dev
  1. Build for production:
yarn build
  1. Preview production build:
yarn preview

📁 Project Structure

src/
├── components/          # Astro components
│   └── Card.astro
├── layouts/            # Page layouts
│   └── Layout.astro
├── pages/              # File-based routing
│   └── index.astro
└── styles/             # Global styles
public/                 # Static assets
├── favicon.svg
└── images/

🧞 Available Scripts

Command Action
yarn dev Start development server at localhost:4321
yarn build Build production site to ./dist/
yarn preview Preview production build locally
yarn astro Run Astro CLI commands

🎯 Astro Best Practices

Component Architecture

  • Astro Components (.astro) for static content
  • Framework Components for interactive elements
  • Islands Architecture - only load JS when needed

Performance

  • Static Generation by default
  • Zero JavaScript unless explicitly needed
  • Optimized images and assets
  • CSS scoping for component isolation

SEO & Accessibility

  • Semantic HTML structure
  • Meta tags and Open Graph support
  • Structured data for search engines
  • Accessibility best practices

🚀 Deployment

Static Hosting

# Build for production
yarn build

# Deploy dist/ folder to any static host
# - Vercel, Netlify, GitHub Pages, etc.

Docker

# Build Docker image
docker build -t frontend2 .

# Run container
docker run -p 4321:4321 frontend2

🔗 Related Projects

  • Frontend - React + Material-UI (port 3000)
  • Frontend1 - React + Tailwind + DaisyUI (port 5173)
  • Frontend3 - Astro 5 (port 4321)
  • Frontend4 - Next.js 15 (port 3002)

📚 Resources

📄 License

MIT License - see LICENSE file for details.