👋 Halo Dunia

Selamat datang di Astro-Theme-Aither.

Ini adalah tema blog yang dibangun atas satu keyakinan: tulisan yang baik layak mendapat tipografi yang baik. Font sans-serif, ritme baca yang bersih, dan tata letak yang tidak menghalangi. Semuanya di sini melayani satu tujuan — membuat kata-kata Anda terlihat dan terasa indah.

Mengapa Tema Blog Lagi

Web penuh dengan tema blog, jadi pertanyaan yang wajar: mengapa membuat yang lain? Jawabannya ada pada prioritas. Kebanyakan tema mengoptimalkan dampak visual — gambar unggulan besar, tata letak kompleks, dan transisi animasi. Ini terlihat memukau dalam demonstrasi, tetapi menghalangi saat seseorang benar-benar duduk membaca artikel 2.000 kata.

Astro-Theme-Aither dimulai dari premis berbeda. Konten adalah produknya. Tugas tema adalah menyajikan konten itu dengan perhatian yang layak.

Filosofi ini juga berlaku untuk keputusan teknis. Tema ini mengirim sekitar 0,5 KB JavaScript sisi klien — cukup untuk toggle tema. Sisanya adalah HTML dan CSS statis. Tidak ada pergeseran layout, spinner loading, atau framework JavaScript yang melakukan hydration di latar belakang.

Memulai

1. Klon repositori — gunakan tombol template GitHub atau klon langsung dengan git clone
2. Instal dependensi — jalankan pnpm install
3. Konfigurasi situs — edit src/config/site.ts
4. Ganti konten sampel — ganti post di src/content/posts/ dengan file Markdown Anda
5. Mulai pengembangan — jalankan pnpm dev
6. Rilis — push ke GitHub dan biarkan alur CI menangani penerapan ke Cloudflare Pages

Struktur Proyek

1
src/
2
├── components/     # Komponen Astro yang dapat digunakan ulang
3
├── config/         # Konfigurasi situs
4
├── content/        # Post Markdown dan konten Anda
5
├── layouts/        # Layout halaman (Layout.astro)
6
├── pages/          # Halaman route
7
└── styles/         # CSS global dengan token Tailwind v4

Menulis Post Pertama

Buat file .md baru di src/content/posts/ dengan frontmatter berikut:

1
---
2
title: Judul Post Anda
3
date: "2026-01-15T16:00:00+08:00"
4
category: General
5
description: Ringkasan singkat untuk SEO dan pratinjau sosial
6
tags: [Topik, Lainnya]
7
---
8

9
Konten Anda dimulai di sini.

Yang Anda Dapatkan

Fitur Konten

• Umpan RSS — otomatis di /rss.xml
• Sitemap — otomatis via @astrojs/sitemap
• Tag meta SEO — Open Graph, Twitter cards, URL kanonik
• Mode gelap — toggle tiga arah (Terang / Gelap / Sistem) dengan persistence localStorage
• Halaman kategori dan tag — arsip terorganisir

Fitur Developer

• TypeScript — mode strict, komponen dan utilitas bertipe penuh
• Content Collections — Markdown type-safe dengan validasi frontmatter
• Tailwind CSS v4 — token desain @theme
• Vitest + Playwright — unit test dan E2E test terintegrasi di CI
• Cloudflare Pages — alur penerapan dengan URL pratinjau PR

Performa

Karena tema menghasilkan HTML statis dengan JavaScript minimal, performa sangat baik secara default. Harapkan skor Lighthouse 100 di semua kategori.

Kustomisasi

• Warna — edit custom properties CSS di src/styles/global.css
• Font — ganti nilai font-family di konfigurasi tema Tailwind
• Navigasi — update array link navigasi di src/config/site.ts
• Analytics — tambahkan ID Google Analytics di konfigurasi situs

Catatan tentang Filosofi Desain

Kesederhanaan visual tema ini disengaja, tapi bukan berarti kesederhanaan teknis. Di balik layar, tema ini menangani banyak hal: skala tipografi responsif, rasio kontras warna yang aksesibel, struktur HTML semantik yang benar, dan perhatian cermat pada pengalaman baca di semua ukuran layar.

Desain yang baik tidak terlihat. Saat Anda membaca artikel dengan tema ini dan hanya menikmati tulisannya tanpa menyadari temanya — itulah desain bekerja seperti yang dimaksudkan.

Selamat menulis.