Setelah memastikan semua persyaratan sistem terpenuhi, saatnya menginstal Sitemas di komputer Anda. Panduan ini akan membawa Anda dari nol hingga melihat website berjalan di browser — dalam waktu kurang dari 5 menit.

Sebelum Memulai

Pastikan Anda sudah memiliki:

  • ✅ Node.js v18.17.0 atau lebih baru
  • ✅ npm v9.0.0 atau lebih baru
  • ✅ Git terinstal
  • ✅ Code editor (VS Code direkomendasikan)
  • ✅ Terminal/Command Prompt
Belum Siap?

Jika belum menginstal tools di atas, ikuti panduan Persyaratan Sistem terlebih dahulu.

Metode Instalasi

Ada beberapa cara untuk mendapatkan source code Sitemas:

MetodeKeteranganUntuk Siapa
Clone RepositoryDownload langsung via GitDeveloper yang familiar dengan Git
Download ZIPDownload arsip dan ekstrakPemula yang belum familiar Git
Fork RepositoryBuat salinan di akun GitHub AndaKontributor yang ingin berkontribusi

Panduan ini akan fokus pada metode Clone Repository yang paling umum digunakan.

Langkah-Langkah Instalasi

Buka Terminal

Buka terminal pilihan Anda:

  • Windows: PowerShell atau Windows Terminal
  • macOS: Terminal.app atau iTerm2
  • Linux: Terminal bawaan distro Anda

Navigasi ke folder tempat Anda ingin menyimpan proyek. Misalnya:

Pindah ke folder Development
cd ~/Development
# atau di Windows:
cd C:\Users\NamaAnda\Development

Clone Repository

Clone repository Sitemas dari sumber yang Anda miliki:

Clone repository
git clone https://github.com/username/sitemas.git

Ganti URL dengan URL repository yang Anda terima saat pembelian.

Proses ini akan membuat folder baru bernama sitemas dengan semua source code di dalamnya.

Jika Anda menerima file ZIP, ekstrak ke folder yang diinginkan dan lanjutkan ke langkah berikutnya.

Masuk ke Folder Proyek

Pindah ke folder Sitemas yang baru saja di-clone:

Masuk folder proyek
cd sitemas

Jika menggunakan VS Code, Anda bisa langsung membuka folder ini:

Buka di VS Code
code .

Install Dependencies

Jalankan npm install untuk mengunduh semua package yang diperlukan:

Install dependencies
npm install

Proses ini memerlukan koneksi internet dan mungkin memakan waktu 1-3 menit tergantung kecepatan koneksi. Anda akan melihat output seperti:

added 245 packages, and audited 246 packages in 45s

0 vulnerabilities

Folder node_modules akan dibuat berisi semua dependencies.

Jalankan Development Server

Setelah instalasi selesai, jalankan development server:

Jalankan dev server
npm run dev

Anda akan melihat output:

🚀 astro  v5.16.x started in 1324ms

┃ Local    http://localhost:4321/
┃ Network  http://192.168.x.x:4321/

Buka di Browser

Buka browser dan kunjungi:

http://localhost:4321

🎉 Selamat! Anda akan melihat homepage Sitemas berjalan di browser.

Development server mendukung hot reload — setiap perubahan pada file akan otomatis me-refresh browser.

Perintah yang Tersedia

Sitemas menyertakan beberapa npm scripts untuk berbagai keperluan:

PerintahFungsi
npm run devMenjalankan development server dengan hot reload
npm run buildBuild production-ready static files
npm run previewPreview hasil build secara lokal

Development Mode

Mode development
npm run dev

Gunakan mode ini saat mengembangkan atau menulis konten. Server akan otomatis reload saat Anda menyimpan perubahan.

Production Build

Build untuk production
npm run build

Perintah ini akan:

  1. Compile semua file Astro ke HTML statis
  2. Optimize CSS dan assets
  3. Generate sitemap
  4. Index konten untuk Pagefind search
  5. Output ke folder dist/

Preview Build

Preview hasil build
npm run preview

Setelah build, gunakan perintah ini untuk melihat hasil production secara lokal sebelum deploy.

Struktur Awal

Setelah instalasi, struktur folder akan terlihat seperti ini:

sitemas/
├── .astro/           # Cache Astro (auto-generated)
├── .git/             # Git repository data
├── .vscode/          # VS Code settings
├── dist/             # Build output (setelah npm run build)
├── node_modules/     # Dependencies (auto-generated)
├── public/           # Static assets
├── src/              # Source code utama
├── .gitignore        # File yang diabaikan Git
├── astro.config.mjs  # Konfigurasi Astro
├── package.json      # Project metadata & scripts
├── README.md         # Dokumentasi proyek
└── tsconfig.json     # TypeScript configuration
File yang Perlu Diperhatikan

Untuk kustomisasi dasar, Anda hanya perlu fokus pada folder src/ dan file konfigurasi di root. Jangan edit folder yang auto-generated seperti node_modules/ atau .astro/.

Konfigurasi Awal yang Direkomendasikan

Setelah berhasil menjalankan Sitemas, ada beberapa konfigurasi awal yang sebaiknya Anda lakukan:

1. Update Informasi Site

Buka file src/utils/constants.ts dan update informasi dasar:

src/utils/constants.ts
typescript 
export const SITE = {
    title: 'Nama Blog Anda',
    description: 'Deskripsi blog Anda',
    url: 'https://domainanda.com',
    author: 'Nama Anda',
    lang: 'id',
    slogan: 'Tagline Anda',
    email: 'email@domain.com',
} as const;

2. Update Domain di astro.config.mjs

astro.config.mjs
javascript 
export default defineConfig({
    site: 'https://domainanda.com',
    // ... config lainnya
});

3. Hapus Konten Contoh (Opsional)

Folder src/content/blog/ berisi artikel contoh. Anda bisa:

  • Menghapusnya dan mulai dari nol
  • Menggunakannya sebagai referensi format
  • Memodifikasinya sesuai kebutuhan

Troubleshooting

Error: EACCES permission denied

Ini biasanya terjadi di Linux/macOS. Solusi:

Fix permission npm
sudo chown -R $(whoami) ~/.npm

Port 4321 sudah digunakan

Jalankan di port berbeda:

Gunakan port alternatif
npm run dev -- --port 3000

npm install sangat lambat

Coba gunakan mirror registry yang lebih dekat:

Gunakan registry alternatif
npm config set registry https://registry.npmmirror.com
npm install

Kembalikan ke default setelah selesai:

Kembalikan registry default
npm config set registry https://registry.npmjs.org

Error: Cannot find module

Hapus node_modules dan install ulang:

Clean install
rm -rf node_modules package-lock.json
npm install

Di Windows:

Clean install (Windows)
rmdir /s /q node_modules
del package-lock.json
npm install

Mengakses dari Device Lain

Development server Sitemas sudah dikonfigurasi untuk dapat diakses dari jaringan lokal. Ini berguna untuk testing di smartphone atau tablet.

  1. Pastikan komputer dan device di jaringan WiFi yang sama
  2. Lihat alamat Network di output terminal
  3. Buka alamat tersebut di browser device (contoh: http://192.168.1.100:4321)
Firewall

Di Windows, Anda mungkin perlu mengizinkan Node.js melewati firewall saat pertama kali menjalankan dev server.

Langkah Selanjutnya

Sitemas sudah berjalan! Sekarang saatnya memahami struktur proyek lebih dalam:

Pahami Struktur Folder

Pelajari organisasi file dan folder di Sitemas untuk navigasi yang lebih mudah.

Struktur Folder Sitemas

Kesimpulan

Instalasi Sitemas sangat straightforward — hanya membutuhkan 4 perintah utama:

  1. git clone — Download source code
  2. cd sitemas — Masuk folder proyek
  3. npm install — Install dependencies
  4. npm run dev — Jalankan server

Dengan development server berjalan, Anda sudah siap untuk mulai mengeksplorasi dan mengkustomisasi blog Anda. Selamat berkreasi!

M

Mas Admin

Penulis Konten

Menyajikan konten terbaik seputar teknologi dan produktivitas.