Panduan Lengkap Memulai Bisnis Web Development Sukses dalam Seminggu

Daftar Isi

Pengantar Gatsby.js
Persiapan Lingkungan Pengembangan
Membuat Proyek Gatsby.js Baru
Memahami Struktur Proyek Gatsby
Menambahkan Halaman dan Navigasi
Menggunakan Plugin Gatsby
Mengambil Data dengan GraphQL
Deploy Website Gatsby
Sumber Belajar dan Source Code

1. Pengantar Gatsby.js

Gatsby.js adalah framework React berbasis static site generator yang memungkinkan Anda membuat website yang sangat cepat, aman, dan mudah dioptimasi SEO. Gatsby menggabungkan kekuatan React, GraphQL, dan Webpack untuk menghasilkan website statis yang dapat di-deploy di berbagai platform hosting.

Gatsby sangat cocok untuk blog, portofolio, dokumentasi, dan website bisnis yang membutuhkan performa tinggi dan kemudahan pengelolaan konten.

2. Persiapan Lingkungan Pengembangan

Sebelum memulai, pastikan Anda sudah menginstal beberapa tools berikut:

Node.js versi 14 atau lebih baru ( https://nodejs.org )
npm atau yarn sebagai package manager
Code editor seperti Visual Studio Code ( https://code.visualstudio.com )

Untuk mengecek versi Node.js dan npm, jalankan perintah berikut di terminal:

node -v
npm -v

Jika belum terpasang, silakan unduh dan instal Node.js dari situs resminya.

3. Membuat Proyek Gatsby.js Baru

Gatsby menyediakan CLI yang memudahkan pembuatan proyek baru. Jalankan perintah berikut di terminal:

npm install -g gatsby-cli
gatsby new nama-proyek

Perintah di atas akan menginstal Gatsby CLI secara global dan membuat proyek baru bernama nama-proyek dengan template default.

Setelah selesai, masuk ke folder proyek dan jalankan server development:

cd nama-proyek
gatsby develop

Buka browser dan akses http://localhost:8000 untuk melihat website Anda berjalan.

Screenshot terminal yang menunjukkan perintah gatsby develop berjalan dan server lokal aktif

4. Memahami Struktur Proyek Gatsby

Berikut adalah struktur folder utama pada proyek Gatsby:

src/ - Tempat kode sumber React, halaman, dan komponen
gatsby-config.js - Konfigurasi utama Gatsby
gatsby-node.js - File untuk menambah fungsionalitas Node.js seperti membuat halaman dinamis
static/ - Folder untuk file statis seperti gambar dan favicon
public/ - Folder hasil build yang berisi website statis siap deploy

Diagram struktur folder proyek Gatsby.js dengan folder src, static, public dan file konfigurasi

Memahami struktur ini penting agar Anda dapat mengelola proyek dengan baik.

5. Menambahkan Halaman dan Navigasi

Gatsby menggunakan sistem routing berbasis file. Untuk menambahkan halaman baru, buat file React di dalam folder src/pages/ . Contoh membuat halaman about.js :

import React from "react";

export default function About() {
  return (
    <main className="p-6 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold mb-4">Tentang Kami</h1>
      <p>Ini adalah halaman tentang kami di website Gatsby.</p>
    </main>
  );
}

Untuk navigasi antar halaman, gunakan komponen Link dari Gatsby:

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

export default function Navbar() {
  return (
    <nav className="bg-indigo-600 p-4 text-white flex space-x-6">
      <Link to="/" className="hover:underline">Beranda</Link>
      <Link to="/about" className="hover:underline">Tentang</Link>
    </nav>
  );
}

Tampilan halaman About Gatsby dengan navigasi berwarna ungu dan teks putih

6. Menggunakan Plugin Gatsby

Gatsby memiliki ekosistem plugin yang sangat kaya untuk menambah fitur seperti optimasi gambar, sourcing data, dan SEO. Contoh menambahkan plugin untuk optimasi gambar:

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

Setelah menambahkan plugin, Anda bisa menggunakan komponen GatsbyImage untuk menampilkan gambar yang dioptimasi.

Ilustrasi plugin Gatsby untuk optimasi gambar dengan ikon plugin dan gambar yang dioptimasi

7. Mengambil Data dengan GraphQL

Gatsby menggunakan GraphQL untuk mengambil data dari berbagai sumber seperti filesystem, CMS, dan API. Contoh query GraphQL untuk mengambil data gambar dari filesystem:

export const query = graphql`
  query {
    file(relativePath: { eq: "gambar-sample.jpg" }) {
      childImageSharp {
        gatsbyImageData(width: 600)
      }
    }
  }
`

Kemudian gunakan data tersebut di komponen React:

import { GatsbyImage, getImage } from "gatsby-plugin-image";

export default function SampleImage({ data }) {
  const image = getImage(data.file);
  return <GatsbyImage image={image} alt="Contoh gambar sample" />;
}