เบื้องหลังเว็บ Portfolio ของผม — เลือก Tech Stack ยังไง และทำไม

ช่วงนี้ผมเพิ่งทำเว็บ Portfolio ส่วนตัวเสร็จ เลยอยากเขียนบันทึกเอาไว้ว่าใช้อะไรบ้าง ตัดสินใจยังไง และเจอปัญหาอะไรระหว่างทางบ้าง บทความนี้เขียนสำหรับคนที่อยากทำเว็บ Portfolio เองและยังไม่รู้ว่าจะเริ่มจากตรงไหนครับ

ทำไมถึงสร้างเองแทนที่จะใช้ Notion หรือ Framer

ก่อนอื่นเลย คำถามที่หลายคนถามคือ "ทำไมไม่ใช้ template สำเร็จรูป?" คำตอบตรงๆ คือผมอยากได้เว็บที่ เพิ่ม Project และ Blog ได้โดยไม่ต้องแก้โค้ด ทุกครั้ง และอยากให้ติด Google Search ด้วย ซึ่ง template ส่วนใหญ่ทำได้ไม่ครบทั้งสองอย่างพร้อมกัน

Overview: ภาพรวม Stack ทั้งหมด

Browser → Vercel CDN → Next.js 16 (App Router)
↓
Sanity CMS API
Sanity Image CDN

หลังบ้าน → Sanity Studio (/studio)

สั้นๆ คือ Next.js เป็นตัวสร้างหน้าเว็บ, Sanity เป็นหลังบ้านไว้จัดการ content, และ Vercel เป็นตัว host และกระจาย traffic ครับ

Frontend: Next.js 16 + React 19 + TypeScript

เลือก Next.js เพราะมี Static Site Generation (SSG) built-in ซึ่งทำให้หน้าเว็บโหลดเร็วและ Google index ได้ง่ายมาก แทนที่จะ fetch ข้อมูลทุกครั้งที่มีคนเข้า มันจะ pre-render หน้าทุกหน้าไว้ล่วงหน้าตั้งแต่ build time เลย

ส่วน TypeScript ช่วยให้โค้ดปลอดภัยขึ้นมาก โดยเฉพาะตอนดึงข้อมูลจาก Sanity มาแสดงผล ลด bug ที่เกิดจากการ typo หรือส่ง type ผิดได้เยอะครับ

Feature ของ Next.js ที่ใช้จริงในโปรเจคนี้:

• App Router — routing แบบ file-based จัดการ layout ได้ง่ายมาก
• Server Components — ดึงข้อมูลจาก Sanity ฝั่ง server ตรงๆ ไม่ต้องเขียน API แยก
• Dynamic Routes — [slug] สำหรับแต่ละ blog post และ project
• next/image — optimize รูปอัตโนมัติ ทั้งขนาดและ format
• Metadata API — จัดการ SEO ทุกหน้าได้ในที่เดียว

CMS: Sanity.io — หลังบ้านที่ไม่ต้องแก้โค้ด

นี่คือ feature ที่ผมชอบที่สุดในโปรเจคนี้ครับ

Sanity คือ Headless CMS ที่ให้เราออกแบบ schema ของ content เองได้อย่างอิสระ และมี Studio (หน้า dashboard) ให้เข้าไปเพิ่ม/แก้ไข content ได้โดยไม่ต้องยุ่งกับโค้ดเลยแม้แต่บรรทัดเดียว

ผม embed Sanity Studio ไว้ที่ /studio ใน Next.js เลย ทำให้เข้าหลังบ้านได้จาก URL เดียวกับเว็บ

Content ที่จัดการผ่าน Sanity มี 4 อย่าง:

• Project — ชื่อ, รูป, คำอธิบาย, tech stack, link
• Blog Post — หัวข้อ, เนื้อหา (rich text), รูปปก, tags
• Author — ข้อมูลผู้เขียน, รูปโปรไฟล์, social links
• Category — หมวดหมู่สำหรับ blog และ project

ข้อดีอีกอย่างคือ Sanity มี Image CDN ในตัว รูปที่อัพโหลดจะถูก optimize และ serve ผ่าน CDN อัตโนมัติเลยครับ

Styling: Vanilla CSS + CSS Variables

ไม่ได้ใช้ Tailwind เต็มรูปแบบในโปรเจคนี้ครับ เลือกใช้ CSS Variables + inline styles แทน เพราะ design ที่ทำเป็นแนว minimal มาก ใช้สีแค่ 4 ตัวคือ:

1:root {
2  --black: #0a0a0a;
3  --white: #f5f5f0;
4  --gray: #555;
5  --border: #d4d4d0;
6}

ทำให้การทำ Dark Mode ง่ายมาก แค่ swap ค่าตัวแปร ทุก component เปลี่ยนตามอัตโนมัติโดยไม่ต้องแก้ทีละที่ ส่วน library ที่ใช้จัดการ Dark/Light mode คือ next-themes

Font ที่ใช้:

• DM Serif Display — หัวข้อ, ดูมีน้ำหนัก editorial
• DM Mono — เนื้อหา, navigation, labels ต่างๆ

SEO: ทำให้ Google เจอได้

สิ่งที่ทำเพื่อ SEO ในโปรเจคนี้:

1. Static Generation — หน้าทุกหน้า pre-render ไว้แล้ว Google index ได้เลย
2. Metadata API — title, description, Open Graph image ทุกหน้า
3. Sitemap.xml — generate อัตโนมัติจาก Sanity content ทุกครั้งที่ build
4. JSON-LD — structured data บอก Google ว่านี่คือ portfolio ของใคร
5. next/image — รูปโหลดเร็ว ไม่กระทบ Core Web Vitals

Deployment: Vercel + Custom Domain

Deploy บน Vercel ฟรี plan ซึ่งครอบคลุมการใช้งานของ portfolio ส่วนตัวได้สบายมากครับ สิ่งที่ได้มาฟรี:

• Auto deploy ทุกครั้งที่ push GitHub
• Global CDN กระจาย traffic ทั่วโลก
• HTTPS อัตโนมัติ
• Analytics เบื้องต้น

Custom domain ใช้ anupatsuttilert.com ซื้อผ่าน Hostinger แล้วตั้งค่า DNS ให้ชี้มา Vercel ครับ

สิ่งที่เรียนรู้จากโปรเจคนี้

1. Headless CMS เปลี่ยนชีวิตจริงๆ — ก่อนหน้านี้ถ้าอยากเพิ่ม project ต้องเปิด VS Code แก้ไฟล์แล้ว push ใหม่ทุกครั้ง ตอนนี้เพิ่มได้จากมือถือเลยครับ

2. TypeScript คุ้มค่าตั้งแต่วันแรก — โปรเจคขนาดนี้ถ้าไม่มี type มีโอกาสงงกับ data structure ที่ Sanity ส่งมามากมาย TypeScript ช่วย autocomplete และจับ error ได้ก่อน runtime

3. CSS Variables ง่ายกว่าที่คิด — ตอนแรกคิดว่าต้องใช้ Tailwind ทำ dark mode แต่แค่ swap CSS variables ก็ทำได้แล้ว และ maintain ง่ายกว่าด้วยครับ

Next Steps

ถึงเว็บจะเสร็จและใช้งานได้จริงแล้ว แต่ในมุมของนักพัฒนา และคนที่สนใจสาย Data ผมมองว่ามันยังมีพื้นที่ให้ต่อยอดได้อีกเยอะครับ สิ่งที่ผมแพลนไว้ว่าจะทำใน Phase ต่อไปคือ:

1. ติดตั้ง Web Analytics & สร้าง Traffic Dashboard ในเมื่อเรามีหน้าเว็บแล้ว สิ่งต่อไปที่ต้องมีคือ ข้อมูล ครับ ผมมีแผนจะฝัง Google Analytics (GA4) หรือใช้ Vercel Analytics เพื่อแทร็กพฤติกรรมคนเข้าเว็บ (User Behavior) เช่น คนใช้เวลาอ่าน Blog ไหนนานที่สุด หรือ Project ไหนถูกคลิกดูบ่อยสุด จากนั้นจะนำ Data เหล่านี้ไปต่อท่อสร้าง Dashboard สรุปผลด้วย Looker Studio หรือ Power BI เพื่อใช้วิเคราะห์และปรับปรุงต่อไปครับ
2. ทดลองทำ Automation ด้วย Sanity Webhooks อยากลองดึงศักยภาพของ Headless CMS มาใช้ให้สุดครับ โดยจะลองตั้งค่า Webhooks ว่า ถ้าผมกด Publish บทความใหม่จาก Sanity ให้มันยิง API ไปแจ้งเตือนใน Discord ส่วนตัว หรืออัปเดตสเตตัสลง LinkedIn อัตโนมัติ เพื่อลดงาน Manual ของตัวเองลง
3. เพิ่มระบบค้นหา (Smart Search) ตอนนี้คอนเทนต์อาจจะยังไม่เยอะ แต่ถ้าในอนาคตมี Blog และ Project เพิ่มขึ้น ผมวางแผนจะทำระบบ Full-text Search หรืออาจจะลองเล่นพวก Semantic Search เพื่อให้คนอ่านพิมพ์คีย์เวิร์ดแล้วค้นหาเนื้อหาในเว็บเจอได้ทันที
4. ปรับปรุง Accessibility (a11y) ให้เต็ม 100 แม้เว็บจะโหลดเร็วและ SEO ดีแล้ว แต่อยากจะเก็บรายละเอียดเรื่องการเข้าถึง เช่น การรองรับ Screen Reader หรือการใช้ Keyboard Navigation (กด Tab เพื่อเลื่อนอ่าน) ให้สมบูรณ์ตามมาตรฐานเว็บยุคใหม่ครับ

สรุป

Next.js 16 + Sanity v5 + TypeScript + Vercel = Portfolio ที่เพิ่ม content ได้โดยไม่แก้โค้ด ติด Google และ deploy ฟรี

ถ้าใครสนใจทำแบบเดียวกันหรืออยากรู้รายละเอียดส่วนไหนเพิ่มเติม ทักมาได้เลยครับที่ suttilertanupat@gmail.com