Membuat Blog Gatsby.js + Contentful Dalam 5 Menit
![Ismail]()
- Diupdate oleh Ismail2 - 3 menit
Halo, selamat datang di Evetry! Postingan ini adalah lanjutan dari postingan saya sebelumnya yang berjudul Buat situs Gatsby pertamamu. Jika belum membaca postingan tersebut, sebaiknya kamu baca terlebih dahulu.
Pada postingan Buat situs Gatsby pertamamu, kita telah berahasil membuat situs Gatsby. Tapi situs Gatsby tersebut masih kosong alias hanya sebuah situs landing page yang belum memiliki fitur apapun. Dan pada postingan kali ini, kita akan membuat blog Gatsby.js + Contentful yang siap pakai dalam 5 menit.
Disini saya akan menggunakan layanan pihak ketiga yang nantinya akan kita gunakan untuk menulis postingan blog yang bernama Contentful. Contentful adalah headless CMS didirikan oleh Sascha Konietzke dan Paolo Negri pada tahun 2013.
Tutorial ini saya buat dengan sebisa mungkin saya menghindari coding agar kamu yang belum mengerti React.js tetap bisa membuat sebuah blog static site modern.
Sekarang mari kita mulai 💪💪.
Sebelum mulai pastikan kamu sudah install Node.js dan Gatsby-CLI yah. . .
Tutorialnya silahkan baca di sini.
Buat Blog Gatsby
Pada langkah ini sebenarnya kita tidak akan benar-benar membuat blog, tapi lebih tepatnya menduplikat atau men-clone blog Gatsby yang sudah saya buat sebelumnya.
Carannya cukup buka Command Prompt Windows / Terminal jika kamu pengguna Linux, kemudian jalankan perintah berikut:
gatsby new gatsby-blog https://github.com/xviidev/evetry-gatsby-blogJika sudah selesai, ketik:
cd gatsby-blogBuat Akun Contentful
Karena kita akan memanfaatkan Contentful sebagai CMS untuk blog kita nanti, maka kita harus membuat akun terlebih dahulu.
Buat akun Contentful
Buka https://www.contentful.com/sign-up/ dan buat akun Contentful.
Salin 'API Keys' space Contentful kamu
Saat pertama kali membuat akun Contentful, biasaya Contentful akan secara otomatis membuat sebuah blank space. Kita membutuhkan beberapa access token dari space Contentful kamu, agar space tersebut terhubung dengan blog Gatsby yang telah kita buat.
Yang kita butuhkan disini adalah:
- Space ID
- Content Delivery API - access token
- Content management tokens
Untuk mendapatkan Space ID dan Content Delivery API - access token, klik Settings > API Keys kemudian klik Add API key
Kemudian salin Space ID (1) dan Content Delivery API - access token (2).
Untuk mendapatkan Content management tokens, klik Settings > API Keys > Content management tokens
Kemudian klik Generate personal token, masukkan nama token (mis: blog gatsby) kemudian klik Generate lalu salin Content management tokens (1) tersebut.
Hubungkan Contentful dengan Blog Gatsby
Sekarang kita kembali ke Command Prompt. Jalankan perintah berikut:
npm run setupKemudian masukkan
- Space ID
- Content Delivery API - access token
- Content management tokens
sesuai instruksi yang ada pada layar dan tunggu hingga prosesnya selesai.
Jalankan Blog Kamu di Localhost
Sekarang blog gatsby kamu siap dijalankan di localhost. Sekarang ketik perintah berikut:
npm run devTunggu beberapa saat, hingga muncul tulisan seperti ini:
You can now view gatsby-blog in the browser.
http://localhost:8000/
View GraphiQL, an in-browser IDE, to explore your site's data and schema
http://localhost:8000/___graphql
Note that the development build is not optimized.
To create a production build, use gatsby build
dan sekarang buka http://localhost:8000/ di browser dan selamat blog Gatsby kamu sudah berjalan di localhost.
Apa selanjutnya?
Selanjutnya kita akan men-deploy situs gatsby kita menggunakan Gatsby Cloud agar situs gatsby kita dapat di akses secara online.
Tutorialnya sementara saya tulis.
Demikian artikel tentang Membuat Blog Gatsby.js + Contentful Dalam 5 Menit. Semoga semoga bermanfaat untuk kalian semuanya. Terimakasih telah membaca sampai akhir.