Akhirnya saya menengok lagi blog pribadi saya yang sudah lama terbengkalai. Sebagai informasi, blog lama saya dibuat menggunakan blogspot dan memang sudah dari awal isinya seputar data dan lebih technical. Sekarang saya menggunakan Hugo, R Blogdown, Github dan Netlify, alasannya karena lebih mudah untuk blog pribadi dengan tema techincal dan tentu saja karena saya banyak menggunakan dan membahas R di blog saya. Pada post ini saya akan berbagi bagaimana membuat blog dengan R menggunakan blogdown hingga hosting di Netlify.

Disclaimer : Jika anda ingin membuat blog yang bukan bertema technical dan tidak banyak membutuhkan snippet code, grafik dll, Blogspot, Wordpress dan platform serupa sudah sangat cukup untuk kebutuhan anda. Pun, jika anda berniat membuat technical blog dan anda butuh kepraktisan dan fitur lengkap, medium.com juga lebih dari cukup. Cara yang akan saya bahas ini bisa jadi lebih ribet dan memusingkan untuk yang belum terbiasa. Tapi, kalo anda butuh technical blog yang lebih fleksibel, personal dan anda orangnya semangat belajar hal-hal baru, maka tidak ada salahnya membaca sharing saya ini.

Dengan menggunakan R blogdown, berarti anda harus setuju blog anda akan menggunakan Hugo. Sebagai informasi Hugo adalah salah satu static site generator. Selain Hugo ada static site generator lain seperti Jekyll, Gatsby, dll.

Pre-Request

Selamat datang orang yang semangat belajarnya tinggi. Untuk membuat blog sesuai post ini, maka anda harus punya/melakukan hal-hal berikut.

  1. Membaca blogdown online book dari pembuatnya langsung. Setidaknya chapter 1 dulu.
  2. R Studio dan Git terinstall di device anda. Apa? belum pake R studio? Anda WAJIB pakai demi kebaikan & kemudahan anda sendiri. Ga cuma untuk keperluan blogging tapi pemakaian R sehari-hari juga.
  3. Github account. Harus banget pake github? Yes, you should!. Github memang menyebalkan untuk orang non-hardcore programmer kayak saya. Saya benci belajar git, walaupun tahu manfaatnya. Tapi saya harus belajar github, dan anda juga!. bisa baca disini Happy Git and GitHub for the useR

Workflow

workflow Saya akan bagi stepnya menjadi 4 bagian tentang apa yang harus anda lakukan di:

  1. Github
  2. Terminal (command prompt kalo di windows)
  3. RStudio
  4. Netlify

1. Di Github

Hal pertama yang dilakukan adalah membuka github dan masuk ke akun anda (sign up jika belum punya akun).

1.1 Buat new repository

Buat repo baru beri nama apapun, misalnya mypersonal-blog. Centang initialize with README, beri deskripsi singkat kalo anda mau. Biarkan Add .gitignore dan Add license sebagai None. Seperti contoh dibawah ini: create repo

1.2 Clone repository

Buka repo yang baru anda buat dan klik clone this repo. Di sebelah kanan atas ada button hijau dengan tulisan Clone or Download. Pilih clone with HTTPS lalu copy link yang ada. Link yg ter-copy harusnya : https://github.com/yourusername/repo-name.git. Contoh: https://github.com/idrusfachr/personal-blog.git

2. Di Terminal

Buka terminal di laptop anda, jika menggunakan windows search “cmd” dan klik command prompt. Langkah ini bertujuan mendownload remote repository yang baru anda buat di Github ke device anda dan selanjutnya akan saling sinkron.

2.1 Buat folder baru di device

Sebelum menggunakan terminal terlebih dulu buatlah folder baru yang akan digunakan menaruh file-file blog anda nanti. Misal buat folder baru di dalam folder C:/Documents bernama personal-blog.

2.2 Clone repo melalui terminal

Buka terminal, di terminal/command prompt arahkan ke folder baru yang sudah dibuat dengan cara ketik : cd “/Documents/personal-blog/” enter. Skrg terminal anda aktif di dalam folder personal-blog. Setelah itu ketik git clone [Paste link repo yang diperoleh di step 1] ke dalam terminal.

1

git clone https://github.com/yourusername/repo-name.git

klik enter, maka file-file di repo github akan terdownload ke dalam folder yang sudah anda buat.

Selesai urusan perterminalan.

3. Di R Studio

Sampai di bagian yang mungkin paling familiar dengan anda yaitu R Studio. Di Rstudio inilah sebagian porsi blogging dihabiskan mulai dari memilih tema, atur layout, membuat dan publish konten dll.

3.1 Setup

Langkah pertama adalah install package yang dibutuhkan dan set R project di device.

3.1.1. Install blogdown dan Hugo di RStudio

blogdown adalah package yang dibuat khusus untuk kebutuhan blogging menggunakan R, seperti juga bookdown untuk mempublish buku melalui R. Dengan blogdown kita bisa mengatur blog kita dari dalam R Studio.

1
2

  ## Install from CRAN
  install.packages('blogdown')

3.1.2. Install Hugo

Setelah blogdown terinstall selanjutnya adalah install Hugo kedalam R.

1
2
3
4

blogdown::install_hugo()
# or
library(blogdown)
install_hugo()

3.1.3. Set project directory

Di pojok kanan atas pilih File -> New Project -> Existing directory. Pilih folder yang sudah dibuat di step 2 yang sudah berisi file hasil clone repo github anda. Kemudian create project. Contoh diatas adalah project directory saya, pastikan path project anda sesuai dengan folder yang sudah anda buat di step sebelumnya.

3.1.4. Setting

Sekarang anda harusnya ada di dalam project yang barus saja dibuat. Tahap terakhir di bagian set up adalah setting. Sekarang di viewer pane R studio anda seharusnya ada file bernama .gitignore (jika belum ada, pastikan lagi sudah melakukan semua step-step sebelumnya). Buka file tersebut dan anda perlu menambahkan beberapa line ke dalam file ini. Lakukan seperti screenshoot dibawah. 4 baris pertama di file ini otomatis di-generate saat clone repo kedalam folder project. Baris setelahnya perlu anda tambahkan sendiri. Jika tidak menggunakan windows, ganti line keenam dengan .DS_store. Line terakhir public/ diperlukan jika anda akan menggunakan Netlify (sebaiknya iya, baca bagian Netlify di akhir tulisan ini) untuk menghosting blog anda.

3.2 Saatnya membuat blog

Sekarang kita siap untuk membuat blog di dalam R Studio. Untuk membuat blog baru cukup jalankan command blogdown::new_site(). Tapi…. Sebelumnya pasti anda butuh tema atau tampilan blog anda.

3.2.1. Memilih tema

Ada banyak tema yang tersedia di Hugo. Di blogdown online book ada beberapa rekomendasi tema yang bisa dipertimbangkan. Untuk sebagai mahasiswa, dosen, researcher ada tema yang sangat direkomendasikan dan sudah populer dikalangan akademisi, hugo-academic.

Saya sendiri memilih tema Love It untuk blog saya. Saran: jika anda tidak suka keribetan dan lebih mementingkan isi blog anda dibanding tampilan, sebaiknya menggunakan tema default dari blogdown yaitu hugo-lithium. Set-up custom tema bisa menyita banyak waktu jika belum terbiasa.

Setelah memilih tema, sekarang bisa membuat site baru anda.

  • Jika ingin menggunakan tema default
1

blogdown::new_site()  #menggunakan default theme hugo-lithium
  • Jika menggunakan tema custom
1
2
3
4
5
6
7

#misal menggunakan hugo-academic theme
blogdown::new_site(theme = "gcushen/hugo-academic", theme_example = TRUE) 

#Atau

#misal menggunakan tema yang saya pakai
blogdown::new_site(theme = "dillonzq/LoveIt", theme_example = TRUE)

3.2.2. Edit blog

Selamat, atas lahirnya website baru anda. Langkah selanjutnya adalah mencobanya, membuat first post dsb. Dalam bab ini, saatnya anda banyak-banyak membaca blogdown book terutama chapter 1.3 hingga 1.7.

Untuk melihat tampilan awal website anda gunakan addins serve site atau dengan command blogdown::serve_site(). Anda akan melihat preview website anda di view pane R studio atau di port http://127.0.0.1:XXXX/ di browser setelah menjalankan serve_site(). Gunakan serve_site() untuk melihat perubahan yang anda buat sebelum mempublish perubahan yang anda buat. Gunakan stop_serve() untuk keluar dari mode preview.

Saya menyarankan untuk menggunakan R Studio Addins untuk melakukan command-command misalnya serve site, membuat post baru, insert image dsb. Addins untuk blogdown seharusnya otomatis terinstall di R Studio anda saat install blogdown package.

  • Salah satu langkah awal yang perlu dilakukan adalah mengedit file config.tomlanda. Disinilah konfigurasi penting dalam blog anda berada. Langkah paling minimal adalah dengan menyamakan konfigurasi file config.toml anda dengan file config di example site dari tema yang anda gunakan. Contoh config di tema hugo-lithium. Contoh config dari blog saya. Yang paling wajib diganti adalah baseUrl, set dengan domain yang anda miliki (misal sudah punya) dan harus diakhiri backslash / (misal : “https://example.com/"). Contoh diblog ini, saya menggunakan base URL “https://idrusfachr.netlify.com/" karena saya ingin menggunakan Netlify dan subdomain gratis dari Netlify pasti mengandung xxxx.netlify.com, suatu saat jika saya membeli domain baru dengan nama “www.idrusfachr.com/" maka saya harus mengganti baseURL di file config saya dengan URL tersebut.

  • Membuat post baru bisa dilakukan dengan command blogdown::new_post() atau dengan Addins. Klik Addins, pilih new post dan akan muncul panel sebagai berikut. Isikan judul post anda, nama author, jenis file (gunakan .RMarkdown jika anda butuh run-able R code dipost anda), pilih subdirectory tempat post akan disimpan. Post harus disimpan dibawah folder content/post (kebanyakan), maka anda harus mengisi subdirectory dengan post (somehow tema yang saya pakai menggunakan subdir posts, sehingga saya harus mengisinya dengan posts). Kenapa ini penting? karena semua file dibawah folder content/ akan dicopy secara otomatis ke folder public/ yang akan dirender menjadi html file sehingga bisa muncul di-blog, jika tidak berada dibawah folder content/ maka tidak akan muncul di-blog anda. Selanjutnya pilih tanggal, tag, category dsb yang diperlukan. Jika sudah klik tombol Done, anda akan diarahkan ke file baru di R Studio anda yang bisa anda isi dengan konten yang akan dibuat. Dengan konfigurasi diatas maka akan muncul Rmarkdown file baru sebagai berikut. Anda tinggal mengisi konten anda dibawah garis ---. Tutorial menulis di markdown.

  • Simpan image dan file yang ingin anda tambahkan di post anda di folder static/. Jika anda ingin menambahkan image dipost gunakan addins Insert Image atau gunakan ![](/images/chart.png) di file markdown. Contoh tersebut berarti saya sudah menyimpan image bernama chart.png di dalam folder static/images/.

  • Anda bisa menambahkan fitur-fitur lain seperti Disqus komentar, google analytics, sytax highlighter dll.

  • Gunakan terminal di R studio untuk sync dengan github anda. Setiap melakukan perubahan di blog misal membuat post baru, edit config, dsb, tambahkan file yang baru diedit dengan git add kemudian commit perubahan tersebut ke github anda dengan git commit, setelah selesai melakukan editing, cek preview dengan serve_site() dan puas dengan hasilnya, segera push perubahan yang anda lakukan di lokal (device anda) ke remote repo di github dengan git push. Terminal di R studio terdapat di panel yang sama dengan console. Command penting:

    • git add -A untuk menambahkan semua file yang sudah diedit
    • git commit -m "isi caption" untuk commit changes yang sudah dibuat di file-file anda. Ganti caption dengan info yang relevan dengan perubahan yang dilakukan.
    • git push menyimpan perubahan yang dilakukan di lokal (laptop) anda ke remote repository (Github repo) anda.

Semua pengaturan website anda bisa dilakukan di dalam R Studio termasuk edit layout, tampilan dsb. Sudah banyak referensi baik di blogdown book maupun artikel lain yang bisa dijadikan referensi untuk customise lebih lanjut sesuai kebutuhan.

3.3. Rangkuman workflow

Jika dirangkum, workflow yang sebaiknya dilakukan di R Studio adalah berikut:

  1. Buka Rstudio project dari blog anda
  2. Gunakan serve site Addins
  3. Lihat preview site anda di viewer pane atau view di browser http://127.0.0.1:xxxx (bisa dilihat diconsole setelah melakukan serve site).
  4. Pilih file yang ingin anda edit di file pane R Studio
  5. Setelah melakukan editing, save file dengan tombol save atau (ctrl+s). Jangan gunakan tombol knit!). Console R Studio akan reload, view panel akan terupdate dengan perubahan yang baru dilakukan, begitu juga dengan browser setelah anda refresh. Tapi ingat, ini masih dilokal/komputer anda saja, belum live di production.
  6. Jika masih belum puas dengan perubahan/ada revisi, ulangi lagi step 4-5. Setelah puas, lakukan git add, commit dan push perubahan anda ke Github.

4. Di Netlify

Akhirnya sampai di step terakhir. Sebagaimana ditunjukkan di blogdown book bagian deployment, ada beberapa opsi selain Netlify untuk deploy website anda, misalnya Github page yang juga sering dipakai. Tapi berdasarkan review, Netlify lebih difavoritkan dikalangan developer atau pengguna static site. Hal itu karena kemudahan, security dan scalability yang ditawarkan. Perbandingan Netlify vs Github page.

Anggap saja Netlify sebagai tempat hosting sekaligus yang mengurus server website. Sebagaimana kalau kita blogging dengan platform tradisional kita juga membutuhkan tempat hosting agar website kita bisa live dan bisa diakses pembaca.

Disinilah github berfungsi karena Netlify akan connect dengan repo blog yang sudah kita buat di Github. Segala perubahan yang ada di repo setelah kita melakukan git push, akan secara otomatis ter-update dan dideploy oleh Netlify secara realtime (continues deployment). Jadi setelah anda melakukan perubahan di blog melalui komputer, kemudian commit dan push ke repo gitub, dalam hitungan detik Netlify akan memroses perubahan tersebut dan akan di deploy di production (live website) dan perubahannya langsung bisa diakses oleh pembaca webite anda.

4.1 Deploy time

Anda bisa mengikuti instruksi ini atau ini. Tapi menggunakan Netlify sangat mudah dan simple.

  1. Sign up menggunakan akun Github. Pergi ke www.netlify.com dan sign-up menggunakan akun github.
  2. Login dan pilih New site from Git -> Continues deployment: pilih Github.
  3. Setelah itu, pilih repo di Github anda. Pilih repo yang berisi blogdown project pastinya. Misal username/mypersonal-blog.
  4. Setelah memilih repo berisi blog anda, selanjutnya lakukan deployment configuration. Ada 2 hal penting yang perlu di-set. build command dan publish directory (yaitu folder public/). Contoh basic konfigurasi dibawah ini. Cek versi hugo yang terinstall di device di terminal dengan command hugo version. Deploy site dan tunggu beberapa menit Netlify akan build site anda. Setelah selesai anda akan mendapat random subdomain abcd-xyz-1234.netlify.com. Tenang, anda bisa mengganti abcd-xyz-1234 dengan nama yang lebih proper misal idrusfachr.netlify,com. Suatu saat jika anda ingin membeli domain anda bisa mengganti subdomain netlify dengan domain anda misal “domainku.id” dan jangan lupa ganti baseURL di file congif.toml setiap anda mengganti nama domain.

Sekarang, website anda sudah live menggunakan blogdown, Github dan Netlify.

Penutup

Anda bisa melakukan advance setting misal mengganti warna tampilan, font, layout, menambah page section, customise home, dsb. Tentu saja harus siap berurusan dengan CSS, Js dan html file. Sepanjang tidak urgent sekali, sebaiknya hindari melakukan perubahan yang terlalu advance untuk menghindari error dsb.

Selamat! telah berhasil membuat blog baru anda. Jika belum berhasil, setidaknya sudah nyemplung, sedikit lagi inshaa Allah berhasil. Terima kasih sudah mengikuti post yang panjang ini. Semoga bermanfaat!

Salam.

Ref utama: