Membangun Portfolio Website Profesional dengan Astro dan Tailwind CSS: Panduan Step-by-Step

Saya sudah mencoba banyak framework untuk portfolio website: WordPress, Hugo, Jekyll, Next.js, dan sekarang Astro. Setelah 3 tahun bolak-balik antar framework, saya akhirnya menemukan kombinasi yang paling cocok untuk developer Indonesia: Astro + Tailwind CSS.

Mengapa? Karena Astro menghasilkan static site yang super cepat (skor Lighthouse 100 di semua metrik), Tailwind bikin styling tanpa bolak-balik ke file CSS terpisah, dan hasilnya bisa deploy ke mana saja termasuk VPS murah. Tidak perlu bayar $20/bulan untuk Vercel Pro atau Netlify Team.

Artikel ini akan memandu kamu step-by-step membangun portfolio website dari nol. Saya akan gunakan contoh nyata — website toolkuy.com yang saya bangun dengan pola yang sama.

1. Mengapa Astro untuk Portfolio?

Astro berbeda dari framework lain karena fokusnya pada content-first. Artinya, untuk website yang mayoritas konten (portfolio, blog, documentation), Astro menghasilkan output yang lebih ringan dan lebih cepat dari React/Next.js.

Perbandingan yang saya lakukan di VPS yang sama (2 vCPU, 2GB RAM):

Framework	Build Time	Output Size	Lighthouse Score	TTI
Astro 5.x	1.2s	15KB (per page)	100	0.3s
Next.js 15 (static)	8.5s	89KB (per page)	92	1.8s
Hugo	0.1s	12KB (per page)	100	0.2s

Astro kalah dari Hugo di build time, tapi menang dari segi DX (developer experience) karena kamu bisa pakai component framework yang sudah kamu kenal (React, Vue, Svelte) saat dibutuhkan, sementara di production hanya menghasilkan HTML murni tanpa JavaScript runtime.

2. Setup Project

Mulai dengan create project Astro baru:

npm create astro@latest portfolio -- --template minimal
cd portfolio
npm install
npm run dev

Project minimal Astro hanya punya satu file: src/pages/index.astro. Ini sudah cukup untuk portfolio sederhana.

Install Tailwind CSS:

npx astro add tailwind
npm install @astrojs/tailwind tailwindcss

Setelah install, file tailwind.config.mjs akan otomatis dibuat. Tambahkan custom colors untuk branding:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        primary: '#2563eb',
        dark: '#0f172a',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      }
    }
  }
}

3. Struktur File Portfolio

Berikut struktur yang saya gunakan:

src/
  components/
    Header.astro
    Hero.astro
    ProjectCard.astro
    SkillBadge.astro
    Footer.astro
  layouts/
    Layout.astro
  pages/
    index.astro        (homepage)
    projects/
      index.astro      (daftar project)
      [slug].astro     (detail project)
  content/
    projects/
      project-1.md     (content project)
  styles/
    global.css

Ini pola yang saya pakai di toolkuy.com. Content disimpan di Markdown supaya gampang di-update, sementara layout dan styling menggunakan Astro component dengan Tailwind.

4. Membuat Layout Utama

Buat src/layouts/Layout.astro:

---
interface Props {
  title: string;
  description?: string;
}

const { title, description = "Portfolio - Full Stack Developer" } = Astro.props;
---


  
    
    
    
    {title}

Perhatikan: tidak ada JavaScript bundle yang di-load. Ini kunci performa Astro. JavaScript hanya ditambahkan saat kamu benar-benar butuh interaktivitas (misal: dark mode toggle, form submission).

5. Hero Section yang Menarik

Hero section adalah kesan pertama. Buat src/components/Hero.astro:

---
---

  
    Hello, saya
    
      Nama Kamu
    
    
      Full Stack Developer yang fokus membangun
      aplikasi web performa tinggi dengan
      teknologi modern.
    
    
      
        Lihat Project
      
      
        Hubungi Saya

Catat: tidak ada JavaScript sama sekali. Semua interactivity (hover effects) dilakukan dengan CSS Tailwind. Ini menghasilkan page yang sangat ringan dan cepat.

6. Project Cards dengan Content Collections

Astro punya fitur Content Collections yang memungkinkan kamu menyimpan konten dalam format Markdown dengan schema validation. Buat file src/content/config.ts:

import { defineCollection, z } from 'astro:content';

const projects = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    tech: z.array(z.string()),
    image: z.string(),
    url: z.string().optional(),
    github: z.string().optional(),
    date: z.date(),
  })
});

export const collections = { projects };

Sekarang kamu bisa buat project baru cukup dengan menambah file Markdown di src/content/projects/:

---
title: "E-Commerce Platform"
description: "Platform e-commerce full-stack dengan payment gateway"
tech: ["Astro", "Tailwind", "PostgreSQL", "Stripe"]
image: "/images/project-ecommerce.webp"
github: "https://github.com/username/ecommerce"
date: 2026-01-15
---

Deskripsi lengkap project e-commerce ini ada di sini.
Kamu bisa tulis dalam format Markdown.

7. Responsive Design dengan Tailwind

Satu keunggulan Tailwind untuk portfolio: responsive design jadi sangat mudah. Contoh project card yang responsive:

---
const { title, description, tech, image } = Astro.props;
---

  
  
    {title}
    {description}
    
      {tech.map(t => (
        {t}
      ))}

Tanpa menulis satu baris CSS custom, kamu mendapatkan layout yang responsif, ada hover effect, dan terlihat profesional. Tailwind memang verbose di HTML, tapi untuk project yang tidak punya tim CSS dedicated, ini jauh lebih maintainable.

8. Deploy ke VPS

Bukan Vercel atau Netlify — kita deploy ke VPS sendiri. Build project:

npm run build

Output ada di dist/ folder. Untuk serve, saya pakai Nginx:

sudo apt install nginx -y
sudo cp -r dist/* /var/www/portfolio/
sudo nano /etc/nginx/sites-available/portfolio

Konfigurasi Nginx:

server {
    listen 80;
    server_name portfolio.toolkuy.com;
    root /var/www/portfolio;
    index index.html;

    location / {
        try_files $uri $uri/ $uri.html =404;
    }

    # Cache static assets
    location ~* .(jpg|jpeg|png|webp|css|js)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

Enable site dan restart:

sudo ln -s /etc/nginx/sites-available/portfolio /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl restart nginx

Tambahkan SSL dengan acme.sh atau Certbot, dan portfolio kamu sudah live di internet.

9. SEO Optimization

Portfolio yang bagus tanpa SEO seperti toko bagus di gang sempit — tidak ada yang tahu. Pastikan kamu sudah menambahkan:

Meta tags: title, description, Open Graph tags untuk sharing di social media
Sitemap: Astro punya plugin @astrojs/sitemap yang otomatis generate sitemap.xml
Performance: Astro sudah optimal secara default — target Lighthouse 100
Internal linking: Link antar halaman dan project untuk SEO topical authority

Tambahkan sitemap:

npx astro add sitemap

Konfigurasi di astro.config.mjs:

import sitemap from '@astrojs/sitemap';

export default {
  site: 'https://portfolio.toolkuy.com',
  integrations: [tailwind(), sitemap()],
};

Penutup

Membangun portfolio website dengan Astro + Tailwind CSS menghasilkan website yang cepat, SEO-friendly, dan mudah di-maintain. Dengan total biaya hosting $5-6/bulan di VPS, kamu sudah punya portfolio profesional yang bisa menyaingi website agency.

Yang terpenting: mulai dari yang sederhana, lalu iterasi. Portfolio saya yang pertama cuma satu halaman dengan 3 project. Sekarang sudah berkembang menjadi blog + portfolio + tools. Mulai dulu, sempurnakan nanti.

Mau tahu lebih lanjut tentang deploy Astro ke VPS? Baca juga panduan deploy aplikasi web dengan Docker dan Nginx untuk langkah lebih detail tentang setup server.

10. Performance Optimization Tips

Astro sudah sangat cepat secara default, tapi ada beberapa optimasi tambahan yang saya terapkan di toolkuy.com yang meningkatkan performa lebih jauh:

10.1 Image Optimization

Gunakan Astro's built-in Image component untuk otomatis optimize gambar:

---
import { Image } from 'astro:assets';
import projectImg from '../images/project.webp';
---
<Image src={projectImg} alt="Project screenshot" loading="lazy" />

Astro akan otomatis generate multiple format (WebP, AVIF) dan responsive sizes. Tanpa optimasi ini, gambar portfolio yang besar bisa menambah 2-3 detik ke loading time.

10.2 View Transitions

Astro 4+ mendukung View Transitions untuk pengalaman SPA-like tanpa JavaScript framework:

---
import { ViewTransitions } from 'astro:transitions';
---
<head>
  <ViewTransitions />
</head>

Ini memberikan transisi halaman yang smooth (fade, slide) tanpa perlu React/Vue client-side rendering. Website terasa seperti SPA tapi dengan semua keuntungan SSG (SEO, performance, simple deployment).

10.3 Prefetching

Astro bisa prefetch halaman yang kemungkinan di-klik user berikutnya:

// astro.config.mjs
export default {
  prefetch: {
    prefetchAll: true,  // prefetch semua links
    defaultStrategy: 'viewport',  // prefetch saat link visible
  }
};

Dengan prefetching, navigasi antar halaman terasa instan karena konten sudah di-cache di browser. Di portfolio website saya, time-to-interactive antar halaman rata-rata <100ms karena prefetching.

11. Checklist Launch Portfolio

Sebelum launch, pastikan semua ini sudah ter-cover:

Item	Tools	Status
Lighthouse score 100	Chrome DevTools	WAJIB
Mobile responsive	Browser resize	WAJIB
SEO meta tags	View page source	WAJIB
Sitemap.xml	/sitemap-index.xml	WAJIB
Favicon + OG image	RealFaviconGenerator	REKOMENDASI
Contact form	Astro + Formspree	REKOMENDASI
Analytics	Plausible/Umami	REKOMENDASI
404 page	Astro page	REKOMENDASI
Accessibility check	axe DevTools	OPSIONAL

12. Monetisasi Portfolio

Portfolio yang bagus bisa menghasilkan uang lebih dari sekadar mencari klien. Beberapa cara yang saya coba:

AdSense / ads: Jika portfolio punya blog dengan traffic lumayan, AdSense bisa menghasilkan $50-200/bulan. Tapi ini membutuhkan traffic yang konsisten (10K+ monthly visitors).
Affiliate links: Review tools yang kamu pakai dengan affiliate links. DigitalOcean, Vultr, dan Hostinger semua punya program affiliate yang lumayan.
Digital products: Jual template, boilerplate, atau mini-courses yang relevan dengan keahlian kamu.
Consulting CTA: Portfolio yang professional bisa jadi funnel untuk consulting gigs. Saya pernah dapat project Rp 15 juta dari satu email inquiry yang datang dari portfolio website saya.

Semua cara di atas membutuhkan portfolio yang sudah live dan SEO-optimized. Jadi mulai dulu, monetize nanti.

Penutup

Mau tahu lebih lanjut tentang deploy Astro ke VPS? Baca juga panduan deploy aplikasi web dengan Docker dan Nginx untuk langkah lebih detail tentang setup server.

10. Performance Optimization Tips

Astro sudah sangat cepat secara default, tapi ada beberapa optimasi tambahan yang saya terapkan di toolkuy.com yang meningkatkan performa lebih jauh:

10.1 Image Optimization

Gunakan Astro's built-in Image component untuk otomatis optimize gambar:

---
import { Image } from 'astro:assets';
import projectImg from '../images/project.webp';
---
<Image src={projectImg} alt="Project screenshot" loading="lazy" />

Astro akan otomatis generate multiple format (WebP, AVIF) dan responsive sizes. Tanpa optimasi ini, gambar portfolio yang besar bisa menambah 2-3 detik ke loading time.

10.2 View Transitions

Astro 4+ mendukung View Transitions untuk pengalaman SPA-like tanpa JavaScript framework:

---
import { ViewTransitions } from 'astro:transitions';
---
<head>
  <ViewTransitions />
</head>

10.3 Prefetching

Astro bisa prefetch halaman yang kemungkinan di-klik user berikutnya:

// astro.config.mjs
export default {
  prefetch: {
    prefetchAll: true,  // prefetch semua links
    defaultStrategy: 'viewport',  // prefetch saat link visible
  }
};

Dengan prefetching, navigasi antar halaman terasa instan karena konten sudah di-cache di browser. Di portfolio website saya, time-to-interactive antar halaman rata-rata <100ms karena prefetching.

11. Checklist Launch Portfolio

Sebelum launch, pastikan semua ini sudah ter-cover:

Item	Tools	Status
Lighthouse score 100	Chrome DevTools	WAJIB
Mobile responsive	Browser resize	WAJIB
SEO meta tags	View page source	WAJIB
Sitemap.xml	/sitemap-index.xml	WAJIB
Favicon + OG image	RealFaviconGenerator	REKOMENDASI
Contact form	Astro + Formspree	REKOMENDASI
Analytics	Plausible/Umami	REKOMENDASI
404 page	Astro page	REKOMENDASI
Accessibility check	axe DevTools	OPSIONAL

12. Monetisasi Portfolio

Portfolio yang bagus bisa menghasilkan uang lebih dari sekadar mencari klien. Beberapa cara yang saya coba:

AdSense / ads: Jika portfolio punya blog dengan traffic lumayan, AdSense bisa menghasilkan $50-200/bulan. Tapi ini membutuhkan traffic yang konsisten (10K+ monthly visitors).
Affiliate links: Review tools yang kamu pakai dengan affiliate links. DigitalOcean, Vultr, dan Hostinger semua punya program affiliate yang lumayan.
Digital products: Jual template, boilerplate, atau mini-courses yang relevan dengan keahlian kamu.
Consulting CTA: Portfolio yang professional bisa jadi funnel untuk consulting gigs. Saya pernah dapat project Rp 15 juta dari satu email inquiry yang datang dari portfolio website saya.

Semua cara di atas membutuhkan portfolio yang sudah live dan SEO-optimized. Jadi mulai dulu, monetize nanti.

Penutup

Mau tahu lebih lanjut tentang deploy Astro ke VPS? Baca juga panduan deploy aplikasi web dengan Docker dan Nginx untuk langkah lebih detail tentang setup server.

Membangun Portfolio Website Profesional dengan Astro dan Tailwind CSS: Panduan Step-by-Step

1. Mengapa Astro untuk Portfolio?

2. Setup Project

3. Struktur File Portfolio

4. Membuat Layout Utama

5. Hero Section yang Menarik

Nama Kamu

6. Project Cards dengan Content Collections

7. Responsive Design dengan Tailwind

{title}

8. Deploy ke VPS

9. SEO Optimization

Penutup

10. Performance Optimization Tips

10.1 Image Optimization

10.2 View Transitions

10.3 Prefetching

11. Checklist Launch Portfolio

12. Monetisasi Portfolio

Penutup

10. Performance Optimization Tips

10.1 Image Optimization

10.2 View Transitions

10.3 Prefetching

11. Checklist Launch Portfolio

12. Monetisasi Portfolio

Penutup

💬 Komentar (0)