Membangun Website Sederhana Dengan Blogdown Static Site Generator

Membangun Website Sederhana Dengan Blogdown Static Site Generator

Blogdown

Blogdown merupakan salah satu package dalam bahasa pemrograman R untuk membangun webiste menggunakan Markdown ataupun R Markdown. Website yang dihasilkan dengan bersifat static site, karena Blogdown menggunakn Hugo sebagai backendnya defaultnya. Yang mana dapat kita ketahui, bahwa Hugo adalah salah satu Static Site Generator seperti yang pernah saya tulis di postingan sebelumnya.

Untuk memulai membangun website sederhana dengan Blogdown, kamu bisa mengikuti langkah-langkah berikut:

1. Instalasi Blogdown

Dalam hal ini, saya mengasumsikan kalau kalian sudah memasang R (https:// www.r-project.org) dan RStudio IDE (https://www.rstudio.com). Sedangkan, untuk menginstall package Blogdown di R dapat menjalankan perintah berikut pada RStudio:

install.packages("blogdown")

atau bisa juga menggunakan perintah:

if (!requireNamespace("devtools")) install.packages("devtools") devtools::install_github("rstudio/blogdown")

Pada perintah pertama, kita memasang Blogdown dari CRAN dan sedangkan pada perintah kedua kita memasang Blogdown dari Github. Setelah sukses memasang Blogdown, jalankan perintah:

blogdown::install_hugo()

2. Membangun website Hugo dan memasang tema

Pada tahap ini, kita akan mencoba membuat sebuah proyek pada RStudio IDE dengan cara pilih File → New Project → New Directory → New Project → Project Type → Website Using blogdown lalu beri nama folder, sebagai contoh kita beri nama latihan dan kita letakkan di folder Project. Untuk pengaturan lainnya bisa melihat gambar dibawah tetapi harus terkoneksi terlebih dahulu ke Internet untuk mengunduh tema dari webiste kita nanti:

New Project Rstudio

RStudio akan menampilkan proyek yang kita buat tadi kurang lebih seperti ini:

Tampilan RStudio

Namun, jika ingin merubah tema dapat diubah pada kolom Hugo Themes. Dan untuk mencari tema bisa ke Github atau ke Hugo Themes. Pada kolom Hugo Themes diisi dengan link ke Github, contohnya tema Hugo Academic dengan alamat repo: https://github.com/gcushen/hugo-academic, kita isi kolom Hugo Themes dengan gcushen/hugo-academic.

3. Menjalankan website secara lokal

Untuk menjalankan website secara lokal dapat menggunakan perintah pada RStudio:

blogdown:::serve_site()

Sekarang buka browser dan ketikkan alamat http://127.0.0.1:4321/, alamat ini akan menampilkan website yang kita buat secara lokal.

tampilan website

5. Pengaturan awal

Untuk merubah beberapa pengaturan dapat kita temui pada file config.toml di folder root proyek, klik dua kali pada file tersebut dan akan menampilkan seperti berikut:

config.toml

Kita coba rubah beberapa baris kode toml berikut:

# ini adalah judul website
title = "Web Latihan Blogdown"

# kode google analytics, UA-4xx adalah contoh kode
googleAnalytics = "UA-4xxx"

# Jika ingin menggunakan disqus untuk kolom komentar, diisi dengan username akun kalian pada disqus
disqusShortname = ""

# permalink website untuk link postingan
[permalinks]
    post = "/:slug/"

# deskripsi website, untuk mengisi meta description
[params]
    description = "Website latihan SSG Blogdown"

Sekarang coba buka browser kalian, dan arahkan ke alamat http://127.0.0.1:4321/, lihat perbedaannya.

website edit

6. Membuat postingan

Untuk membuat isi dari website yang telah dibuat dengan cara klik Addins → New Post, maka muncul pop up seperti berikut:

new post blogdown

Sedangkan untuk format postingan kita gunakan Markdown saja, hal ini untuk mempermudah teman-teman belajar Static Site Generator. Dan untuk mempelajari Markdown dasar bisa melihat postingan saya tentang The Markdown Era. Silahkan copy tulisan dibawah ke dalam postingan kalian:

Belajar membuat postingan dengan Markdown di Blogdown.

# Ini adalah H1
## Ini H2
### Ini H3

*Ini tulisan miring*
_Otakmu jangan miring yah, cukup tulisannya saja_

Selanjutnya coba website lokal tadi dan voila terdapat postingan baru.

postingan baru

7. Deployment

Web sudah jadi, postingan pun sudah ada. Waktunya proses deployment agar website kita bisa diakses oleh orang lain. Untuk proses deployment sampai saat ini baru mencoba Netlify, untuk kodenya saya taruh di Github. Jadi, si Github cuma buat nampung kode dan Netlify untuk rendering kode menjadi laman web yang berupa HTML, CSS dan kawan-kawannya. Selain Netlify, ada Updog dan bisa juga memakai Gitlab dengan sistem CI/CD nya yang cukup menarik untuk dipelajari, mungkin lain waktu akan saya coba buat tutorialnya. Dalam postingan ini tidak saya praktikan proses Deployment, saya anggap teman-teman sudah bisa upload dan membuat repositori di Github.

8. Static Site Generator lainnya

Selain menggunakan Hugo, Blogdown juga bisa menggunakan beberapa Static Site Generator seperti Jekyll dari bahasa pemrograman Ruby. Jekyll sendiri merupakan Static Site Generator yang dipakai untuk membuat Github Pages secara default. Bisa juga menggunakan Hexo yang terbiasa dengan Node.js. Untuk menggunakan dua Static Site Generator tersebut memang perlu sedikit pengaturan tambahan yang cukup mudah, karena saya sendiri belum pernah mencoba belum bisa saya tulis hanya sebagai informasi tambahan saja.

Begitulah Membangun Website Dederhana Dengan Blogdown Static Generator, jika tidak terbiasa dengan RStudio bisa menggunakan Hugo langsung atau Jekyll, Hexo, Pelican, Gatsby atau Static Generator lainnya sesuai bahasa pemrograman yang sering digeluti atau dipelajari. Tulisan ini terinspirasi dari salah satu teman di Boxer, bertanya bagaimana membuat web dengan Static Site Generator. Saya sendiri juga sudah memakainya, silahkan kunjungi blog saya dengan klik tautan ini. Blognya saya buat dengan Blogdown, Hugo, Github, dan Netlify. Jika ada pertanyaan, silahkan ajukan lewat kolom komentar ya!.

Referensi tulisan:
Yihui Blog

Share This Post

Leave a Comment

Your email address will not be published. Required fields are marked *