Astro + Firefly: The Best Combo for Personal Blog

Chit-chat#

Tepat tanggal 20 Juli 2026, ketika saya sedang “iseng” melihat-lihat template website Astro, saya “terkesiap” dengan sebuah tema yang eye-catching, Firefly. Besoknya, saya langsung mencobanya sendiri. Tidak memerlukan waktu yang lama setelah percobaan singkat itu sampai saya akhirnya memutuskan untuk migrasi blog.

— Flashback.

Sudah sangat lama rasanya sejak pertama kali saya memulai blogging. Tahun 2023 adalah kali pertama saya mencoba membuat blog menggunakan static site generator (SSG) bernama Hugo. Sebagai blogger pemula, tentu banyak pilihan platform untuk memulai menulis artikel. Tapi, diantara banyak opsi tersebut, saya memutuskan Hugo pada saat itu karena setidaknya 2 hal: praktis (simpel & cepat) serta punya banyak pilihan tema. Rasanya tentu senang sekali karena bisa punya “ruang personal” di internet untuk berbagi tulisan (secara anonim). Artikel yang banyak saya tulis di awal blogging adalah tentang hugo itu sendiri.

Berikut adalah artikel yang pertama saya tulis:

Hugo-ing (from Zero to Hero)

Beginner step to start creating static-site via using Hugo.

2023-10-07hugo#hugo

Selama perjalanan panjang itu, saya pun sudah mencoba berganti-ganti tema (template) sebagai cara untuk membuat pembaca (kalau ada yang baca, hehe) dan tentunya saya sendiri lebih betah berlama-lama di blog tersebut. Saya pernah pasang tema Papermod, Kayal, hingga yang terakhir adalah Blowfish. Menurut saya, Blowfish adalah tema paling modern sekaligus paling mudah digunakan untuk Hugo. Saya bilang “modern” bukan hanya tampilan dan fiturnya yang keren, tapi juga karena developer-nya, Nuna Curacao, membangun komunitas untuk para pengguna template-nya.

Kalau berkenan, sila kunjungi “pengguna Blowfish” di sini: https://blowfish.page/users/

— Flashback berakhir.

Setelah (hampir) tiga tahun berlalu, saya akhirnya “dipertemukan” dengan web framework dan tema “baru” yang sejujurnya, bisa memenuhi beberapa harapan fitur yang tidak bisa saya temukan di Hugo (setidaknya di 3 tema template yang pernah saya coba), yaitu Astro dan Firefly. Fitur-fitur yang saya sebutkan tadi tentu akan saya jelaskan nanti.

About Astro#

Astro adalah web framework berbasis Javascript yang diciptakan untuk membuat website yang cepat untuk berbagai kebutuhan, seperti blog, portofolio, dan situs e-commerce.¹ Klaimnya, Astro ini sudah digunakan oleh perusahaan-perusahaan besar di dunia, seperti Google, Microsoft, OpenAI, Proton, Porsche, The Guardian, Cloudflare, dan yang lain. Sebetulnya, banyak fitur-fitur Astro, tapi saya rasa saya tidak akan membahasnya di sini. Jadi, sila baca-baca dan cari tahu sendiri ya. Saya sediakan website official dan Github repo-nya di bawah.

Website Astro: https://astro.build

Official Github repository-nya dapat dilihat di sini:

About Firefly#

Firefly adalah tema atau template static site yang dibuat dengan fondasi dari Astro. Well, sebetulnya, tidak 100% begitu, sih. Sebab, Firefly adalah tema yang dikembangkan dari “fork” tema yang sebelumnya sudah ada, yaitu Fuwari. Dibandingkan dengan Firefly, Fuwari terlihat lebih sederhana. Selain itu, saat artikel ini ditulis, pengembangannya juga sudah terlihat melambat. Mungkin itu juga alasan mengapa akhirnya Firefly muncul, sebagai “refresher” dari tema Fuwari ini.

Berikut adalah struktur project “Firefly”:²

1
Firefly/
2
├── src/
3
│   ├── config/          # Configuration files
4
│   ├── components/      # Components
5
│   ├── content/         # Content (posts, pages)
6
│   ├── layouts/         # Layout templates
7
│   ├── pages/           # Page routes
8
│   └── types/           # Type definitions
9
├── public/              # Static assets
10
└── astro.config.mjs     # Astro configuration

Semua file konfigurasi Firefly ada di src/config:³

Tema Firefly ini saya temukan ketika sedang scrolling tema di web Astro:
https://astro.build/themes/

Coba bandingkan sendiri homepage dari kedua website ini:

Berikut adalah repo Github Firefly dan Fuwari:

Halaman dokumentasi Firefly: https://docs-firefly.cuteleaf.cn/en/

1. Markdown & MDX#

Meskipun saya bisa menulis markdown, baik di Hugo (dan Blowfish sebagai temanya) maupun di Astro (dan Firefly sebagai temanya), tapi ada satu kelebihan di Astro, yaitu MDX. Apa itu MDX?

Kalau markdown adalah sebuah markup language⁴ yang ringan untuk membuat format dokumen (membuat judul, menebalkan huruf, memiringkan huruf, dst) menggunakan simbol teks biasa seperti hashtag (#), kurung siku ([]), dan lain sebagainya.⁵ Biasanya, file markdown digunakan di file README.md di github dan tentu saja sebagai file artikel di website-website statis seperti Hugo dan blog ini.

Maka, MDX adalah markdown yang dikombinasikan dengan JSX. Artinya, saya bisa menggunakan JSX di dalam konten artikel markdown saya. Tentu saja kedua format file tersebut berbeda (Markdown & MDX). Bahkan, bisa terlihat jelas bedanya hanya dari extension file-nya. Kalau file markdown biasa akan ber-ekstensi .md, misalnya linuxNixOS.md, sementara file MDX akan memiliki extensi .mdx, misalnya linuxNixOS.mdx.

Berikut adalah perbandingan side-by-side antara MD dan MDX:

Tabel di atas di-generate oleh Antrophic Claude.

Fitur ini sangat bermanfaat terutama jika ingin membuat “fitur tambahan” di artikel markdown kita. Misalnya, pada kasus saya, saya membuat embedded code untuk Chesscom, yang mana tidak bisa ditulis langsung di file markdown, sehingga saya perlu membuat komponennya terlebih dahulu (ChessCom.astro), baru kemudian di-import di dalam file MDX saya.

Berikut adalah contoh artikel saya yang menggunakan MDX:

Checkmate Pattern: Arabian Mate, Anastasia's Mate, Back Rank Mate, Boden's Mate

In this article, I would like to share 4 popular checkmate patterns, which are Arabian Mate, Anastasias Mate, Back Rank Mate, and Bodens Mate.

2025-05-10chess#chess#intro#checkmate#pattern#arabian mate#anastasia's mate#back rank mate#boden's mate

1
---
2
interface Props {
3
  id: string;
4
  url: string;
5
}
6
const { id, url } = Astro.props;
7
---
8

9
<div style="text-align: center;">
10
  <iframe
11
    id={id}
12
    allowtransparency="true"
13
    frameborder="0"
14
    style="width:100%;border:none;"
15
    src={url}
16
  ></iframe>
17
</div>
18

19
<script define:vars={{ id }}>
20
  window.addEventListener("message", (e) => {
21
    if (e.data && e.data.id === id) {
22
      const el = document.getElementById(id);
23
      if (el) {
24
        el.style.height = `${e.data.frameHeight + 30}px`;
25
      }
26
    }
27
  });
28
</script>

1
import ChessCom from '../../../components/chess/ChessCom.astro';
2

3
<ChessCom id="13242082" url="//www.chess.com/emboard?id=13242082"/>

Sebetulnya, ada fitur “shortcode” di Hugo + Blowfish. Tapi, saya rasa, dengan MDX, semua menjadi lebih fleksibel dan lebih ringan.

2. Locked Article#

Jika saya ingin suatu artikel hanya dapat dibaca oleh saya sendiri (dan beberapa orang pilihan), saya bisa mengunci artikel tersebut dengan password. Dengan demikian, hanya saya (dan beberapa orang pilihan yang tahu password tersebut) sajalah yang dapat membaca atau membukanya.

Contohnya, berikut adalah artikel private saya:

Hugo Advanced

Hugo, but more advanced...

2023-10-09hugo#hugo#website#static-site

Dan fitur ini mudah sekali digunakan, sesimpel menambahkan sebuah frontmatter password di file markdown / MDX-nya. Misalnya,

1
---
2
title: "Article Title"
3
published: 2023-10-09T15:22:46+07:00
4
draft: false
5
description: "The description for this article."
6
image: "cover.png"
7
tags: ["website", "static", "astro", "firefly"]
8
category: "hugo"
9
password: "SUPERsecretP@ss123"
10
passwordHint: "Your most secure password"
11
---

3. Gallery#

Dengan adanya fitur gallery ini, saya bisa memamerkan gambar-gambar favorit saya di internet melalui blog ini. Well, sebetulnya, di Blowfish juga ada fitur ini, tapi, yang membuat Firefly unggul adalah, sekali lagi, fitur “locked”-nya. Artinya, jika kita ingin mem-private foto-foto di sebuah gallery tertentu, kita bisa menambahkan password di pengaturan gallery-nya.

Sila berkunjung ke Gallery blog ini, saya punya 2 gallery di sana (walaupun dua-duanya di-private sih, hehe).

4. Widget#

Widget adalah “blok-blok” tambahan yang ada di sisi kiri dan kanan utama website. Jadi, bagian-bagian seperti “Profile”, “Annoucement”, “Site Statistics”, “Calendar”, dan lainnya itu adalah Widget.

Semua widget ini bisa diatur untuk muncul atau tidak. Saya sendiri menyembunyikan widget “Music”, padahal by default ada (tampil). Tapi, karena saya merasa fitur Music ini sudah ada di top bar, maka saya hide saja widget-nya.

Me-non-aktifkan-nya pun sesimpel mengganti parameter showInSidebar ke false di musicConfig.ts:

1
import type { MusicPlayerConfig } from "../types/musicConfig";
2

3
export const musicPlayerConfig: MusicPlayerConfig = {
4
  showInNavbar: true,
5

6
  showInSidebar: false,

Custom Widget

Tidak semua widget yang ada di blog ini adalah asli bawaan Firefly. Saya sudah menambahkan 3 widget custom: QOTD (Quote of The Day), Greeting, dan Weather Forecast. Mungkin, tutorial membuat custom widget akan saya buatkan di artikel terpisah.

Apakah widget-widget ini penting? Well, sebetulnya, ini “selera” saja. Dulu, ketika masih pertama kali belajar soal website dan blogging, saya hanya mengincar tampilan yang bersih. Itulah kenapa saya memilih Papermod sebagai tema awal untuk blog Hugo saya dulu. Tapi, semakin kesini, saya “mendambakan” blog yang informatif dan “gak pelit”. Maksud “gak pelit” adalah, terkadang, ketika membuka sebuah blog atau website, halaman utama dan bahkan halaman artikelnya hanya berisi di bagian tengah saja, sementara samping kanan dan kirinya kosong. Nah, saya pikir, ruangan kosong itu akan lebih bagus jika bisa diisi oleh informasi-informasi ringan seperti widget-widget yang ada di Firefly ini.

5. Moments/Dynamic#

Dynamic itu seperti catatan kecil atau diary. Fitur ini sudah saya inginkan sejak mulai nge-blog dulu. Tapi, sejak saat itu, baru di tema Firefly ini saya menemukannya. Catatan ini saya perlukan sekadar untuk “memberikan update” tentang saya pribadi sebagai penulis blog kepada pengunjung blog. Sebab, terkadang, mungkin karena kesibukan dunia nyata, saya belum sempat membuat artikel baru. Tapi, dengan adanya fitur Dynamic ini, saya bisa berkabar.

Seperti terlihat pada tangakapan layar di atas, “Dynamic” memang punya halaman sendiri. Tapi, kita juga bisa memunculkannya sebagai Widget.

6. Friends#

Kita juga bisa berjejaring dengan para blogger di seluruh dunia. Caranya sesimpel bertukar informasi tautan website (blog) masing-masing. Jadi, ketika menambahkan alamat website orang lain, kita juga terlebih dahulu (seharusnya) sudah memberikan informasi alamat website kita ke dia.

Sejauh ini, saya baru berteman dengan para blogger China. Mereka, harus saya akui, keren-keren blognya. 🤩 Mereka adalah teman-teman online saya di blog ini. Kalau kalian mengunjungi blog mereka, saya bisa pastikan, di daftar “Friends”-nya, pasti ada blog saya ini juga.

7. Line Markers#

Fitur yang juga saya suka dengan tema ini adalah semacam highlight untuk baris dari sebuah codeblock. Contohnya seperti ini:⁷

1
function demo() {
2
  console.log('此行标记为已删除')
3
  // 此行和下一行标记为已插入
4
  console.log('这是第二个插入行')
5

6
  return '此行使用中性默认标记类型'
7
}

8. Settings#

Sebagai orang yang mudah jenuh, saya sangat mengapresiasi adanya “Website Settings” yang praktis seperti ini. Di sini, saya bisa mengganti aksen warna blog saya, mengatur background Wallpaper, bahkan hingga menambahkan effect bunga sakura seperti pada gambar berikut:

Berikut adalah 3 dari 4 mode background Wallpaper:

Mode ke-4 apa? Mode ke-4 adalah tanpa Wallpaper. Jadi, kalau kalian ingin tampilan blognya lebih sederhana, bisa pilih mode ke-4 tersebut.