SUPONO.
Membangun Website Portofolio & Blog Premium dengan Astro, Tailwind CSS, dan Vercel | Supono
SUPONO.
Infrastruktur & Web

Membangun Website Portofolio & Blog Premium dengan Astro, Tailwind CSS, dan Vercel

Oleh Supono•19 September 2026

Sebagai seorang praktisi IT dan Network Engineer, keamanan dan efisiensi adalah prioritas utama. Saat memutuskan untuk membangun website portofolio dan blog pribadi, saya menghindari penggunaan CMS tradisional berbasis database (seperti WordPress) yang rentan terhadap serangan dan membutuhkan pemeliharaan server rutin.

Pilihan jatuh pada arsitektur Jamstack menggunakan Astro (Static Site Generator) yang sangat cepat, Tailwind CSS untuk desain styling yang premium, dan Markdown untuk penulisan artikel. Semua ini diotomatisasi menggunakan GitHub dan Vercel untuk Continuous Deployment (CI/CD).

Berikut adalah panduan langkah demi langkah bagaimana saya membangun infrastruktur website ini dari nol.

Langkah 1: Inisialisasi Proyek Astro & Instalasi Tailwind

Pertama, pastikan Node.js sudah terinstal di sistem. Buka terminal dan jalankan perintah berikut untuk membuat kerangka proyek Astro:

# Membuat proyek Astro baru di direktori saat ini
npm create astro@latest .

(Pilih opsi: “Empty template”, “Install dependencies: Yes”, dan “TypeScript: No”).

Setelah proyek terbentuk, tambahkan integrasi Tailwind CSS. Mengingat Astro saat ini bekerja paling stabil dengan ekosistem Tailwind v3, jalankan perintah ini:

npm install @astrojs/tailwind tailwindcss@3 --legacy-peer-deps
npx astro add tailwind

Langkah 2: Konfigurasi Tema (Charcoal & Gold)

Untuk memberikan kesan enterprise dan premium, saya memilih palet warna Hitam Arang (Charcoal) dan Emas (Gold). Konfigurasi ini diatur terpusat pada file tailwind.config.mjs di direktori terluar:

/** @type {import('tailwindcss').Config} */
import typography from '@tailwindcss/typography';

export default {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		extend: {
			colors: {
				charcoal: { 900: '#121212', 800: '#1E1E1E', 700: '#2C2C2C' },
				gold: { DEFAULT: '#D4AF37', dark: '#B5952F', light: '#F3E5AB' }
			},
			fontFamily: {
				sans: ['Inter', 'sans-serif'],
				heading: ['Montserrat', 'sans-serif'],
			}
		},
	},
	plugins: [typography],
}

Catatan: Pastikan menginstal plugin typography dengan perintah npm install @tailwindcss/typography --legacy-peer-deps terlebih dahulu.

Buat file CSS global (src/styles/global.css) untuk memuat utilitas Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Langkah 3: Membangun Hirarki Layout dan Halaman Utama

Astro menggunakan sistem komponen berbasis file. Saya membagi struktur UI menjadi dua layout utama:

  1. BaseLayout.astro: Bertindak sebagai pembungkus utama yang berisi Header (Navigasi melayang) dan Footer 3 kolom. File ini di-import ke semua halaman lain agar desain tetap konsisten.
  2. index.astro: Halaman Landing Page portofolio yang menampilkan biografi, pengalaman 20+ tahun, kelas sertifikasi MikroTik, serta grid kartu area spesialisasi teknis.

Langkah 4: Membuat Sistem Blog Markdown dengan Sidebar

Alih-alih menyentuh kode HTML setiap kali menulis artikel, saya merancang BlogLayout.astro khusus. Layout ini secara otomatis akan membaca metadata (Frontmatter) dari file Markdown dan menyusunnya menjadi desain dua kolom (Kolom Artikel Utama di kiri, dan Sidebar Profil di kanan).

Untuk menulis artikel baru, alur kerjanya menjadi sangat sederhana. Saya cukup membuat file berekstensi .md di dalam folder src/pages/blog/, lalu mendefinisikan layout dan judulnya di bagian atas file:

---
layout: ../../layouts/BlogLayout.astro
title: "Judul Artikel Anda"
date: "Tanggal Publikasi"
category: "Kategori"
author: "Nama Penulis"
---

Isi konten ditulis di sini...

Langkah 5: Otomatisasi Deployment via GitHub & Vercel

Sebagai engineer, otomatisasi deployment adalah hal wajib. Setelah proyek berjalan lancar di localhost, seluruh kode dikirim ke GitHub.

git add .
git commit -m "Setup Astro, Tailwind, dan Artikel Pertama"
git push origin main

Langkah terakhir adalah menghubungkan repositori GitHub tersebut ke dasbor Vercel. Vercel secara otomatis mendeteksi framework Astro, menjalankan proses build, dan mendistribusikan HTML statisnya ke CDN global.

Hasilnya? Website portofolio dengan performa loading instan, skor SEO tinggi, tanpa biaya server bulanan, dan keamanan absolut karena tidak ada database dinamis yang bisa diserang. Ketika saya ingin memublikasikan tulisan baru, saya cukup mem-push satu file .md ke GitHub, dan Vercel akan memperbaruinya secara otomatis dalam hitungan detik.