24 Agustus, 2019

How I build this blog (Cheap & Cheat Technique)

Peringatan dini: Blog ini dibangun menggunakan layanan dan teknologi umum sebenarnya tapi kebanyakan ilmu yang ada pada tulisan ini lebih dimengerti oleh kalangan tertentu. Namun, tidak ada larangan untuk siapa saja membaca tulisan ini, entah untuk tambahan referensi ilmu atau sekedar membuang waktu.

Sejatinya blog ini menggunakan layanan WordPress gratisan untuk manajemen kontennya (tulisan, media, dll). Sejak WordPress merilis versi 4.7 pada tahun 2016, terdapat fitur yang sangat menarik bagi para web developer yaitu REST API Content Endpoints. Saya sendiri sebenarnya baru mengetahui hal tersebut ketika membuka kembali blog WordPress yang sudah lama tidak tersentuh, dan saat itu sudah versi 5.0.

Singkat cerita kira – kira beginilah penjelasan dari saya tentang REST API, fitur tersebut memungkinkan siapa saja bisa mengambil data mentah dari blog WordPress yang kita ketahui. Adapun data yang bisa diambil tentu tidak semuanya. Data tersebut bisa diolah untuk kebutuhan dan cara apa saja, dengan begitu kita bisa membuat website yang tidak menggunakan tampilan bawaan WordPress, melainkan memakai teknologi yang kita inginkan lalu menampilkan data dari blog WordPress tersebut.

Masih bingung? Mungkin menggunakan gambar lebih mudah dimengerti.

But I’m not sure if my diagram representation is good enough!
Sudah cukup teorinya, cepat beritahu bagaimana caranya!

Pertama dan yang terpenting, kamu harus membuat website yang bisa mengambil data dari REST API WordPress. Silahkan klik link berikut [1] [2] ini untuk referensi API-nya. Lalu untuk membuat website nya bagaimana? Maaf, untuk hal tersebut tidak ada pada tulisan ini. Kamu bisa mencarinya di internet dan topik tersebut sudah sangat banyak. Keywordnya bisa seperti “membuat website sederhana dengan VueJS” atau “membuat website dengan HTML, CSS, jQuery”. Ugh, sebenarnya inilah bagian tersulit, dimana tidak semua mengerti melakukannya. Kamu harus tahu teknis tentang web development. Blog saya sendiri menggunakan salah satu framework javascript yang sedang populer, VueJS, dengan mode Single Page Application (SPA). Tentu saja kamu bebas menggunakan framework atau teknologi lain, mungkin React atau Angular, atau cara paling legendaris yaitu gabungan dari pure HTML, CSS, jQuery!

Kedua, deploying. Tergantung dengan cara apa yang kamu pilih pada tahap pertama, untuk blog ini sendiri menggunakan Netlify untuk deploy-nya. Kamu bisa saja menggunakan VPS ataupun shared hosting. Alasannya saya memilih Netlify tentu saja karena gratis, haha. Netlify bisa deploy aplikasi VueJS (sepertinya React dan Angular juga), mendukung fitur auto deployment dari layanan Git ternama, dan bisa konfigurasi memakai custom domain. Berikut penjelasan singkat langkah – langkah deploy ke Netlify.

  • Upload website yang sudah kamu buat ke salah satu layanan Git berikut: Github, GitLab, atau Bitbucket.
  • Daftar akun di Netlify.
  • Setelah daftar, pada halaman utama pilih “New Site from Git”
That “Turqoise” button
  • Ikuti dua langkah berikutnya, yaitu pilih penyedia layanan Git yang kamu gunakan untuk mengunggah website pada tahap sebelumnnya.
  • Kemudian pilih repository website kamu.
  • Terakhir, pilih branch mana pada repository yang kamu pakai untuk deploy. Lalu pada bagian “Basic Build Settings”, disini kembali lagi disesuaikan dengan teknologi yang kamu pakai pada tahap pertama. Pakai React? Vue? Atau Angular?
  • Contoh untuk yang saya gunakan VueJS, dengan konfigurasi standar atau bawaan default dari VueJS “Build Command” nya diisi dengan npm run build. Seperti namanya, field ini diisikan oleh perintah yang digunakan untuk ngebuild projectmu. Saya kurang tahu perintah untuk React dan Angular.
  • Lalu “Publish directory” nya adalah dist. Field ini menentukan folder apa yang akan Netlify gunakan pada project kamu untuk di-publish ke internet. Untuk Vue, setelah project nya di build, maka Vue akan membuat otomatis folder dengan nama “dist” dimana isi dari folder itulah yang digunakan untuk menjalankan aplikasi Vue yang sudah dibuat.
  • Laluuuu… Deploy Site! Tunggu beberapa saat, Netlify akan terhubung dengan layanan Git yang telah kamu masukkan, lalu nge-“Build” projectmu. Cobalah mengunjungi website mu hasil deploy dari Netlify ini. Alamatnya apa? Lihatlah kata / frase pada bagian yang telah ditandai pada contoh gambar dibawah, lalu tambahkan .netlify.com
Based on this picture, the address is peaceful-nobel-d5a9e8.netlify.com

Ketiga, beli custom domain! Yeay. Di Indonesia sendiri lumayan banyak penyedia layanan domain misal dijaminmurah dan niagahoster. Kali ini saya tidak memberitahu menggunakan yang mana karena saya bukan brand ambassador dari perusahaan manapun haha.

Setelah berhasil melakukan deploy, maka saatnya menggunakan custom domain agar website kamu terlihat lebih personal atau profesional.

  • Pilih “Domain settings” seperti yang ditunjukkan pada gambar terakhir diatas, lalu akan tampil halaman seperti gambar dibawah ini.
Domain settings page
  • Klik tombol “Add domain alias”, lalu masukkan domain yang telah kamu beli. Tambahkan juga versi menggunakan www. Biasanya orang masih menuliskan www, jadi jika tidak ditambahkan malah website kamu tidak terbuka.
  • Setelah berhasil ditambahkan, klik badge “Netlify DNS” disamping record domain kamu agar diarahkan ke halaman “DNS settings”.
“Go to DNS zone details”
  • Pada halaman “DNS settings”, geser halaman kebawah sampai kamu menemukan bagian “Nameservers”.
  • Seperti yang ditampilkan pada gambar, terdapat empat nameserver yang akan kamu gunakan. Buka tab baru dan kunjungi halaman pengaturan DNS di tempat kamu membeli custom domain.
Using “Nameservers” from Netlify
  • Setelah itu tunggu sampai paling lama 24 jam agar DNS nya berhasil diarahkan ke domain kamu yang baru. Biasanya 10-15 menit kemudian kamu sudah bisa mengunjungi websitemu dengan domain personal, yeay! Tidak perlu menunggu hari esok yang cerah.

Sekian dulu pemaparan singkat tentang salah satu cara untuk publish sebuah website murah meriah merekah dengan custom domain agar terlihat lebih profesional. Atau mungkin saja kamu punya referensi lain selain Netlify yang fiturnya bisa hosting aplikasi web yang kompleks?