Cara Membuat Website Statis Otomatis dengan GitHub Actions

Oleh Sugeng 4 Sep 2026

Membuat website statis yang otomatis dideploy adalah salah satu praktik terbaik dalam pengembangan web modern. Dengan GitHub Actions, setiap kali Anda mendorong perubahan kode ke repository, website akan otomatis dibangun dan dideploy tanpa perlu intervensi manual. Tutorial ini membahas langkah-langkah lengkap dari awal hingga akhir.

Apa Itu Website Statis?

Website statis terdiri dari file HTML, CSS, dan JavaScript yang disajikan langsung ke pengguna tanpa pemrosesan server-side. Website statis sangat cepat, aman, dan murah karena tidak memerlukan database atau server aplikasi. Contoh generator website statis populer antara lain Hugo, Jekyll, Astro, dan Next.js.

Mengapa Menggunakan GitHub Actions?

GitHub Actions menyediakan CI/CD (Continuous Integration dan Continuous Deployment) gratis untuk repository publik dan privat dengan batasan tertentu. Keuntungannya meliputi:

  • Otomatis Penuh: Setiap push atau pull request memicu proses build dan deploy.
  • Tanpa Biaya Server: Deployment ke platform seperti GitHub Pages, Vercel, atau Netlify tanpa perlu server.
  • Version Control: Setiap perubahan dilacak oleh Git, sehingga mudah rollback jika diperlukan.
  • Kolaborasi Mudah: Tim dapat bekerja sama dengan pull request dan review.

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

  1. Akun GitHub — Daftar gratis di github.com
  2. Repository GitHub — Buat repository baru untuk project Anda
  3. Kode Website — File HTML, CSS, dan JavaScript Anda
  4. Node.js (opsional) — Jika menggunakan generator seperti Astro atau Next.js

Langkah 1: Persiapkan Repository

Buat struktur folder project Anda:

bash
mkdir my-portfolio && cd my-portfolio
git init

Buat file index.html sederhana:

html
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio Saya</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Selamat Datang</h1>
    <p>Ini adalah portfolio saya yang dideploy otomatis.</p>
  </header>
  <main>
    <section>
      <h2>Tentang Saya</h2>
      <p>Saya seorang pengembang web yang gemar berbagi pengetahuan.</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2026 Portfolio Saya</p>
  </footer>
</body>
</html>

Buat juga file styles.css:

css
body {
  font-family: 'Inter', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f7f7f9;
  color: #1c1c22;
}
header {
  text-align: center;
  padding: 40px 0;
}
section {
  margin: 30px 0;
  padding: 20px;
  background: #ffffff;
  border-radius: 16px;
}
footer {
  text-align: center;
  padding: 20px;
  color: #8a8a95;
}

Commit dan push ke GitHub:

bash
git add .
git commit -m "Initial commit: portfolio website"
git remote add origin https://github.com/username/my-portfolio.git
git push -u origin main

Langkah 2: Konfigurasi GitHub Actions

Buat folder dan file workflow GitHub Actions:

bash
mkdir -p .github/workflows

Buat file .github/workflows/deploy.yml:

yaml
name: Deploy Static Site

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install Dependencies
        run: npm install

      - name: Build Website
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Langkah 3: Konfigurasi package.json

Buat file package.json di root repository:

json
{
  "name": "my-portfolio",
  "version": "1.0.0",
  "description": "Portfolio website statis dengan deploy otomatis",
  "scripts": {
    "build": "echo 'Building website...' && mkdir -p dist && cp -r index.html styles.css dist/",
    "dev": "npx serve ."
  },
  "keywords": ["portfolio", "static", "website"],
  "author": "Sugeng",
  "license": "MIT"
}

Untuk project yang lebih kompleks menggunakan Astro, Next.js, atau Hugo, sesuaikan command build sesuai dokumentasi framework yang digunakan.

Langkah 4: Aktifkan GitHub Pages

  1. Buka repository di GitHub
  2. Klik tab Settings
  3. Klik Pages di sidebar kiri
  4. Pada Source, pilih GitHub Actions
  5. Pilih branch gh-pages
  6. Klik Save

Langkah 5: Otomatisasi Deployment

Setiap kali Anda push ke branch main, GitHub Actions akan otomatis menjalankan workflow berikut:

  1. Checkout — Mengambil kode terbaru dari repository
  2. Setup — Menyiapkan Node.js dan dependensi
  3. Build — Membangun website menjadi file statis
  4. Deploy — Mengunggah hasil build ke GitHub Pages

Anda bisa melihat log proses ini di tab Actions pada repository.

Contoh Lanjutan: Deploy ke Vercel

Jika ingin deployment ke Vercel, tambahkan file vercel.json:

json
{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": null,
  "regions": ["iad1", "sfo1"]
}

Hubungkan repository GitHub ke Vercel melalui dashboard vercel.com. Vercel akan otomatis mendeteksi setiap push dan mendeploy ulang.

Contoh Lanjutan: Deploy ke Netlify

Buat file netlify.toml:

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

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

Hubungkan repository ke Netlify melalui app.netlify.com.

Monitoring dan Debugging

Melihat Log Workflow

  1. Buka tab Actions di repository GitHub
  2. Klik workflow yang berjalan
  3. Periksa setiap step untuk melihat detail kesalahan

Menambahkan Notifikasi

Tambahkan step notifikasi di workflow:

yaml
      - name: Notify on Failure
        if: failure()
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: '⚠️ Deployment gagal! Periksa log di Actions tab.'
            })

Kesimpulan

Dengan GitHub Actions, membuat website statis yang dideploy secara otomatis menjadi sangat mudah dan efisien. Anda tidak perlu lagi repot mengunggah file manual atau mengelola server. Seluruh proses build dan deploy dilakukan otomatis setiap kali ada perubahan kode. Praktik ini tidak hanya menghemat waktu, tetapi juga memastikan website selalu diperbarui dengan versi terbaru tanpa downtime.

Kunci keberhasilan adalah:

  • Menjaga struktur repository yang rapi
  • Menulis workflow YAML yang jelas dan terdokumentasi
  • Secara rutin memeriksa log build untuk mendeteksi masalah lebih awal
  • Memanfaatkan fitur branch protection dan pull request untuk kolaborasi yang aman

---

Tutorial ini dapat diikuti oleh pemula maupun pengembang berpengalaman yang ingin mengotomatisasi proses deployment website.

Artikel Terkait