Membuat blog headless WP

Membuat blog headless WP

Jadi ceritanya waktu awal2 corona heboh, gw diajakin bantu develop https://kawalcovid19.id/ nah tapi berhubung yang bantu disitu jago jago semua.. gabutlah gw.. alhasil cuma jadi silent reader disitu, maap yak T.T

nah web kawalcovid itu dibuat pake headless wp.. akhirnya tertarik lah gw buat coba pake headless wp.. nah disini gw mau migrate blog gw dari yg tadinya pake netlify cms jadi pake wp

jadi apa itu headless wp? headless wp itu kita pake CMS (wp) tapi ga pake view bawaan wp nya.. jadi kalo di ibaratin wp itu MVC, disini kita cuma pake MC nya aja.. V nya kita kerjain sndiri..
gw sndiri bikin View nya masih sama kaya kmarin pake gatsby, jadi cuma ganti source nya aja.. sblmnya pake gatsby yang ambil content dari markdown skrg dari wp.. dan untuk wp nya sndiri gw pake http://wordpress.com alesanya karna gw pengen cari yang gratisan aja.. sbnernya ada plus minusnya.. contoh plusnya: gratis, gaperlu ribet setup, minusnya akses terbatas, kayak mau install plugin atau custom tampilan dia harus upgrade dulu ke versi berbayar.. untungnya karna kita headless jadi masih bisa custom tampilan lol, jadi kalau trafik udah banyak bisa masukin script adsense #gagitu

Nah skrg gw mau mulai masuk ke pembahasan gimana cara buat blog dengan headless wp gratisan di wordpress.com + gatsby ini

  1. masuk ke http://wordpress.com kemudian login/register kayak biasa sampe masuk ke halaman admin
  2. setelah itu masuk ke https://developer.wordpress.com/apps/new/ dan buat applikasi baru, kalo udah kalian bakal dapet clientid dan client secret, client id dan secret ini gunanya buat bisa akses worpdress API, jadi kita bakal consume data dari wordpress API
  3. nah untuk frontendnya disini gw pake gatsby, tinggal ikutin petunjuk disini aja
    https://www.gatsbyjs.org/packages/gatsby-source-wordpress/?=wordpress
    waktu set config, yang perlu di perhatiin:
    hostingWPCOM di set jadi true
    kemudian bagian auth
    auth: {
    wpcom_app_clientSecret:process.env.WORDPRESS_CLIENT_SECRET,
    wpcom_app_clientId: "54793",
    wpcom_user: "gatsbyjswpexample@gmail.com",
    wpcom_pass: process.env.WORDPRESS_PASSWORD
    }
    kalian disini kita pake wp.com cuma perlu perhatiin 4 bagian itu, sisanya tinggal copas contoh aja
    kalo udah tinggal push projectnya ke github
  4. bikin akun netlify
    netlify ini gunanya buat host web kita, nah disini ada gratisan buat 300 menit build time, info lebih lanjut bisa liat sini https://www.netlify.com/pricing/
    kalo udah connectin netlify ke project kita.. dia bakal generate CI/CD buat auto deploy setiap ada push ke master

udah deh kelar.. sebenernya ada beberapa bagian yang ngeselin ternyata setelah gw coba.. contohnya content dari wp formatnya html, jadi plugin gatsby kayak lazy load dll ga jalan buat di content ini.. kan ngeselin.. trus juga masalah migrasi dan deploy, karna kontent lama blog gw bentuknya md(markdown) jadi gabisa di import ke wp.. terus waktu post di wp, harus masuk ke netlify dan deploy manual (karna gatsby SSR, dia siapin content dll di buildtime, jadi kalo ada postbaru ga kebaca selama ga di deploy ulang) bisa sih untuk masalah ini diakalin dengan bikin plugin wp.. masalahnya karna gw pake wp gratisan jadi gabisa pake plugin.. ribet bener emg hidup ini kalo cari gratisan..

yaudahlah… segitu dulu aja post kali ini

tutorial