Belajar Gatsby - Memulai Proyek Gatsby

#Pendahuluan

Teori di episode 2 sudah cukup. Sekarang waktunya menulis kode nyata: membuat project Gatsby pertama. Di akhir episode ini kalian akan memiliki situs Gatsby yang berjalan di browser dengan live reload.

Episode 3 mencakup pembuatan project dengan Gatsby CLI, eksplorasi struktur folder, menjalankan dev server, dan menambahkan plugin dasar beserta konfigurasinya di gatsby-config.js.

#Membuat Project dengan Gatsby CLI

#Menggunakan Starter Resmi

Gatsby CLI menyediakan perintah gatsby new untuk membuat project dari starter. Starter adalah project Gatsby siap pakai yang bisa dijadikan titik awal:

npx gatsby new gatsby-belajar https://github.com/gatsbyjs/gatsby-starter-hello-world

Perintah npx gatsby new gatsby-belajar akan meng-clone starter, menginstall semua dependency, dan menyiapkan git. Tunggu sampai muncul pesan sukses, lalu masuk ke folder project:

cd gatsby-belajar

#Starter yang Tersedia

Selain hello-world, Gatsby menyediakan beberapa starter resmi: gatsby-starter-default untuk situs lengkap, gatsby-starter-blog untuk blog dengan Markdown, dan gatsby-starter-wordpress untuk integrasi WordPress. Untuk belajar, starter hello-world adalah yang paling sederhana dan bersih.

#Menjelajahi Struktur dan Konfigurasi Awal

#Isi Project

Lihat isi project yang baru dibuat:

ls -la

Starter hello-world sangat minimal: folder src/pages, file gatsby-config.js, package.json, dan beberapa file pendukung. File src/pages/index.js adalah halaman pertama kalian — saat dijalankan, file ini menjadi route /.

#Membaca gatsby-config.js

Konfigurasi utama ada di gatsby-config.js. Buka dan kalian akan melihat struktur seperti ini:

gatsby-config.js minimal

module.exports = {
  siteMetadata: {
    title: "Gatsby Belajar",
    description: "Situs belajar Gatsby",
  },
  plugins: [],
}

Properti siteMetadata menyimpan informasi global situs yang bisa di-query lewat GraphQL, sedangkan plugins adalah array kosong yang nanti akan kita isi.

#Menjalankan Dev Server dan Live Reload

#Perintah Develop

Jalankan dev server dari dalam folder project:

npm run develop

Perintah ini menjalankan gatsby develop di belakang layar. Setelah selesai, buka http://localhost:8000 di browser. Kalian akan melihat halaman hello-world milik starter.

#Live Reload dan GraphiQL

Ubah teks di src/pages/index.js, simpan, dan browser akan otomatis memperbarui tanpa reload manual — inilah live reload. Sekaligus, Gatsby menjalankan GraphiQL di http://localhost:8000/___graphql, sebuah explorer interaktif untuk mencoba query sebelum menuliskannya di kode.

#Berhenti dan Menjalankan Ulang

Untuk menghentikan dev server, tekan Ctrl+C di terminal. Perintah npm run develop selalu bisa dijalankan kembali untuk mulai mengembangkan.

#Menambahkan Plugin Dasar

#Menginstall Plugin Sumber File

Plugin pertama yang hampir selalu dibutuhkan adalah gatsby-source-filesystem, yang memungkinkan Gatsby membaca file lokal seperti Markdown dan gambar:

npm install gatsby-source-filesystem

#Mengonfigurasi Plugin

Agar aktif, plugin harus didaftarkan di gatsby-config.js bersama opsinya:

Daftarkan plugin di gatsby-config

module.exports = {
  siteMetadata: {
    title: "Gatsby Belajar",
    description: "Situs belajar Gatsby",
  },
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "content",
        path: `${__dirname}/content`,
      },
    },
  ],
}

Opsi path dengan nilai ${__dirname}/content menentukan folder yang dipindai. Setelah menambahkan plugin, Gatsby perlu di-restart dengan npm run develop agar graph diperbarui. Folder content belum ada — buat dengan:

mkdir content

#Verifikasi Awal

Untuk memastikan semuanya berjalan, jalankan query di GraphiQL untuk melihat data file yang baru saja di-source:

Query file di GraphiQL

query {
  allFile {
    nodes {
      name
      extension
    }
  }
}

Jika allFile mengembalikan node, konfigurasi plugin berhasil. Dari sini kalian siap membangun struktur situs yang lebih lengkap di episode 4.

#Penutup

Episode 3 menuntaskan langkah praktik pertama: membuat project Gatsby dari starter, memahami gatsby-config.js, menjalankan dev server dengan live reload, serta menambahkan dan mengonfigurasi plugin gatsby-source-filesystem.

Inti yang harus dibawa pulang:

• npx gatsby new nama-project membuat project dari starter.
• src/pages menentukan route situs secara otomatis.
• npm run develop menjalankan dev server di port 8000.
• GraphiQL di ___graphql untuk mencoba query.
• Plugin didaftarkan di array plugins di gatsby-config.js.
• Setiap menambah plugin, restart dev server agar graph diperbarui.

Di episode 4 selanjutnya kita akan membangun fondasi tampilan: pages, components, dan layouts — membuat halaman baru, memisahkan komponen reusable, memilih strategi styling, dan mengelola metadata halaman dengan Gatsby Head API.