Website Statis Modern dengan Tampilan Modern yang Dihosting di GitHub dan Deploy oleh Vercel

Oleh Sugeng 5 Sep 2026

Membuat website statis modern kini lebih mudah dari sebelumnya. Dengan GitHub untuk hosting dan Vercel untuk deployment, Anda bisa memiliki website profesional dengan tampilan modern yang selalu aktif dan cepat. Artikel ini membahas cara membuat website statis modern dari awal sampai deployment.

Pengertian Website Statis Modern

Website statis modern adalah website yang tidak memerlukan server backend (PHP, database) dan berjalan sepenuhnya di sisi client menggunakan HTML, CSS, dan JavaScript. Tampilan modern berarti menggunakan desain terkini seperti glassmorphism, dark mode, animasi halus, dan responsive design.

Mengapa GitHub + Vercel?

  • GitHub: Version control gratis, hosting kode, dan collaboration
  • Vercel: Deployment otomatis, CDN global, HTTPS gratis, preview deployment
  • Tanpa biaya: Semua gratis untuk proyek pribadi
  • Tanpa server: Tidak perlu mengelola VPS atau server
  • Auto-deploy: Setiap push ke GitHub otomatis dideploy ke Vercel

Alat yang Dibutuhkan

  • Akun GitHub
  • Akun Vercel (gratis)
  • Node.js terinstal
  • Editor kode (VS Code)
  • Koneksi internet

Langkah 1: Buat Project di GitHub

1. Buat Repository Baru

bash
# Di GitHub.com, buat repository baru
# Nama: masyarakat-portfolio
# Public, tanpa README (akan kita buat)

2. Clone Repository

bash
git clone https://github.com/username/masyarakat-portfolio.git
cd masyarakat-portfolio

Langkah 2: Setup Project

1. Inisialisasi Project

bash
npm init -y

2. Install Framework (Opsional)

Untuk website statis modern, pilih salah satu framework:

Next.js (Rekomendasi):

bash
npx create-next-app@latest masyarakat-portfolio
cd masyarakat-portfolio

Astro:

bash
npm create astro@latest

Plain HTML/CSS/JS: Tidak perlu install framework. Langsung buat file HTML.

3. Struktur Project Modern

kode
masyarakat-portfolio/
├── public/
│   ├── m.png
│   ├── og.png
│   ├── favicon.ico
│   └── styles.css
├── src/
│   ├── components/
│   │   ├── Navbar.tsx
│   │   ├── Footer.tsx
│   │   └── Hero.tsx
│   ├── pages/
│   │   ├── index.tsx
│   │   ├── about.tsx
│   │   └── articles.tsx
│   └── styles/
│       └── globals.css
├── package.json
├── next.config.js
├── tsconfig.json
└── vercel.json

Langkah 3: Buat Tampilan Modern

1. Konfigurasi CSS Modern

css
/* styles/globals.css */
:root {
  --brand: #d97706;
  --brand-2: #f59e0b;
  --bg: #f7f7f9;
  --bg-dark: #0d0d12;
  --text: #1c1c22;
  --text-soft: #5b5b66;
  --font-main: 'Geist', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--bg-dark);
    color: #e7e7ec;
  }
}

/* Glassmorphism card */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 2rem;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Smooth animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

2. Komponen Navbar Modern

tsx
// src/components/Navbar.tsx
'use client';
import { useState } from 'react';
import Link from 'next/link';

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="navbar">
      <Link href="/" className="logo">
        <img src="/m.png" alt="Masyarakat" />
        <span>Masyarakat</span>
      </Link>
      
      <button className="menu-toggle" onClick={() => setIsOpen(!isOpen)}>
        <span></span>
        <span></span>
        <span></span>
      </button>
      
      <div className={`nav-links ${isOpen ? 'open' : ''}`}>
        <Link href="/">Beranda</Link>
        <Link href="/about">Tentang</Link>
        <Link href="/articles">Artikel</Link>
        <Link href="/contact">Kontak</Link>
      </div>
    </nav>
  );
}

3. Hero Section Modern

tsx
// src/pages/index.tsx
import Navbar from '@/components/Navbar';
import Hero from '@/components/Hero';
import Footer from '@/components/Footer';

export default function Home() {
  return (
    <div>
      <Navbar />
      <Hero />
      <Footer />
    </div>
  );
}
tsx
// src/components/Hero.tsx
export default function Hero() {
  return (
    <section className="hero fade-in">
      <div className="container">
        <p className="hero-eyebrow">Assalamu'alaikum</p>
        <h1 className="hero-title">
          Selamat datang di <span className="gradient-text">Masyarakat</span>
        </h1>
        <p className="hero-sub">
          Mari berbuat baik dengan berbagi kepada saudara-saudara kita yang sedang membutuhkan.
        </p>
        <div className="hero-actions">
          <a href="#portfolio" className="btn btn-primary">Portofolio</a>
          <a href="#articles" className="btn btn-ghost">Artikel</a>
        </div>
      </div>
    </section>
  );
}

4. Tambahkan Dark Mode Toggle

tsx
// src/components/ThemeToggle.tsx
'use client';
import { useEffect, useState } from 'react';

export default function ThemeToggle() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    const saved = localStorage.getItem('tw-theme');
    if (saved) setTheme(saved);
    else if (window.matchMedia('(prefers-color-scheme: dark)').matches) setTheme('dark');
  }, []);

  const toggle = () => {
    const next = theme === 'light' ? 'dark' : 'light';
    setTheme(next);
    localStorage.setItem('tw-theme', next);
    document.documentElement.setAttribute('data-theme', next);
  };

  return (
    <button onClick={toggle} className="theme-toggle">
      {theme === 'light' ? '🌙' : '☀️'}
    </button>
  );
}

Langkah 4: Konfigurasi Vercel

1. Buat vercel.json

json
{
  "buildCommand": "next build",
  "devCommand": "next dev",
  "installCommand": "npm install",
  "framework": "nextjs",
  "regions": ["iad1", "sfo1"],
  "crons": [
    {
      "path": "/api/sitemap",
      "schedule": "0 0 * * *"
    }
  ]
}

2. Buat next.config.js

javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200],
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

3. Buat package.json

json
{
  "name": "masyarakat-portfolio",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Langkah 5: Deploy ke Vercel

1. Login ke Vercel

bash
# Install Vercel CLI
npm install -g vercel

# Login
vercel login

2. Deploy Manual

bash
vercel

Ikuti prompt:

kode
? Set up and deploy ~/masyarakat-portfolio? [Y/n] Y
? Which scope do you want to deploy to? masyarakat-id
? Link to existing project? [Y/n] N
? Would you like to deploy to the main branch? [Y/n] Y

3. Deploy Otomatis dengan GitHub Integration

  1. Buka vercel.com
  2. Klik Add New Project
  3. Import repository GitHub Anda
  4. Vercel otomatis mendeteksi framework
  5. Klik Deploy

4. Setel Automatic Deploy

Setiap push ke main branch otomatis dideploy:

kode
GitHub Push → Vercel Deteksi → Build → Deploy → URL Aktif

Langkah 6: Optimasi untuk Produksi

1. SEO Optimization

tsx
// src/components/SEO.tsx
export default function SEO({ title, description, url }) {
  return (
    <head>
      <title>{title} | Masyarakat</title>
      <meta name="description" content={description} />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
      <meta property="og:image" content="https://masyarakat.id/og.png" />
      <meta name="twitter:card" content="summary_large_image" />
      <link rel="canonical" href={url} />
    </head>
  );
}

2. Performance Optimization

tsx
// Image optimization dengan Next.js
import Image from 'next/image';

<Image
  src="/m.png"
  alt="Masyarakat Logo"
  width={56}
  height={56}
  priority  // Preload gambar penting
  placeholder="blur"
/>

3. Sitemap dan Robots.txt

javascript
// app/sitemap.ts (Next.js App Router)
export default async function sitemap() {
  const baseUrl = 'https://masyarakat.id';
  
  return [
    { url: baseUrl, lastModified: new Date(), changeFrequency: 'daily' },
    { url: `${baseUrl}/about`, lastModified: new Date(), changeFrequency: 'monthly' },
    { url: `${baseUrl}/articles`, lastModified: new Date(), changeFrequency: 'daily' },
    { url: `${baseUrl}/contact`, lastModified: new Date(), changeFrequency: 'monthly' },
  ];
}
kode
# public/robots.txt
User-agent: *
Allow: /
Sitemap: https://masyarakat.id/sitemap.xml

Langkah 7: Custom Domain (Opsional)

1. Tambahkan Domain di Vercel

bash
vercel domains add masyarakat.id

2. Update DNS

Tambahkan record DNS di penyedia domain Anda:

kode
Type: CNAME
Name: masyarakat.id
Value: cname.vercel-dns.com

3. Aktifkan HTTPS Otomatis

Vercel otomatis menyediakan certificate Let's Encrypt:

  • HTTPS aktif dalam beberapa menit
  • Auto-renewal
  • HSTS header

Kesimpulan

Membuat website statis modern dengan GitHub dan Vercel memberikan solusi yang gratis, cepat, dan profesional. Tampilan modern dengan glassmorphism, dark mode, dan animasi halus membuat website lebih menarik, sementara deployment otomatis dari GitHub memastikan website selalu update.

Kunci utama:

  • Gunakan framework modern seperti Next.js atau Astro
  • Manfaatkan Vercel deployment yang otomatis dan gratis
  • Optimasi SEO dan performa sejak awal
  • Aktifkan dark mode dan responsive design
  • Gunakan custom domain dengan HTTPS gratis
  • Setiap push ke GitHub otomatis dideploy ke Vercel
Catatan penting: Jangan menyimpan kredensial atau secret key di repository GitHub publik. Gunakan Environment Variables di Vercel Dashboard untuk menyimpan data sensitif. Selalu gunakan .gitignore untuk mengecualikan file seperti .env. Pastikan Anda menambahkan .gitignore yang benar sebelum pertama push ke GitHub agar file sensitif tidak terlanjur terpublic.
Ingat: Website statis modern tidak berarti statis dalam hal fitur. Dengan JavaScript dan framework modern, Anda bisa membuat website yang interaktif, dinamis, dan sama modernnya dengan website dinas apapun. Kuncinya adalah optimasi dan deployment yang tepat — Vercel menyediakan keduanya secara gratis.
Dipublikasikan untuk membantu para pengembang web dalam membuat dan mendeploy website statis modern.

Artikel Terkait