Total Ownage

Astro telah menjadi salah satu framework paling populer untuk membangun website yang cepat dan SEO-friendly. Dikombinasikan dengan Bootstrap, kamu bisa membuat website yang tidak hanya performant tapi juga beautiful dan responsive.

Mengapa Astro + Bootstrap?

Kombinasi Astro dan Bootstrap memberikan beberapa keunggulan:

Zero JavaScript by default - Astro hanya mengirim HTML/CSS
Island Architecture - JavaScript hanya dimuat saat diperlukan
Bootstrap ecosystem - Komponen siap pakai dan responsive grid
SEO optimized - Static site generation untuk performa maksimal

Setup Project Baru

Mulai dengan membuat project Astro baru:

npm create astro@latest my-website
cd my-website
npm install bootstrap @popperjs/core

Konfigurasi Bootstrap

Edit file src/layouts/Layout.astro:

---
import 'bootstrap/dist/css/bootstrap.min.css';
---

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
</head>
<body>
    <slot />
    
    <script>
        import 'bootstrap/dist/js/bootstrap.bundle.min.js';
    </script>
</body>
</html>

---
// components/Navbar.astro
---

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="/">Brand</a>
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog">Blog</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Hero Section dengan Bootstrap Grid

<section class="hero bg-light py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold">
                    Build Amazing Websites
                </h1>
                <p class="lead">
                    Kombinasi Astro dan Bootstrap untuk performance maksimal
                </p>
                <a href="/get-started" class="btn btn-primary btn-lg">
                    Get Started
                </a>
            </div>
            <div class="col-lg-6">
                <img src="/hero-image.jpg" alt="Hero" class="img-fluid">
            </div>
        </div>
    </div>
</section>

Optimisasi Performance

1. Lazy Loading Images

<img src="/image.jpg" alt="Description" loading="lazy" class="img-fluid">

2. Critical CSS Inlining

<style>
/* Critical CSS untuk above-the-fold content */
.hero { /* styles */ }
</style>

3. JavaScript Islands

Gunakan client:load hanya untuk komponen yang butuh interaktivity:

<InteractiveComponent client:load />

Best Practices

Minimize Bundle Size
- Import Bootstrap components secara selektif
- Gunakan tree-shaking untuk CSS yang tidak terpakai
SEO Optimization
- Gunakan semantic HTML
- Optimize meta tags
- Implementasi structured data
Accessibility
- Bootstrap sudah ARIA-compliant
- Tambahkan alt text untuk images
- Proper color contrast

Deployment

Deploy ke Netlify atau Vercel:

npm run build
# Upload folder dist/ ke hosting pilihan

Kesimpulan

Astro + Bootstrap adalah kombinasi powerful untuk website modern yang cepat, responsive, dan maintainable. Dengan zero JavaScript by default dan ecosystem Bootstrap yang mature, kamu bisa fokus pada content dan user experience.

Next steps:

Eksplorasi Astro integrations (Tailwind, Vue, React)
Implement advanced features (i18n, CMS integration)
Performance monitoring dan optimization

Tutorial: Membangun Website Modern dengan Astro dan Bootstrap