Oscar R.C. | Software Architect & Full-Stack Developer

## Astro Static Site Generation

Static Site Generation (SSG) represents the pinnacle of web performance, and Astro excels at creating lightning-fast static sites. This comprehensive guide explores how to leverage Astro’s SSG capabilities to build websites that load instantly, rank highly in search engines, and provide exceptional user experiences.

### Understanding Static Site Generation

What is SSG?

> Pre-built Pages: All pages are generated at build time
> Static Assets: HTML, CSS, and JavaScript are pre-compiled
> CDN Distribution: Content can be served from global CDNs
> Zero Runtime: No server processing required for page requests

Benefits of SSG

> Performance: Pages load instantly with minimal JavaScript
> SEO: Fully rendered HTML for search engine crawlers
> Security: No server-side vulnerabilities
> Scalability: Handle massive traffic with ease
> Cost: Host on CDNs for minimal hosting costs

When to Use SSG

> Content Sites: Blogs, documentation, marketing sites
> E-commerce: Product catalogs, landing pages
> Portfolios: Personal and business websites
> Documentation: Technical docs, API references

### Astro SSG Architecture

Build Process

1
# Development server
2
npm run dev
3

4
# Production build
5
npm run build
6

7
# Preview build
8
npm run preview

Output Structure

1
dist/
2
├── index.html
3
├── about.html
4
├── blog/
5
│   ├── post-1.html
6
│   └── post-2.html
7
├── _astro/
8
│   ├── page.css
9
│   └── page.js
10
└── assets/
11
    └── images/

Configuration

1
import { defineConfig } from 'astro/config';
2

3
export default defineConfig({
4
  output: 'static', // Default for SSG
5
  site: 'https://yourdomain.com',
6
  build: {
7
    assets: '_astro',
8
  },
9
});

### Content Management

Content Collections

1
import { defineCollection, z } from 'astro:content';
2

3
const blog = defineCollection({
4
  schema: z.object({
5
    title: z.string(),
6
    description: z.string(),
7
    pubDate: z.coerce.date(),
8
    updatedDate: z.coerce.date().optional(),
9
    heroImage: z.string().optional(),
10
    tags: z.array(z.string()).default([]),
11
    draft: z.boolean().default(false),
12
  }),
13
});
14

15
export const collections = { blog };

Querying Content

1
import { getCollection } from 'astro:content';
2

3
const allPosts = await getCollection('blog');
4
const publishedPosts = allPosts
5
  .filter(post => !post.data.draft)
6
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

Dynamic Routes

1
import { getCollection } from 'astro:content';
2

3
export async function getStaticPaths() {
4
  const posts = await getCollection('blog');
5
  return posts.map(post => ({
6
    params: { slug: post.slug },
7
    props: { post },
8
  }));
9
}
10

11
const { post } = Astro.props;

### Performance Optimization

Image Optimization

1
---
2
import { Image } from 'astro:assets';
3
---
4

5
<Image
6
  src={post.data.heroImage}
7
  alt={post.data.title}
8
  width={800}
9
  height={400}
10
  format="webp"
11
  quality={80}
12
/>

Code Splitting

1
---
2
// Only load JavaScript when needed
3
import InteractiveComponent from '../components/InteractiveComponent.tsx';
4
---
5

6
<div class="page">
7
  <h1>Static content</h1>
8
  <InteractiveComponent client:load />
9
</div>

Asset Optimization

1
export default defineConfig({
2
  build: {
3
    assets: '_astro',
4
    inlineStylesheets: 'auto',
5
  },
6
  vite: {
7
    build: {
8
      rollupOptions: {
9
        output: {
10
          manualChunks: {
11
            vendor: ['react', 'react-dom'],
12
          },
13
        },
14
      },
15
    },
16
  },
17
});

### SEO Optimization

Meta Tags

1
---
2
export const prerender = true;
3

4
const { post } = Astro.props;
5
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
6
---
7

8
<html lang="en">
9
  <head>
10
    <meta charset="utf-8" />
11
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
12
    <meta name="viewport" content="width=device-width" />
13
    <meta name="generator" content={Astro.generator} />
14
    <title>{post.data.title}</title>
15
    <meta name="description" content={post.data.description} />
16
    <link rel="canonical" href={canonicalURL} />
17
  </head>
18
  <body>
19
    <slot />
20
  </body>
21
</html>

Structured Data

1
---
2
const { post } = Astro.props;
3
const structuredData = {
4
  "@context": "https://schema.org",
5
  "@type": "BlogPosting",
6
  "headline": post.data.title,
7
  "description": post.data.description,
8
  "datePublished": post.data.pubDate,
9
  "author": {
10
    "@type": "Person",
11
    "name": "Your Name"
12
  }
13
};
14
---
15

16
<script type="application/ld+json" set:html={JSON.stringify(structuredData)} />

Sitemap Generation

1
import sitemap from '@astrojs/sitemap';
2

3
export default defineConfig({
4
  integrations: [sitemap()],
5
  site: 'https://yourdomain.com',
6
});

### Advanced SSG Features

Incremental Static Regeneration

1
export async function GET() {
2
  // Trigger rebuild of specific pages
3
  await fetch(`${process.env.SITE_URL}/api/revalidate`, {
4
    method: 'POST',
5
    headers: {
6
      'Content-Type': 'application/json',
7
    },
8
    body: JSON.stringify({ paths: ['/blog', '/about'] }),
9
  });
10

11
  return new Response('OK');
12
}

Build-time Data Fetching

1
---
2
// Fetch data at build time
3
const posts = await fetch('https://api.example.com/posts').then(r => r.json());
4
const processedPosts = posts.map(post => ({
5
  ...post,
6
  slug: post.title.toLowerCase().replace(/\s+/g, '-'),
7
}));
8
---
9

10
<div class="posts">
11
  {processedPosts.map(post => (
12
    <article class="post">
13
      <h2>{post.title}</h2>
14
      <p>{post.excerpt}</p>
15
    </article>
16
  ))}
17
</div>

Environment Variables

1
PUBLIC_SITE_URL=https://yourdomain.com
2
API_KEY=your-api-key

1
---
2
// Use environment variables
3
const siteUrl = import.meta.env.PUBLIC_SITE_URL;
4
const apiKey = import.meta.env.API_KEY;
5
---

### Deployment Strategies

CDN Deployment

1
[build]
2
  command = "npm run build"
3
  publish = "dist"
4

5
[[redirects]]
6
  from = "/*"
7
  to = "/index.html"
8
  status = 200

GitHub Pages

1
name: Deploy to GitHub Pages
2

3
on:
4
  push:
5
    branches: [ main ]
6

7
jobs:
8
  deploy:
9
    runs-on: ubuntu-latest
10
    steps:
11
      - uses: actions/checkout@v2
12
      - uses: actions/setup-node@v2
13
        with:
14
          node-version: '18'
15
      - run: npm install
16
      - run: npm run build
17
      - uses: peaceiris/actions-gh-pages@v3
18
        with:
19
          github_token: ${{ secrets.GITHUB_TOKEN }}
20
          publish_dir: ./dist

Vercel Deployment

1
{
2
  "buildCommand": "npm run build",
3
  "outputDirectory": "dist",
4
  "framework": "astro"
5
}

### Performance Monitoring

Core Web Vitals

1
---
2
// Add performance monitoring
3
---
4

5
<script>
6
  // Monitor Core Web Vitals
7
  import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
8

9
  getCLS(console.log);
10
  getFID(console.log);
11
  getFCP(console.log);
12
  getLCP(console.log);
13
  getTTFB(console.log);
14
</script>

Analytics Integration

1
---
2
// Google Analytics
3
---
4

5
<script>
6
  // Google Analytics 4
7
  gtag('config', 'GA_MEASUREMENT_ID');
8
</script>

### Best Practices

Content Strategy

> Consistent Publishing: Regular content updates
> Quality Content: Focus on valuable, original content
> SEO Optimization: Keyword research and optimization
> User Experience: Intuitive navigation and design

Technical Excellence

> Performance: Regular performance audits
> Accessibility: WCAG compliance
> Security: Implement security headers
> Monitoring: Track performance metrics

Maintenance

> Regular Updates: Keep dependencies current
> Content Audits: Review and update old content
> Performance Monitoring: Track and improve metrics
> User Feedback: Incorporate user suggestions

### Future Considerations

Emerging Technologies

> Edge Computing: Deploy to edge locations
> WebAssembly: High-performance client-side code
> Progressive Enhancement: Advanced user experiences
> AI Integration: Content generation and optimization

Platform Evolution

> Astro Updates: Stay current with framework changes
> Web Standards: Adopt new web technologies
> Performance: Continuous optimization
> User Experience: Evolving design patterns

Astro’s Static Site Generation capabilities provide the foundation for building exceptional web experiences. By leveraging SSG, you can create websites that load instantly, rank highly in search engines, and provide outstanding user experiences while maintaining developer productivity.

The key to success with Astro SSG is understanding the balance between static generation and dynamic functionality, and leveraging the framework’s unique capabilities to create optimal user experiences.