Creating New Astro Pages

🎯 Quick Start Template

Every new page should follow this exact structure:

---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Your Page Title • MikesBlogDesign">

<main>
  <div class="content-container">
    
    <h1>Your Page Heading</h1>
    <p class="subtitle">Optional subtitle text</p>

    <!-- Your content here -->

  </div>
</main>

</BaseLayout>

📁 File Structure Overview

Core Files You Need to Know

src/
├── components/
│   ├── Header.astro          ← Site header (auto-included)
│   └── Footer.astro          ← Site footer (auto-included)
├── layouts/
│   └── BaseLayout.astro      ← THE MAGIC WRAPPER
├── pages/
│   ├── index.astro           ← Homepage (/)
│   ├── about.astro           ← About page (/about)
│   └── your-new-page.astro   ← Your page (/your-new-page)
└── styles/
    └── global.css            ← All site styles

🎨 Available CSS Classes

Use these pre-built classes from global.css:

<div class="content-container">
  <!-- Your content -->
</div>

<p class="subtitle">Your subtitle here</p>

<div class="service-grid">
  <div class="service-card">...</div>
  <div class="service-card">...</div>
</div>

🎨 Design System

CSS Variables (from global.css)

--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
--accent-color: #667eea
--accent-hover: #764ba2
--text-color: #2d3748
--text-light: #718096
--light-bg: #f7fafc
--card-bg: #ffffff

Typography

• Font Family: 'Inter' (Google Fonts)
• H1: Gradient text effect (use default styles)
• H2: Gradient text, centered, 2.5rem
• Body: Line height 1.7, color var(--text-color)

✅ Best Practices Checklist

🚀 Common Page Patterns

Pattern 1: Simple Content Page

<BaseLayout title="Page Title • MikesBlogDesign">
<main>
  <div class="content-container">
    <h1>Main Heading</h1>
    <p class="subtitle">Subtitle</p>
    
    <section>
      <h2>Section 1</h2>
      <p>Content here...</p>
    </section>
  </div>
</main>
</BaseLayout>

Pattern 2: Grid Layout Page

<BaseLayout title="Services • MikesBlogDesign">
<main>
  <div class="content-container">
    <h1>Our Services</h1>
    
    <div class="service-grid">
      <div class="service-card">
        <h3>Service 1</h3>
        <p>Description...</p>
        <a href="#" class="card-link">Learn More</a>
      </div>
      <!-- More cards... -->
    </div>
  </div>
</main>
</BaseLayout>

Pattern 3: Hero Section Page

<BaseLayout title="Welcome • MikesBlogDesign">
<section class="hero">
  <h1>Welcome to Our Site</h1>
  <p>Tagline here</p>
</section>

<main>
  <div class="content-container">
    <!-- Rest of content -->
  </div>
</main>
</BaseLayout>

🔧 Development Workflow

1. Create the file: Add your-page.astro in src/pages/
2. Copy template: Use the Quick Start Template above
3. Add content: Write your HTML inside the content-container
4. Test locally: Run npm run dev and visit http://localhost:4321/your-page
5. Check responsive: Resize browser to test mobile view
6. Deploy: git add . && git commit -m "Add new page" && git push

⚠️ Common Mistakes to Avoid

• ❌ Don't use Tailwind CSS classes (not installed)
• ❌ Don't forget the BaseLayout wrapper
• ❌ Don't skip the .content-container (content will be edge-to-edge)
• ❌ Don't manually add Header/Footer (BaseLayout does this)
• ❌ Don't use inline styles (use global.css classes)
• ❌ Don't create multiple h1 tags on one page

📚 File Naming Conventions

• URL-friendly: Use lowercase, hyphens for spaces
• Example: about-us.astro → /about-us
• Index files: index.astro → / (homepage)
• Nested routes: Create folders with index.astro inside