Belajar Gatsby dari Nol: Bangun Website Super Cepat dalam Hitungan Menit

Apa Itu Gatsby?

Gatsby adalah framework open-source berbasis React yang digunakan untuk membangun website statis dan performa tinggi. Berbeda dengan CMS tradisional yang mengandalkan server, Gatsby merender konten jadi file HTML saat build—hasilnya? Cepat, aman, dan SEO-friendly.

Kenapa Gatsby Cocok untuk Pemula?

• ✅ Tidak butuh backend (cukup file statis)
• ✅ Komunitas besar dan dokumentasi lengkap
• ✅ Bisa integrasi dengan CMS modern (Contentful, Strapi, dll)
• ✅ Cocok untuk blog, portofolio, landing page, dan dokumentasi

---

Persiapan Sebelum Memulai

Sebelum mulai, pastikan kamu sudah install:

• Node.js versi 14+
• npm atau yarn
• Gatsby CLI

Install Gatsby CLI (Command Line Interface):

npm install -g gatsby-cli

---

Langkah-Langkah Membuat Website Pertamamu dengan Gatsby

1. Buat Proyek Baru

gatsby new gatsby-pertamaku
cd gatsby-pertamaku

2. Jalankan Proyek

gatsby develop

Akses hasilnya di browser: http://localhost:8000

Kamu juga bisa buka halaman admin/developer di http://localhost:8000/__graphql

---

Mengenal Struktur Folder Gatsby

Setelah membuat proyek, kamu akan melihat struktur seperti ini:

├── src/
│   ├── pages/
│   └── components/
├── gatsby-config.js
├── gatsby-node.js
└── static/

Penjelasan Singkat:

• src/pages/ → Tempat kamu membuat halaman (otomatis jadi URL)
• gatsby-config.js → Konfigurasi situs dan plugin
• components/ → Komponen React yang bisa dipakai ulang
• static/ → File statis seperti gambar, favicon, dll

---

3. Membuat Halaman Baru

Cukup buat file JS di dalam src/pages, dan Gatsby otomatis bikin rutenya:

// src/pages/about.js
import React from "react"

export default function About() {
  return <h1>Ini halaman Tentang Kami</h1>
}

Akses di browser: http://localhost:8000/about

---

4. Menambahkan Plugin Gatsby

Contoh: Mengoptimalkan gambar dengan plugin gatsby-plugin-image.

Install:

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

Tambahkan ke gatsby-config.js:

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

---

5. Deploy ke Internet dalam Hitungan Menit

Paling gampang pakai Netlify:

1. Push proyekmu ke GitHub
2. Buka netlify.com
3. Klik New site from Git
4. Pilih repo → Deploy → Selesai!

Website kamu langsung online dengan URL gratis dari Netlify.

---

Penutup

Gatsby membuka peluang besar untuk kamu yang ingin belajar membuat website modern dengan teknologi terbaru. Tanpa harus jadi fullstack developer, kamu sudah bisa membuat website yang cepat, aman, dan cantik—dalam hitungan menit!