Daftar Static Site Generator untuk Membuat Blog

Ada 1001 cara untuk membuat blog. Kita bisa menggunakan teknologi dan bahasa pemrograman apa saja. Kita bisa menggunakan CMS seperti WordPress, Blogspot, atau Drupal. Bisa menggunakan framework dan library seperti Laravel (framework PHP) atau Next.js (Framework React). Atau bisa menggunakan teknologi Static-Site Generator (SSG).

Di artikel kali ini saya akan membahas tentang membuat website statis menggunakan SSG. Tetapi bukan tutorial atau how to, melainkan perkenalan dengan teknologi SSG dan beberapa SSG yang bisa Anda gunakan.

Apa Itu Static Site Generator (SSG)?

Secara sederhana, Static-Site Generator (SSG) adalah software yang menghasilkan halaman web statis, yaitu HTML, CSS, dan JavaScript (bila ada).

Untuk lebih jelasnya, mari kita analogikan website kita sebagai sebuah restoran siap saji dan setiap halaman di web kita adalah makanannya. Dengan SSG, setiap halaman yang tersaji di menu telah “dimasak” dan siap “disajikan” oleh browser. Sehingga pembaca tidak perlu menunggu lama untuk membaca konten kita.

Salah satu karakteristik SSG yang perlu digarisbawahi adalah ketiadaan database sehingga tidak memungkinkan berisi konten dinamis (interaktif) seperti fitur pencarian, kolom komentar, dan fitur yang memerlukan autentifikasi seperti login.

Meskipun begitu, fitur-fitur tersebut bisa ditambahkan dengan bantuan bahasa pemrograman pihak ketiga.

Jenis-Jenis Static Site Generator

Dewasa ini, teknologi SSG dan SSR (Static Site Rendering) saling berarsiran sehingga kerap membingungkan. Maka dari itu, saya hanya akan menyebutkan SSG yang benar-benar SSG. Untuk SSR seperti Next.js akan kita bahas di artikel terpisah.

Bila Anda tertarik untuk membuat blog menggunakan SSG, berikut beberapa platform yang bisa Anda gunakan.

1. Jekyll

• Bahasa: Ruby
• Template engine: Liquid
• Rilis: November 2008

Dirilis pada November 2008, bisa dibilang Jekyll merupakan Static Site Generator generasi pertama yang kemudian memicu lahirnya SSG lain. Dibangun di atas bahasa pemrograman Ruby. SSG ini pulalah yang digunakan untuk membangun GitHub Pages.

Meskipun begitu, bila Anda belum familiar dengan Ruby, Anda masih bisa menggunakan Jekyll.

2. Hugo

• Bahasa: Go
• Template engine: Go
• Rilis: Juli 2013

Rilis pada bulan Juli 2013 dan cukup populer hingga saat ini. Dikenal karena kecepatan dan kemudahan pembuatannya.

Dibangun di atas bahasa pemrograman Go. Walaupun begitu, berbeda dengan SSG lain yang dibuat sebagai framework-nya framework, Hugo adalah teknologi SSG yang berdiri sendiri.

Dengan Hugo, kita bisa membuat blog, sekadar landing page, company profile, atau web portofolio.

3. Gatsby

• Bahasa: JavaScript, TypeScript
• Template engine: Node.js, React, GraphQL
• Rilis: Juli 2015

Dibangun di atas JavaScript, lebih tepatnya Node.js, React, dan GraphQL. Anda yang terbiasa menggunakan React dan kesulitan membuat blog dengan Next.js, cobalah Gatsby. Anda juga bisa memanfaatkan komponen-komponen React agar blog Anda lebih interaktif. Untuk menampilkan data/konten, Gatsby menggunakan GraphQL sehingga barangkali Anda perlu familiar juga dengan query.

Bila sebelumnya Gatsby murni SSG, sejak versi 4 Gatsby juga menyediakan versi SSR.

4. Astro

• Bahasa: JavaScript, TypeScript
• Template engine: Svelte, React, Preact, Vue, SolidJS, Lit, AlpineJS, HTML, Markdown, MDX
• Rilis: Agustus 2022

Astro adalah web framework yang dirancang dengan pendekatan island architecture. Island architecture merupakan cara mengembangkan website yang cepat dengan menggabungkan Server-Side Rendering, Static Site Generation, dan partial hydration.

Selain itu, dengan Astro Anda bisa menggunakan berbagai framework JavaScript. Sebut saja React, Vue, atau Svelte. Hal ini menjadikan Astro cukup fleksibel karena dapat disesuaikan dengan skillset yang dimiliki web developer.

Untuk konten, Anda dapat menggunakan Markdown, MDX, atau data API. Astro juga dapat diintegrasikan dengan berbagai CMS favorit Anda.

5. VuePress

• Bahasa: JavaScript
• Template engine: Vue.js
• Rilis: April 2018

VuePress adalah versi SSG-nya dari Nuxt. Seperti yang disebutkan dalam dokumentasinya, mula-mula VuePress dibuat untuk membuat dokumentasi dari project Vue.js, tapi pada perkembangannya VuePress bisa digunakan untuk membuat web statis lain, termasuk blog.

6. VitePress

• Bahasa: JavaScript
• Template engine: Vue.js
• Rilis: Maret 2021

VitePress adalah penerus VuePress. Sama seperti VuePress, VitePress juga menggunakan Vue sebagai template engine. Bisa digunakan untuk membuat dokumentasi project, web statis, dan tentu saja blog.

Untuk Anda penggemar Vue garis keras, pengembangnya sendiri merekomendasikan VitePress jika ingin menggunakan SSG yang ditenagai Vue.

7. Eleventy (11ty)

• Bahasa: JavaScript
• Template engine: Vue.js
• Rilis: Desember 2017

Eleventy atau 11ty disebut-sebut sebagai static-site generator yang sangat simpel dan mudah digunakan. Meski untuk kecepatan, masih berada di bawah Hugo. Meski sama-sama dibangun di atas JavaScript, tapi berbeda dengan Astro dan Gatsby yang menggunakan React, Eleventy menggunakan framework Vue.js.

8. Jigsaw

• Bahasa: PHP
• Template engine: Blade
• Rilis: Februari 2016

Untuk Anda yang terbiasa menggunakan PHP tetapi merasa terlalu overkill bila harus menggunakan Laravel, Jigsaw adalah jawabannya. Jigsaw juga jawaban apabila Anda ingin menggunakan PHP tetapi tidak ingin menggunakan database karena, misalnya, tidak ingin membeli hosting segala macam.

9. Hexo

• Bahasa: JavaScript
• Template engine: EJS, Pug, Haml
• Rilis: Juni 2012

Hexo, SSG yang saya gunakan untuk membangun blog ini adalah static-site generator yang ringan dan simpel. Cocok untuk pemula atau yang baru berkenalan dengan teknologi SSG. Menggunakan EJS atau Embedded JavaScript sebagai template engine-nya.

Selain itu, bila SSG lain content management dan data query-nya agak ribet, untuk membuat konten atau menampilkan data konten di Hexo caranya cukup sederhana. Sayangnya, terbatas dalam hal routing dan fleksibilitas custom post type.

10. Gridsome

• Bahasa: JavaScript
• Template engine: Vue
• Rilis: Oktober 2018

Gridsome adalah Static Site Generator (SSG) berbasis Vue.js yang dirilis pada Oktober 2018. Framework ini memanfaatkan GraphQL untuk mengelola data dan menghasilkan situs statis yang cepat, modern, dan ramah SEO. Gridsome cocok untuk membangun blog, portofolio, atau situs dokumentasi dengan performa tinggi, terutama bagi pengembang yang terbiasa dengan Vue.

11. Sculpin

• Bahasa: PHP
• Template engine: Twig
• Rilis: Januari 2013

Bila Jigsaw menggunakan Blade sebagai template engine, Sculpin menggunakan Twig. Sebagai Static Site Generator (SSG) berbasis PHP, Sculpin dirancang untuk membangun web statis seperti blog, portofolio, atau dokumentasi dengan mudah.

Sculpin mendukung Markdown untuk menulis konten dan YAML untuk metadata, menghasilkan file HTML statis yang siap dihosting di layanan seperti Netlify atau GitHub Pages. Dirilis pada tahun 2013, meski tidak sepopuler Hugo yang dirilis pada tahun yang sama, tetapi Sculpin dapat menjadi alternatif bagi para web developer yang lebih nyaman menggunakan PHP.

Itulah daftar Static Site Generator untuk membuat blog. Semoga membantu. (eL)