Blogging dengan R Blogdown, Hugo dan Netlify
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.
- Membaca blogdown online book dari pembuatnya langsung. Setidaknya chapter 1 dulu.
- 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.
- 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
Saya akan bagi stepnya menjadi 4 bagian tentang apa yang harus anda lakukan di:
- Github
- Terminal (command prompt kalo di windows)
- RStudio
- 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:
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.
|
|
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.
|
|
3.1.2. Install Hugo
Setelah blogdown
terinstall selanjutnya adalah install Hugo kedalam R.
|
|
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
|
|
- Jika menggunakan tema custom
|
|
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.toml
anda. Disinilah konfigurasi penting dalam blog anda berada. Langkah paling minimal adalah dengan menyamakan konfigurasi fileconfig.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 adalahbaseUrl
, 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, pilihnew 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 denganpost
(somehow tema yang saya pakai menggunakan subdir posts, sehingga saya harus mengisinya denganposts
). Kenapa ini penting? karena semua file dibawah foldercontent/
akan dicopy secara otomatis ke folderpublic/
yang akan dirender menjadi html file sehingga bisa muncul di-blog, jika tidak berada dibawah foldercontent/
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 bernamachart.png
di dalam folderstatic/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 dengangit commit
, setelah selesai melakukan editing, cek preview denganserve_site()
dan puas dengan hasilnya, segera push perubahan yang anda lakukan di lokal (device anda) ke remote repo di github dengangit push
. Terminal di R studio terdapat di panel yang sama dengan console. Command penting:git add -A
untuk menambahkan semua file yang sudah dieditgit 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:
- Buka Rstudio project dari blog anda
- Gunakan serve site Addins
- Lihat preview site anda di viewer pane atau view di browser http://127.0.0.1:xxxx (bisa dilihat diconsole setelah melakukan serve site).
- Pilih file yang ingin anda edit di file pane R Studio
- 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.
- 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.
- Sign up menggunakan akun Github. Pergi ke www.netlify.com dan sign-up menggunakan akun github.
- Login dan pilih
New site from Git -> Continues deployment:
pilih Github. - Setelah itu, pilih repo di Github anda. Pilih repo yang berisi blogdown project pastinya. Misal
username/mypersonal-blog
. - 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 commandhugo 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 filecongif.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:
[Slide] Machine Learning 101
This is my slide for Machine Learning 101 talk at Kaskus, Aug 2017.
SLIDE
Kinerja Pembangunan Manusia Indonesia
IPM adalah salah satu Indikator penting dalam mengukur kinerja pemerintah baik daerah maupun pusat. Pada periode 2010 hingga 2015 provinsi-provinsi di luar pulau Jawa dengan status IPM rendah atau sedang menujukkan perkembangan IPM yang positif.
Latar Belakang
Indeks Pembangunan Manusia (IPM) menurut BPS satu indikator penting dalam mengukur keberhasilan pemabangunan manusia suatu wilayah atau Negara. IPM menjelaskan tentang bagaimana penduduk suatu wilayah/Negara dapat mengakses hasil pembangunan dalam memperoleh pendapatan, pendidikan dan sebagainya. Di Indonesia sendiri, IPM termasuk data strategis karena tidak hanya digunakan sebagai ukuran kinerja pemerintah, tetapi IPM digunakan juga sebagai salah satu alokator penentuan Dana Alokator Umum (DAU). Oleh karena itu, data IPM menjadi sangat penting untuk diperhatikan dalam memantau perkembangan pembangunan suatu wilayah/Negara.
Overview
Pada kesempatan kali ini, akan dilakukan analisa terhadap data IPM tiap provinsi di Indonesia periode 2010 hingga 2015 yang dipublikasikan oleh BPS. Pertama, mari kita lihat bagaimana perkembangan IPM provinsi-provinsi di Indonesia.
BPS mengategorikan IPM menjadi empat kategori sebagai berkut:
- IPM < 60 : IPM rendah
- 60 < IPM < 70 : IPM sedang
- 70 < IPM < 80 : IPM tinggi
- IPM > 80 : IPM sangat tinggi
Pada grafik diatas terlihat ada beberapa provinsi yang mengalami kenaikan status IPM dari sedang ke tinggi seperti Banten, Riau dan Sulawesi Utara serta dari rendah ke sedang yaitu Sulawei Barat dan Papua Barat. Provinsi lain statusnya cenderung stagnan selama 2010 hingga 2015. Sekilas juga dapat kita lihat bahwa wilayah Indonesia timur masih tertinggal dalam pembangunan manusia dari wilayah-wilayah lain di Indonesia. Catatan : Provinsi Kalimantan Utara baru disahkan tahun 2012 sehingga nilai IPM tahun 2010 hingga 2012 masih kosong.
Provinsi Berkinerja Terbaik
Selanjutnya, kita akan melakukan analisa lebih dalam untuk mengetahui provinsi mana yang melakukan perbaikan signifikan dalam pembangunan manusia. Untuk itu, ukuran yang lebih sesuai untuk menggambarkan kinerja pemerintah provinsi dalam pembangunan manusia adalah laju pertumbuhan IPM dari tahun ke tahun dibandingkan nilai IPM yang dimiliki.
Dari grafik diatas dapat kita lihat bahwa tiga provinsi dengan laju pertumbuhan IPM terbesar berturut-turut adalah NTB, NTT dan Kalimantan Barat. Cukup menarik, dari sepuluh besar petumbuhan IPM terbesar, hanya Jawa Timur yang berasal dari pulau Jawa. Selebihnya adalah provinsi di luar pulau Jawa. Sisi positifnya adalah pembangunan di luar Jawa sudah semakin baik selama periode 2010-2015.
Grafik diatas adalah perbandingan rata-rata pertumbuhan IPM manusia tiap provinsi dengan rata-rata pertumbuhan Nasional. Provinsi dengan status IPM tinggi (70 – 80) seperti DKI Jakarta, DI Yogyakarta dan Bali rata-rata laju pertumbuhannya justru di bawah rata-rata nasional.
Grafik diatas memperkuat temuan bahwa nilai IPM awal berbanding terbalik dengan rata-rata laju pertumbuhan. Semakin tinggi nilai IPM awal semakin rendah rata-rata laju pertumbuhannya dengan nilai korelai 0,65.
Kesimpulan
Laju pertumbuhan pembangunan manusia Indonesia diukur dari IPM mengalami kenaikan di tahun 2010 hingga 2015. Kenaikan yang tinggi terjadi pada provinsi yang status awal IPM-nya adalah rendah atau sedang dan hal tersebut terjadi kebanyakan di provinsi yang berada di luar pulau Jawa, sebuah indikasi positif untuk pemerataan pembangunan. Sedangkan provinsi dengan status IPM tinggi cenderung lambat pertumbuhan IPM-nya.
Referensi : https://www.bps.go.id/ http://ipm.bps.go.id/page/ipm
Visualize Indonesia's Population Data using ggplot2
Intro
Many people say that ggplot is a powerful package for visualization in R. I know that. But i’d never triggered to explore this package deeper (except just to visualize mainstream plot like pie chart, bar chart, etc.) till this post impressed me.
That post is about plotting map using ggplot. The pretty plots resulted on that post challenged me to explore ggplot more, especially in plotting map/spatial data.
Preparation
We always need data for any analysis. The author of those post use USA map data available in ggplot2
package. Though that post is reproducible research (data and code are available) menas i can re-run the examole on my own, but I want to go with local using Indonesia map data.
So, objective of this post is to visualize Indonesian population by province in Indonesia. So we need the two kinds of dataset. First is population data in province level and second is Indonesia map data. The first data is available in BPS site. The data consists of population density (jiwa/km2) for each province in Indonesia from 2000 till 2015. I will go with the latest year available on the data which is 2015.
Oke, now we arrive to the hardest part. I stacked for a while when searching Indonesia map data that suit for ggplot2 geom_polygon format. But Alhamdillah, after read some articles about kind of spatial data, I got one clue, I need shape data with .shp format to plot map data. And just by typing “indonesian .shp data” on google, He will provide us tons of link results. Finally, I got Indonesian .shp data from this site. I downloaded level 1 data (province level) for this analysis.
Data Acquisition
The fist step is load data into R. I use rgdal package to import .shp data. rgdal is more efficient in loading shape data compared to others package like maptools, etc.
|
|
Here’s one of the advantages using rgdal
package, though it is in shape format we can use operation like names()
, table()
, and $
subset operation like in data frame format.
After data loaded into R workspace, we need to reformat shape data into format that suit to ggplot2
function.
|
|
|
|
data will look like above table.
Next step, we will try to visualize the data we already have
|
|
It works!, my data has suitable for ggplot2 format. Let’s make it more colorful by colorize each province.
|
|
Cool! looks much better. But that’s not the goal of this analysis. Let’s moving forward. Now need to add population density data to complete the analysis.
|
|
to make it more intuitive, let’s change the column name with what it should be.
|
|
population
data has two column; provinsi and density with 34 rows fit to the number of province in Indonesia from Aceh to Papua. Next, we need to merge population dataset with idn_shape_df
dataset. If you look in idn_shape
, the id
column in idn_shape
dataset represents the province name. So, the id
column in idn_shape_df
should represents province name too. Then value in id
column better we replace by province name.
|
|
Before we join, we notice that id index on idn_shape_df
somehow start from 0 while id index on idn_shape
. We need transform id
on the two tables to be identical.
|
|
|
|
Now shapefile data idn_shape_df
are ready. Next let’s join it with Indonesia’s population data we get from BPS.
Since we have replaced value in id column by province name, it’ll be better if we also rename the id column name into provinsi. Then, we will merge population dataset with idn_shape_df using inner_join from dplyr package.
|
|
|
|
idn_pop_density
is the final data that will we visualise using ggplot2
.
Visualise Indonesia map data
Time to the main part of this analysis, plotting the density map.
|
|
Final touch
Cool! but it looks like it’s hard to discern the different in area. Let’s make it clearer by transforming the value of density by log10 , reseve the density color to make the more dark color indicate the more dense area also change legend title.
|
|
Note : If you notice there are some provinces that has white color, It’s because the province name on data from BPS and .shp
file has different value. So when we join that two tables by province name, some rows doesn’t match. For example Kep. Riau
and Kepulauan Riau
, Papua Barat
and Irian Jaya Bara
, Bangka-Belitung
and Bangka Belitung
. It needs further processing to handle this may be using regex join
etc. But i won’t cover that on this post.
Refference: