Cara Membuat Website dengan Gatsby.js: Panduan Lengkap Static Site Generator React 2026

Apa Itu Gatsby.js dan Mengapa Memilihnya?

Gatsby.js adalah static site generator (SSG) berbasis React yang memungkinkan Anda membangun website ultra-cepat dengan cara yang modern dan menyenangkan. Berbeda dengan website dinamis tradisional yang merender halaman setiap ada request, Gatsby menghasilkan file HTML statis pada saat build - sehingga setiap halaman sudah siap saji untuk browser tanpa pemrosesan server.

Hasilnya? Website yang memuat hampir instan, skor Lighthouse mendekati 100, dan pengalaman pengguna (UX) yang luar biasa. Gatsby digunakan oleh ribuan perusahaan global - dari startup hingga brand besar seperti Braun, National Geographic, dan Impossible Foods.

Dalam panduan cara membuat website dengan Gatsby ini, Anda akan mempelajari setiap langkah dari instalasi hingga website live - termasuk fitur unggulan seperti GraphQL data layer, ekosistem plugin yang kaya, dan berbagai opsi deployment gratis.

Keunggulan Gatsby.js Dibanding Static Site Generator Lain

Sebelum memulai, penting untuk memahami apa yang membuat Gatsby istimewa dibandingkan pilihan lain:

• Berbasis React - Anda membangun UI dengan komponen React yang sudah Anda kenal
• GraphQL Data Layer - ambil data dari mana saja (Markdown, CMS, API, database) melalui satu interface GraphQL yang terpadu
• Ekosistem Plugin Raksasa - lebih dari 3.000 plugin siap pakai di Gatsby Plugin Library
• Optimasi Otomatis - code splitting, lazy loading gambar, prefetching halaman, dan minifikasi dilakukan secara otomatis
• Image API Canggih - plugin gatsby-plugin-image menghasilkan gambar responsif dengan format WebP/AVIF secara otomatis
• Incremental Builds - hanya rebuild halaman yang datanya berubah, menghemat waktu build secara signifikan

Prasyarat Sebelum Memulai

Pastikan Anda sudah memiliki pemahaman dasar tentang:

• HTML dan CSS - struktur halaman dan styling dasar
• JavaScript ES6+ - arrow function, destructuring, module import/export, async/await
• React dasar - komponen, props, dan JSX

Jika Anda belum familiar dengan React, disarankan untuk mempelajarinya terlebih dahulu selama 2-4 minggu sebelum lanjut ke Gatsby. Fondasi React yang kuat akan membuat belajar Gatsby jauh lebih mudah.

Langkah 1: Menyiapkan Environment Development

Install Node.js

Gatsby memerlukan Node.js versi 18 atau lebih tinggi. Unduh dari nodejs.org dan pilih versi LTS. Verifikasi instalasi:

node --version  # harus v18.0.0 atau lebih tinggi
npm --version

Install Gatsby CLI

Gatsby CLI adalah alat command line untuk membuat dan mengelola proyek Gatsby:

npm install -g gatsby-cli
gatsby --version

Langkah 2: Membuat Proyek Gatsby Baru

Ada dua cara membuat proyek Gatsby baru:

Opsi A: Menggunakan Starter Bawaan

gatsby new nama-website
cd nama-website
gatsby develop

Gatsby akan membuat proyek dengan starter default yang sudah dilengkapi konfigurasi dasar. Setelah selesai, buka browser di http://localhost:8000 untuk melihat hasilnya.

Opsi B: Menggunakan Starter Template Spesifik

Gatsby memiliki ratusan starter template yang bisa Anda gunakan:

# Blog starter
gatsby new blog-saya https://github.com/gatsbyjs/gatsby-starter-blog

# E-commerce starter
gatsby new toko-saya https://github.com/gatsbyjs/gatsby-starter-shopify

# Minimal starter
gatsby new website-saya https://github.com/gatsbyjs/gatsby-minimal-starter

Struktur Folder Proyek Gatsby

nama-website/
├── src/
│   ├── components/     ← komponen reusable
│   ├── images/         ← aset gambar
│   ├── pages/          ← setiap file = satu halaman
│   └── templates/      ← template untuk halaman dinamis
├── static/             ← file statis yang di-copy langsung
├── gatsby-config.js    ← konfigurasi utama & plugin
├── gatsby-node.js      ← API Node.js untuk generate halaman
├── gatsby-browser.js   ← kode yang berjalan di browser
└── gatsby-ssr.js       ← kode untuk Server-Side Rendering

Langkah 3: Memahami Pages di Gatsby

Di Gatsby, setiap file JavaScript/TypeScript di folder src/pages/ secara otomatis menjadi sebuah halaman website. Ini disebut file-based routing.

Membuat Halaman Baru

Buat file src/pages/tentang.js:

import * as React from "react";
import { Link } from "gatsby";

const TentangPage = () => {
  return (
    <main>
      <h1>Tentang Kami</h1>
      <p>
        Kami adalah tim yang berdedikasi untuk membangun website berkualitas tinggi
        menggunakan teknologi terkini seperti Gatsby.js.
      </p>
      <Link to="/">Kembali ke Beranda</Link>
    </main>
  );
};

export default TentangPage;

// SEO dengan Head API
export const Head = () => <title>Tentang Kami | Website Saya</title>;

Halaman ini otomatis tersedia di http://localhost:8000/tentang. Perhatikan penggunaan komponen Link dari Gatsby (bukan tag <a> biasa) untuk navigasi internal - ini memungkinkan prefetching otomatis.

Langkah 4: GraphQL Data Layer

Salah satu fitur paling powerful dari Gatsby adalah GraphQL data layer. Gatsby mengumpulkan data dari berbagai sumber (file Markdown, API, CMS) ke dalam satu lapisan data GraphQL yang bisa di-query dari komponen mana pun.

Menjelajahi Data dengan GraphiQL

Saat gatsby develop berjalan, Gatsby menyediakan IDE GraphQL interaktif di http://localhost:8000/___graphql. Gunakan ini untuk mengeksplorasi data yang tersedia.

Query Data Site Metadata

Di gatsby-config.js, tambahkan metadata site:

module.exports = {
  siteMetadata: {
    title: "Website Saya",
    description: "Website pribadi yang dibangun dengan Gatsby.js",
    author: "Nama Anda",
    siteUrl: "https://websitesaya.com",
  },
  plugins: [],
};

Query metadata ini di komponen menggunakan hook useStaticQuery:

import { useStaticQuery, graphql } from "gatsby";

const SiteTitle = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
          description
        }
      }
    }
  `);

  return (
    <header>
      <h1>{data.site.siteMetadata.title}</h1>
      <p>{data.site.siteMetadata.description}</p>
    </header>
  );
};

Langkah 5: Membuat Blog dengan File Markdown

Salah satu use case paling populer Gatsby adalah membuat blog dari file Markdown. Install plugin yang diperlukan:

npm install gatsby-source-filesystem gatsby-transformer-remark

Konfigurasi di gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "posts",
        path: `${__dirname}/src/posts/`,
      },
    },
    "gatsby-transformer-remark",
  ],
};

Buat file Markdown src/posts/artikel-pertama.md:

---
title: "Artikel Pertama Saya"
date: "2026-05-21"
slug: "artikel-pertama"
description: "Ini adalah artikel pertama yang dibuat dengan Gatsby dan Markdown."
---

## Selamat Datang di Blog Saya

Ini adalah paragraf pertama artikel blog saya yang ditulis dalam format Markdown.

### Mengapa Gatsby?

Gatsby menghasilkan website yang sangat cepat dengan pengalaman developer yang luar biasa.

Generate Halaman Blog Secara Programatis

Di gatsby-node.js, gunakan Gatsby Node API untuk membuat halaman dari data Markdown:

const path = require("path");

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    query {
      allMarkdownRemark {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);

  result.data.allMarkdownRemark.nodes.forEach((node) => {
    createPage({
      path: `/blog/${node.frontmatter.slug}`,
      component: path.resolve("./src/templates/blog-post.js"),
      context: {
        slug: node.frontmatter.slug,
      },
    });
  });
};

Langkah 6: Plugin Ekosistem Gatsby yang Wajib Diketahui

Kekuatan besar Gatsby ada pada ekosistem plugin-nya. Berikut plugin-plugin yang paling sering digunakan dalam proyek nyata:

gatsby-plugin-image (Optimasi Gambar)

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

Gunakan komponen StaticImage untuk gambar lokal:

import { StaticImage } from "gatsby-plugin-image";

const Hero = () => (
  <StaticImage
    src="../images/hero.jpg"
    alt="Hero banner"
    placeholder="blurred"
    layout="fullWidth"
  />
);

Gatsby secara otomatis mengoptimalkan gambar: mengubah ke format WebP/AVIF, membuat versi responsif untuk berbagai ukuran layar, dan menerapkan lazy loading.

gatsby-plugin-sitemap (SEO)

npm install gatsby-plugin-sitemap

Tambahkan ke gatsby-config.js dan sitemap XML akan otomatis digenerate saat build.

gatsby-plugin-google-gtag (Analytics)

npm install gatsby-plugin-google-gtag

{
  resolve: "gatsby-plugin-google-gtag",
  options: {
    trackingIds: ["G-XXXXXXXXXX"],
    pluginConfig: {
      head: true,
    },
  },
}

gatsby-plugin-robots-txt

npm install gatsby-plugin-robots-txt

Otomatis membuat file robots.txt yang benar untuk SEO.

Langkah 7: Styling dengan Gatsby

Gatsby mendukung berbagai pendekatan styling modern:

Tailwind CSS (Direkomendasikan)

npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss
npx tailwindcss init -p

Tambahkan "gatsby-plugin-postcss" ke array plugins di gatsby-config.js.

CSS Modules

Gatsby mendukung CSS Modules secara bawaan. Buat file dengan ekstensi .module.css dan import langsung ke komponen:

// src/components/Header.module.css
.header {
  background: #1a1a2e;
  padding: 1rem 2rem;
  color: white;
}

// src/components/Header.js
import * as styles from "./Header.module.css";

const Header = () => (
  <header className={styles.header}>
    <h1>Website Saya</h1>
  </header>
);

Langkah 8: SEO dengan Gatsby Head API

Gatsby v5 memperkenalkan Head API yang lebih sederhana untuk mengelola meta tag SEO. Export fungsi Head dari setiap halaman:

// src/pages/index.js
export const Head = ({ data }) => (
  <>
    <title>{data.site.siteMetadata.title}</title>
    <meta name="description" content={data.site.siteMetadata.description} />
    <meta property="og:title" content={data.site.siteMetadata.title} />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />
    <link rel="canonical" href="https://websitesaya.com/" />
  </>
);

Langkah 9: Build untuk Production

Setelah website siap, jalankan build untuk menghasilkan file statis yang dioptimasi:

gatsby build

Perintah ini akan membuat folder public/ berisi semua file HTML, CSS, JavaScript, dan aset yang sudah dioptimasi. Untuk melihat hasil build secara lokal sebelum deploy:

gatsby serve

Buka http://localhost:9000 untuk melihat versi production website Anda.

Langkah 10: Deploy Website Gatsby

Karena Gatsby menghasilkan file statis, Anda bisa deploy ke hampir semua platform hosting. Berikut tiga pilihan terbaik:

Netlify (Direkomendasikan untuk Pemula)

1. Push kode ke GitHub/GitLab
2. Login ke netlify.com dan klik "Add new site"
3. Pilih repository Anda
4. Set build command: gatsby build
5. Set publish directory: public
6. Klik "Deploy site" - Netlify akan otomatis rebuild setiap ada push ke GitHub

Vercel

1. Push kode ke GitHub
2. Login ke vercel.com dan klik "New Project"
3. Import repository - Vercel otomatis mendeteksi Gatsby
4. Klik "Deploy" - selesai!

Cloudflare Pages

1. Login ke pages.cloudflare.com
2. Klik "Create a project" dan hubungkan ke GitHub
3. Set framework preset ke "Gatsby"
4. Build command: gatsby build, output directory: public
5. Deploy - website Anda akan didistribusikan ke CDN global Cloudflare

Shared Hosting Indonesia

Anda juga bisa upload isi folder public/ ke shared hosting via FTP atau File Manager cPanel. Karena semua file sudah statis, tidak perlu runtime khusus - cukup web server biasa.

Tips Performa dan Best Practices Gatsby

• Gunakan gatsby-plugin-image untuk semua gambar - jangan gunakan tag <img> biasa
• Manfaatkan code splitting otomatis - Gatsby sudah melakukan ini secara default per halaman
• Gunakan Link component bukan tag <a> untuk navigasi internal agar prefetching bekerja
• Tambahkan gatsby-plugin-sitemap dan konfigurasi robots.txt untuk SEO
• Aktifkan Gatsby Cloud atau Netlify DPR untuk incremental builds yang lebih cepat pada proyek besar
• Gunakan gatsby-plugin-offline untuk membuat website bekerja secara offline (PWA)

FAQ: Cara Membuat Website dengan Gatsby.js

Kesimpulan

Cara membuat website dengan Gatsby.js menjadi pilihan sangat tepat jika Anda ingin website yang ultra-cepat, SEO-friendly, dan mudah di-maintain. Dengan ekosistem plugin yang kaya, GraphQL data layer yang powerful, dan integrasi mulus dengan berbagai CMS headless, Gatsby memberi Anda fleksibilitas penuh dalam membangun website modern.

Kunci sukses belajar Gatsby adalah memulai dari proyek sederhana - blog pribadi atau portofolio - kemudian secara bertahap menambahkan fitur-fitur yang lebih kompleks. Jangan takut bereksperimen dengan berbagai plugin dan starter template yang tersedia.

Setelah website Gatsby Anda siap, manfaatkan platform hosting modern seperti Netlify, Vercel, atau Cloudflare Pages untuk deployment yang mudah dan performa terbaik. Dengan file statis yang dihasilkan Gatsby, website Anda bisa berjalan di infrastruktur CDN global dengan kecepatan yang tidak mungkin dicapai oleh website dinamis tradisional.