Deploy Sitemas ke Netlify (Gratis)

Netlify adalah platform hosting populer dengan fitur-fitur unik seperti form handling built-in dan edge functions. Dengan free tier yang kompetitif, Netlify adalah alternatif solid untuk hosting Sitemas.

Mengapa Netlify?

Persiapan

Sebelum mulai, pastikan:

• ✅ Akun GitHub/GitLab/Bitbucket
• ✅ Repository berisi proyek Sitemas
• ✅ Build lokal berhasil (npm run build)

Deploy via Netlify CLI

Deploy via Dashboard

Konfigurasi netlify.toml

Buat file netlify.toml di root untuk konfigurasi:

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

# Headers untuk caching
[[headers]]
  for = "/fonts/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/_astro/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

# Redirects
[[redirects]]
  from = "/old-url"
  to = "/new-url"
  status = 301

# SPA fallback (jika diperlukan)
[[redirects]]
  from = "/*"
  to = "/404"
  status = 404

Environment Variables

Menambahkan di Dashboard

1. Site settings → Environment variables
2. Klik Add a variable
3. Pilih scope: All deploys, Production, atau Deploy Previews

Menggunakan di Code

const siteUrl = import.meta.env.PUBLIC_SITE_URL;
const gaId = import.meta.env.PUBLIC_GA_MEASUREMENT_ID;

Deploy Contexts

Netlify mendukung berbagai deploy contexts:

Mengaktifkan Branch Deploys

1. Site settings → Build & deploy → Branches and deploy contexts
2. Pilih All atau Only production branch

Custom Domain

# Apex domain
Type: A
Name: @
Value: 75.2.60.5

# www subdomain
Type: CNAME
Name: www
Value: sitename.netlify.app

Netlify Forms (Bonus)

Netlify menyediakan form handling tanpa backend:

<form name="contact" method="POST" data-netlify="true">
    <input type="hidden" name="form-name" value="contact" />
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message" required></textarea>
    <button type="submit">Kirim</button>
</form>

Submissions masuk ke Forms di dashboard.

Build Plugins

Netlify memiliki plugin ecosystem. Yang berguna:

Install via dashboard: Plugins → Browse

Monitoring

Deploy Logs

Setiap deploy punya log lengkap:

• Install dependencies
• Build process
• Deploy status

Analytics (Pro)

Netlify Analytics tersedia di Pro plan ($9/month per site).

Status Badges

Tambahkan badge ke README:

[![Netlify Status](https://api.netlify.com/api/v1/badges/SITE_ID/deploy-status)](https://app.netlify.com/sites/SITENAME/deploys)

Troubleshooting

Build Gagal

404 Pages

Pastikan dist folder berisi semua halaman. Cek:

• Dynamic routes punya getStaticPaths()
• Tidak ada error saat build

Cache Issues

Clear cache dan redeploy:

1. Deploys → Trigger deploy → Clear cache and deploy site

Perbandingan dengan Vercel

Langkah Selanjutnya

Eksplorasi platform lain:

Kesimpulan

Netlify adalah pilihan solid untuk hosting Sitemas dengan:

• Setup yang mudah
• Forms handling gratis
• Branch deploys untuk testing
• Plugins ecosystem

Pilih Netlify jika Anda butuh fitur forms atau A/B testing dalam free tier.