Membangun Blog Sederhana dengan GatsbyJS dan Netlify CMS
Semakin berkembangnya teknologi dalam pengembangan website aplikasi, banyak developer berlomba dalam menciptakan framework yang dapat memudahkan kita dalam membangun sebuah webiste secara cepat, mudah dan professional. Begitu pula dengan latihan panjang yang akan saya sampaikan mengenai penggunakan Framework GatsbyJS dan mengintegrasikannya dengan Netlify CMS guna menciptakan aplikasi web-blog sederhana namun dengan kesan professional. Sebelumnya saya ingin share Github Profile saya disini agar project-project yang saya kerjakan mungkin bisa saja dilihat oleh kalian, dan berminat untuk bekerja sama atau sekedar berkontribusi untuk mengerjakan Pull Request disana :D Klik Disini
Dikarenakan ini adalah kontribusi pertama saya di Komunitas JavaScript Indonesia, saya mengucapkan terima kasih bagi kalian yang sudah mau menyempatkan membaca latihan panjang ini. So, siapkan kopi dan biskuit kalian 😄.
🧰 Tools
- Code Editor (Disini saya menggunakan Visual Studio Code) : https://code.visualstudio.com/
- NodeJS : https://nodejs.org/en/download/
- Git Bash : https://git-scm.com/downloads
- Kopi & Biskuit
📑 Dokumentasi Bacaan
- ReactJS (Karena GatsbyJS dibangun dibawah framework ReactJS) : https://reactjs.org/docs/getting-started.html
- GatsbyJS : https://www.gatsbyjs.com/docs/
- Netlify CMS : https://www.netlifycms.org/docs/intro/
- Bootstrap 4.5 : https://getbootstrap.com/docs/4.5/getting-started/introduction/
- React-Bootsrap : https://react-bootstrap.github.io/getting-started/introduction
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
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.
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)
Pada folder static kita akan membuat folder dan file yang nanti akan dipakai untuk development NetlifyCMS.
Disini saya tidak akan memberikan pemaparan secara detail bagaimana saya membuat UI frontend dari blog yang akan dibuat, namun saya akan memberikan sedikit konfigurasi gatsby yang akan kita integrasikan dengan NetlifyCms nantinya. Pembahasan detail pembuatan struktur blog yang lebih professional dengan menggunakan gatsby, akan saya jelaskan di thread selanjutnya 👍.
Instalasi Module Pendukung
Untuk membangun web aplikasi menggunakan gatsby, dan kita menggunakan boilerplate super starter, tentunya kita wajib menginstall beberapa module-module penting juga module pendukung yang nantinya akan digunakan selama melakukan develop pada web aplikasi, berikut module yang saya install :
npm install bootstrap react-bootstrap netlify-cms-app gatsby-plugin-disqus gatsby-source-filesystem gatsby-plugin-netlify-cms gatsby-plugin-sass gatsby-plugin-react-helmet gatsby-transformer-remark gatsby-remark-images gatsby-remark-responsive-iframe react-helmet gatsby-plugin-lodash lodash gatsby-transformer-sharp gatsby-plugin-sharp
Setelah semua modul tersebut berhasil terinstall, selanjutnya kita melakukan sedikit konfigurasi pada gatsby agar fungsi blog pada website kita dapat digunakan.
Konfigurasi GatsbyJS
Langkah awal yang kita lakukan yaitu melakukan konfigurasi pada file gatsby-node.js yang dimana pada file ini kita akan menambahkan beberapa metadata juga plugin dan import module-module yang akan kita gunakan.
Disini saya menambahkan informasi metadata untuk meningkatkan SEO gatsby web yang sedang kita buat. Adapula susunan metadata yang saya terapkan disini sebenarnya masih sederhana dan bisa anda tambahkan yang lainnya disini.
Pada baris plugin nantinya kita akan memasukan apa saja plugin-plugin yang akan kita pakai nantinya. Karena kita sudah install module-modulenya, maka saatnya kita sekalian pula mencantumkan plugin yang akan kita pakai. Plugin penting sebaiknya kita cantumkan di awal baris agar lebih mudah melihat baris konfigurasi seperti plugin gatsby-source-filesystem, yang dimana plugin ini fungsinya sebagai sourcing data-data lokal yang akan kita gunakan atau tampilkan pada Gatsby apllication kita. Sebagai contoh sebagai berikut :
Dapat dilihat pada baris resolve kita mencantumkan nama module yang akan kita gunakan yaitu gatsby-source-filesystem diikuti dengan option path yang menunjukan bahwa pada direktori tersebut semua file didalamnya akan terbaca oleh gatsby, dan akan diolah nantinya seperti blog post markdown dan assets gambar, icon, dsb. Jika ada direktori lain yang ingin kita tambahkan, cukup tambahkan baris konfigurasi seperti yang sebelumnya.
Pada project saya ini, saya memilih plugin gatsby-remark-sharp sebagai plugin image responsive, yang nantinya akan dipakai dalam menampilkan thumbnail atau image post pada blog gatsby kita. Tidak lupa juga beberapa plugin lainnya juga kita tambahkan seperti plugin sass, react-helmet, netlify-cms, dsb. Maka selesailah konfigurasi pada gatsby-config.js, mari kita lanjut ke section selanjutnya.
Jika kita mau menambahkan Disqus Comment untuk blog kita, tidak lupa kita juga menambahkan gatsby-plugin-disqus pada config gatsby kita, shortname yang tertera pada gambar dibawah ini adalah shortname server disqus kita. Untuk membuatnya kalian dapat mengakses link ini Disqus.
Langkah selanjutnya adalah melakukan konfigurasi pada file gatsby-node.js. Pada boilerplate gartsby-starter, gatsby-node ini belum di buat, itu artinya kita buat satu buah file pada root folder bernama gatsby-node.js. Fungsi dari gatsby-node ini nantinya akan memproses API dari Gatsby Node API seperti membuat halaman secara dinamis, menambahkan node untuk GraphQL, atau merespon event saat proses build lifecycle berjalan. Karena disini saya membuat blog sederhana, maka saya cukup menambahkan sedikit konfigurasi didalam nya.
Disini saya hanya membuat event createPages untuk men-generate halaman post secara dinamis, oleh karena itu kita akan membuat file bernama postTemplate.js pada direktori src/templates seperti yang saya jelaskan sebelumnya diatas, dan didalamnya berisi template tampilan.
Membuat Komponen UI
Disini saya akan memberikan script pembuatan Layout dan component parts.
- Layout.js
Layout ini nantinya akan memanggil Header, Footer dan children, yang nantinya akan kita panggil setiap kita membuat pages, template pages pun nantinya akan menggunakan Layout Component ini. Untuk komponen Navbar, Footer & Sidebar akan saya serahkan kepada anda masing-masing agar dapat berekreasi sesuka hati :D.
- Post.js
Pada components Post ini kita membuat tampilan single post yang nantinya akan di loop pada PostsCard.js, dan disini kita akan membuat components yang akan mengembalikan beberapa props, yang dimana setiap props nya akan diambil pada Query yang akan kita buat di index.js.
- PostsCard.js
Disini saya membuat loop card dari Post component yang telah kita buat sebelumnya, nantinya PostsCard ini akan kita taruh penempatannya di index atau tags template.
- index.js
Disini akan kita panggil component utama yang telah kita buat sebelumnya, seperti Layout, PostsCard, SEO, dsb. Tidak lupa juga kita deklarasikan GraphQL Query karena pada component ini kita akan passing semua props pada PostsCard dan mengisinya dengan data post nantinya.
- utilityFunction.js
Disini saya memberikan script utility pendukung untuk format slug dan truncate untuk limit description pada PostsCard
Membuat Template Page
Pada section ini sebenarnya prosesnya sama seperti pembuatan komponen sebelumnya, nantinya akan passing data dari props yang datanya akan di berikan oleh query GraphQL. Disini saya hanya akan membuat dua buah template yaitu Bio dan Post.
- postTemplate.js
Pada komponen ini akan sedikit kompleks karena kita akan passing semua data postingan kita disini, saya pun menambahkan Disqus Comment disini karena mengingat Gatsby Build sebenearnya akan menampilkan static pages.
- bioTemplate.js
Disini saya buat simple saja karena hanya akan menampilkan Profile atau About Us page kita disini. Nantinya template ini dapat kita custom pada panel Netlify CMS.
Konfigurasi Netlify CMS
Konfigurasi disini sebenarnya mudah namun mungkin sedikit tricky bagi yang sering mendevelop GatsbyJS namun tidak memperhatikan setiap variabel markdown yang dibuat, juga struktur direktori yang tidak teratur. Kita akan membuat file bernama config.yml pada folder static/admin yang telah kita buat sebelumnya, berikut konfigurasi yang saya gunakan :
Selanjutnya adalah menambahkan konfigurasi collections yang dimana disini kita akan mengetikan beberapa konfigurasi untuk menulis post pada Netlify CMS dan createPages (khususnya bio) yang telah kita buat pada gatsby-node.
Akan saya jelaskan sedikit maksud dari tiap field yang ada pada collection, didalamnya terdapat 2 buat collection diantaranya adalah blog dan pages untuk halaman about. Pada blog beberapa sudah saya beri penjelasan tiap line (cek gambar config.yml diatas), lalu pada line fields terdapat beberapa label yang nantinya meng-create & membaca markdown file posting kita seperti path, judul, deskripsi, date, author, thumbnail & body post. Adapun pada pages kita membuat sebuah markdown yang nanti akan kita passing props nya dan akan di buat menjadi halaman About Us, pada konfigurasi ini sebenarnya bisa kita kreasikan lagi ya sesuai dengan kerativitas masing-masing 😀. Berikut contoh file markdown post & markdown about us yang akan di generate nantinya :
Setelah melakukan konfigurasi pada file config.yml, maka selanjutnya kita membuat file index.html pada folder yang sama kita menyimpan config.yml yaitu static/admin. Saya akan berikan script nya di bawah ini, beserta logic kondisi saat user masih dalam keadaan logged ke auth netlify cms yang telah kita buat.
Jika sudah melakukan konfigurasi diatas, cobalah buat folder pada root project kita bernama content dan didalamnya terdapat juga folder assets (berisi file opsional), bio (berisi bio markdown) & posts (berisi folder tiap post dan berisi markdown). Bisa dilihat hirearkinya seperti pada gambar di bawah ini.
Karena disini saya belum membuat logic kondisi jika belum terdapat post, maka saya sarankan anda membuatnya agar tidak menampilkan pesan error saat build develop project kita ini nantinya. Format isi markdown nya dapat dilihat pada gambar di atas (post dan about us markdown) buat saja minimal satu buah post dan satu buah file bio markdown. Maka tahap ini sudah selesai, selanjutnya melakukan testing develop pada lokal device kita.
Gatsby Build Develop
Untuk melihat bagaimana hasil yang telah kita kerjakan sebelumnya, maka kita bisa melakukan build develop di device lokal kita menggunakan syntax dari Gatsby-CLI yang telah kita install sebelumnya dengan mengetikan syntax berikut pada terminal VS Code kita.
gatsby develop
berikut output yang akan tampil setelah gatsby-cli telah berhasil memproses compile build develop project kita.
Untuk melihatnya kita cukup mengetikan alamat url tersebut di web browser kesayangan kalian masing-masing, maka akan tampil seperti berikut, begitu pula saat kita melihat tampilan tiap post blognya.
Semua komponen sudah tersusun rapih dan sudah dapat diakses setiap postingannya, comment pun sudah terpasang disetiap postnya, dan untuk memeriksa komentar apa saja yang masuk ke website kita, kalian dapat melihatnya pada panel admin Disqus kalian masing-masing 👍.
Integrasi Github dengan Netlify
Agar dapat mengakses secara public atau kita dapat mengaksesnya dimana saja, kita tentunya perlu sebuah server agar website kita bisa kita berikan sebuah domain dan nantinya dapat diakses oleh siapa saja dan dimana saja, karena gatsby ini menyuguhkan static page dan sepertinya kita tidak memperlukan spesifikasi server yang besar, maka disini untuk mendeploy static page seperti gatsby, saya memanfaatkan layanan netlify dan nantinya kita padukan dengan teknologi headless cms atau biasa dikenal dengan jamstack. Untuk informasinya bisa kalian cek langsung pada website berikut (Netlify & Jamstack).
Sebelum kita mendeploy project kita ke netlify, kita harus upload project kita ke Github terlebih dahulu agar nantinya netlify dapat mengambil project kita melalui integrasi repository Github. Disini saya asumsikan bahwa kalian sudah mengerti dan mengetahui bagaimana cara mengupload project, maka disini saya menuntun kalian untuk mendeploy project kita ke netlify sampai bisa mengakses panel post Netlify CMS kita.
Langkah pertama adalah mengakses web Netlify Nantinya kita akan log in menggunakan Github dan memilih repository yang telah kita buat sebelumnya.
Disini saya memilih repo yang telah saya buat dengan nama repo Boilerplate-NetlifyCMS, dilanjut dengan mengisi beberapa form seperti owner, branch utama untuk build production, build command, dan Public folder untuk publish directory seperti gambar dibawah ini. Terakhir kita tekan Deploy site untuk mendeploy project kita.
Langkah selanjutnya kita tinggal menunggu project kita selesai di build dan mengakses url yang telah dibuat oleh netlify jika project berhasil di build, maka project dapat di akses.
Selanjutnya adalah mengaktifkan netlify identity yang didalam terdapat add-ons seperti registration dan git-gateway pada netlify agar NetlifyCMS kita dapat di akses.
Disini saya ubah menjadi invite only agar hanya saya yang bisa mengakses panel post didalamnya, kalian bisa . Setelah sampai pada tahap ini, semua konfigurasi sudah selesai dan bisa sudah kita akses.
Akses Netlify CMS
Langkah terakhir disini adalah mengakses panel admin NetlifyCMS dan kita bebas posting blog didalamnya. Kita dapat mengakses panel admin dengan mengakses domain kita dengan menambahkan /admin diakhirnya seperti berikut http://namadomain-projectkamu.com/admin, maka akan tampil login page web kita.
Selesai sudah latihan panjang kita membuat blog sederhana menggunakan Gatsby dan Netlify CMS dengan teknologi Jamstack. Sebenarnya saya sudah menyiapkan sebuah link ajaib untuk kalian yang tidak mau repot untuk membangun blog nya dari scratch seperti yang telah saya jelaskan diatas, cukup dengan mengakses link ini, kalian sudah bisa langsung membuat sebuah copy boilerplate yang dimana kalian cukup melakukan konfigurasi sederhana, dan voila anda bisa langsung memakainya :D caranya cukup akses link berikut (Deploy).
Yap sekian, jika ada sesuatu yang kurang jelas bisa kalian tanyakan di kolom komentar. Terima kasih buat kalian yang mau membaca thread pertama saya ini sampai selesai :D Semoga thread ini bermanfaat untuk kita semua, mohon maaf jika ada salah kata dan banyak kalimat yang kurang dimengerti, akan saya follow up jika ada kekurangan dan kesalahan. Terima Kasih dan sampai jumpa di thread saya di lain waktu 🎉🎉.
