Gatsby.js adalah framework berbasis React yang memungkinkan kita membangun website statis yang sangat cepat. Dengan pendekatan JAMstack, Gatsby menghasilkan halaman HTML statis saat build time, sehingga website kamu bisa di-serve langsung dari CDN.

Mengapa Gatsby?

Ada beberapa alasan mengapa Gatsby layak dipertimbangkan:

  1. Performa luar biasa — Pre-rendering dan code splitting otomatis
  2. Developer Experience — Hot reloading, GraphQL data layer
  3. Ekosistem plugin — Ribuan plugin siap pakai
  4. SEO friendly — HTML statis yang mudah di-crawl search engine

Instalasi

Untuk memulai, pastikan kamu sudah menginstall Node.js, lalu jalankan:

npm init gatsby
cd my-gatsby-blog
npm run develop

Website kamu akan berjalan di http://localhost:8000.

Struktur Project

my-gatsby-blog/
├── src/
│   ├── pages/        # Halaman otomatis berdasarkan file
│   ├── components/   # Komponen React reusable
│   └── templates/    # Template untuk halaman dinamis
├── content/
│   └── blog/         # File markdown untuk blog posts
├── gatsby-config.js  # Konfigurasi plugin
└── gatsby-node.js    # API untuk membuat halaman dinamis

Data Layer dengan GraphQL

Salah satu fitur unik Gatsby adalah data layer menggunakan GraphQL. Semua data — baik dari file markdown, CMS, maupun API — bisa diakses melalui satu interface yang konsisten.

export const query = graphql`
  query {
    allMarkdownRemark {
      nodes {
        frontmatter {
          title
          date
        }
      }
    }
  }
`
"Gatsby membuat web development terasa menyenangkan lagi." — Developer yang sudah mencoba

Selamat mencoba Gatsby.js! 🚀