Pernahkah Anda membayangkan memiliki blog yang loading-nya secepat kilat, aman dari serangan hacker, dan bisa Anda atur sesuka hati tanpa perlu pusing soal database atau server? Kalau iya, berarti Anda wajib kenalan sama GatsbyJS! Di tengah gempuran platform blog yang itu-itu saja, GatsbyJS hadir sebagai angin segar bagi para developer dan blogger yang menginginkan performa maksimal dan fleksibilitas tinggi. Ini bukan sekadar alat biasa, tapi fondasi kokoh untuk membangun blog yang modern dan user-friendly.

Mungkin Anda bertanya-tanya, “Apa itu GatsbyJS dan kenapa harus pakai itu?” Singkatnya, GatsbyJS adalah framework berbasis React yang memungkinkan Anda membangun website statis (Static Site Generator) dengan performa luar biasa. Kenapa statis? Karena saat di-deploy, semua halaman blog Anda sudah berbentuk file HTML, CSS, dan JavaScript murni.

Jadi, tidak ada lagi proses query database yang bikin lambat. Hasilnya? Blog Anda akan terbang! Artikel ini akan memandu Anda dalam tutorial membuat blog dengan GatsbyJS langkah demi langkah, agar Anda bisa punya blog impian yang cepat dan canggih. Yuk, kita mulai petualangan membangun blog Anda!

Instalasi Gatsby-Starter dengan NPM & Gatsby CLI

Saya asumsikan bahwa kalian sudah mengerti bagaimana cara kerja layar terminal karena disini saya menggunakan Git Bash untuk melakukan installasi node modules. Pastikan juga pada device kalian sudah terinstall aplikasi NodeJS, jika sudah maka langkah pertama adalah menginstall node module gatsby-cli

npm install -g gatsby-cli

Setelah Gatsby CLI terinstall, saatnya kita ambil repository Gatsby Starter yang benar-benar clean agar kita lebih mudah melakukan konfigurasi, berikut repository dan langkah yang saya gunakan :

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

https://miro.medium.com/v2/resize:fit:354/1*c80ndKYPBaxiqXjopuG1oQ.png

Bisa kita lihat susunan file dan folder yang kita dapatkan dari gatsby-starter yang baru saja kita ambil, cukup ringkas yang lalu dapat kita kombinasikan sesuka hati. Namun karena gatsby merupakan turunan dari ReactJS, maka kita akan menggunakan react untuk membuat setiap component nya.

https://miro.medium.com/v2/resize:fit:361/1*GSfOItAyQ1gvmbGYkUTgLw.png

Berikut struktur direktori pada folder src dan static yang saya buat, akan saya jelaskan sedikit apa saja fungsinya :

• assets (berisi assets image, font, pdf, dsb untuk penunjang development)
• components (berisi komponen-komponen utama seperti Layout utama, SEO React-Helmet, Post, dsb)
• pages (berisi file utama yang akan di generate secara otomatis, seperti index, contact, about, 404, dsb cukup membuat file nama-file.js, maka nantinya kita akan mengakses halaman seperti ini : http://localhost:8000/nama-file)
• parts (berisi komponen-komponen kecil yang nantinya akan dipakai oleh komponen utama yang berada pada folder components seperti header, footer, sidebar, dsb)
• styles (berisi file library style, karena disini saya menggunakan sass, maka saya membuat index.sass yang mengimport banyak style untuk setiap components)
• templates (disini kita akan membuat beberapa file template yang nantinya akan saya jelaskan fungsinya di section selanjutnya)
• utils (berisi file utilities pendukung seperti format number, slugify, format penanggalan)