Memulai dengan Astro-Theme-Aither

Panduan ini membawa Anda dari nol sampai blog multibahasa yang sudah ter-deploy. Baca dari awal sampai akhir atau langsung lompat ke bagian yang dibutuhkan.

Prasyarat

Node.js 22 LTS atau lebih baru
pnpm 10 atau lebih baru
Akun GitHub
Akun Cloudflare untuk deploy

Instalasi

git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO
corepack enable
pnpm install
pnpm validate
pnpm dev

Buka http://localhost:4321 di browser Anda.

Struktur proyek

src/
├── components/        # Komponen Astro dan React
├── config/site.ts     # Nama situs, navigasi, footer, dan tautan sosial
├── content/posts/     # Post yang diatur per locale
├── i18n/              # Terjemahan UI
├── layouts/           # Layout
├── lib/               # Utilitas
├── pages/             # Halaman dan rute
└── styles/global.css  # Token tema Tailwind v4

Konfigurasi

Site Config

src/config/site.ts adalah sumber utama konfigurasi situs:

1
export const siteConfig = {
2
  name: 'Nama blog Anda',
3
  title: 'Tagline Anda',
4
  description: 'Deskripsi situs untuk SEO',
5
  author: {
6
    name: 'Nama Anda',
7
    avatar: '',
8
  },
9
};

Variabel lingkungan

cp .env.example .env

Biarkan nilai kosong jika ingin menonaktifkan layanan tertentu.

URL situs

Atur URL produksi di astro.config.mjs:

1
import { defineConfig } from 'astro/config';
2
import aither from '@aither/astro';
3

4
export default defineConfig({
5
  site: 'https://your-domain.pages.dev',
6
  integrations: [aither()],
7
});

Menulis post

Buat file .mdx baru di src/content/posts/en/:

1
---
2
title: Post pertama saya
3
date: "2026-03-14T16:00:00+08:00"
4
category: General
5
description: Ringkasan singkat untuk SEO dan pratinjau sosial.
6
tags: [Topic, Another]
7
pinned: false
8
---
9

10
Konten dimulai di sini.

Referensi frontmatter

Field	Tipe	Wajib	Deskripsi
`title`	string	Ya	Judul post
`date`	date	Ya	Waktu publikasi (mis. `2026-03-14T16:00:00+08:00`)
`category`	string	Tidak	Kategori
`description`	string	Tidak	Deskripsi SEO
`tags`	string[]	Tidak	Daftar tag
`pinned`	boolean	Tidak	Menaruh post di atas
`image`	string	Tidak	Gambar cover

Komponen MDX

Anda bisa mengimpor komponen langsung di dalam konten:

1
import MyChart from '@/components/MyChart'
2

3
<MyChart data={[10, 20, 30]} />

Internasionalisasi

Theme ini mendukung 11 locale. Untuk menambahkan versi terjemahan, buat file dengan nama yang sama di folder locale tujuan:

src/content/posts/en/my-post.mdx
src/content/posts/id/my-post.mdx
src/content/posts/zh-hans/my-post.mdx

Teks UI berada di src/i18n/messages/.

Bagian konten kustom

Anda dapat menambahkan koleksi seperti terjemahan, catatan, atau tutorial melalui src/content.config.ts dan src/config/site.ts. Halaman daftar dan detail akan dibuat otomatis.

Theming

Sistem theme memiliki dua lapisan:

mode warna: light, dark, system
style theme: default atau style bawaan seperti evolution

1
ui: {
2
  defaultMode: 'system',
3
  defaultStyle: 'default',
4
  showMoreThemesMenu: true,
5
},

Warna disimpan di src/styles/global.css. Secara default theme menggunakan font sans-serif sistem dan font monospace untuk kode.

SEO dan AI

Setiap halaman sudah menyediakan output berikut:

/sitemap-index.xml
/rss.xml
/robots.txt
/llms.txt
/llms-full.txt
/posts/slug.md
JSON-LD dan Open Graph

Deploy

Cloudflare Pages

Praktik terbaik: buat proyek Pages terlebih dahulu. Alur ini memakai nama repositori secara default, atau CLOUDFLARE_PAGES_PROJECT_NAME jika Anda perlu menimpanya.

Tambahkan secret GitHub berikut:

CLOUDFLARE_API_TOKEN
CLOUDFLARE_ACCOUNT_ID

Lalu jalankan pnpm validate dan push ke main.

Perintah yang berguna

Perintah	Deskripsi
`pnpm dev`	Menjalankan server pengembangan
`pnpm validate`	Menjalankan validasi penuh sebelum push
`pnpm build`	Membuat build produksi
`pnpm preview`	Meninjau build produksi secara lokal

Skema versi

Tag release publik memakai nama bergaya CalVer, misalnya v2026.04.08.