vuejs,

Membuat Static Blog dengan Gridsome di Netlify

Ham Ham Follow Apr 17, 2020 · 2 mins read
Membuat Static Blog dengan Gridsome di Netlify
Share this

Netlify adalah salah satu tempat terbaik untuk membuat blog statis, selain di Github. Netlify adalah platform terpadu yang memudahkan kita dalam membuat situs dan aplikasi web dengan fitur deploy otomatisnya. Selain itu, platform ini juga menyediakan Global CDN, fitur DNS lengkap (termasuk domain khusus jika kamu punya), HTTPS otomatis, akselerasi aset, dan banyak lagi.

Kita bisa membuat project pribadi dan aplikasi web tanpa batas, salah satunya adalah untuk membuat static blog dengan Gridsome di Netlify. Sebelum beranjak ke cara membuat blog statis dengan Gridsome, mari kita berkenalan sebentar dengan Gridsome

Apa itu gridsome?

Gridsome adalah framework dari ekosistem Vue.js yang khusus untuk membuat halaman statis (Static Site Generator). Mungkin kalian mengenal React.js? Di React.js ada Gatsby sebagai pembuat halaman statis, nah di Vue.js ada Gridsome.

Gridsome menjadi alternatif yang baik bagi kamu yang ingin membuat blog statis atau aplikasi web statis, Selain Gatsby, Nuxt.js, ataupun Hugo.

Kenapa memilih Gridsome?

Alur kerja Gridsome

Ada banyak static site generator, lalu kneapa memilih Gridsome? Gridsome merupakan spesialis dalam bidang static site generator, dengan berbagai fitur built-in yang kita butuhkan untuk membuat blog statis seperti otomatis melakukan_code-splitting_, melakukan kompresi gambar, mendukung PWA secara penuh, dan tentunya sangat bersahabat dengan SEO.

Kita juga akan dimudahkan mengorganisir konten blog kita dengan Markdown tanpa perlu konfigurasi lagi.

Cara membuat blog statis dengan Gridsome

Saat ini membuat blog statis sangatlah mudah, karena sudah banyak sekali starter template yang bisa kita gunakan langsung.

Di Gridsome, kita bisa menggunakan Gridsome Blog Starter untuk membuat blog statis dengan mudah.

Berikut ini langkah-langkah membuat blog statis dengan Gridsome.

Install menggunakan CLI

Pertama, masukkan perintah berikut ini.

$ npm install --global @gridsome/cli

Lanjutkan dengan membuat project baru.

$ gridsome create gridsome-blog https://github.com/gridsome/gridsome-starter-blog.git

Jalankan untuk melihat hasilnya.

$ gridsome develop

Selanjutnya, kreasikan sesuai selera. Kalian bisa lihat repositorynya di GitHub.

Install Gridsome dan Deploy langsung ke Netlify

Untuk membuat Gridsome dan melakukan Deploy langsung ke Netlify sangatlah mudah, pertama pastikan kamu sudah memiliki akun Github dan Netlify.

Selanjutnya buka halaman Gridsome Blog Starter

Gridsome STarter Blog

Klik tombol Install Now yang ada pada pojok kanan atas, lalu pilih Deploy to Netlify.

Deploy to Netlify

Lakukan sedikit konfigurasi dengan menambahkan perintah gridsome build pada kolom build command. Dan tambahkan direktori dist pada kolom publish directory.

Selanjutnya, kamu bisa melihat hasilnya pada url yang telah digenerate secara otomatis oleh Netlify, kamu juga bisa mengubah url tersebut.

Dapatkan Update
Dapatkan update artikel dengan mudah, cukup masukkan emailmu aja!
Ham
Ham Follow
Hi, saya Ham, semoga artikel yang saya bagikan bermanfaat