Link-in-Bio Page

ทำไมไม่ใช้ Linktree

Linktree และ service คล้ายกันมี:

• Brand ของ service ปรากฏอยู่เสมอ
• โหลดช้า (หลาย redirect, JS หนัก)
• ออกแบบ custom ได้จำกัด
• ต้องพึ่ง third-party ที่อาจเปลี่ยน pricing

ใช้เวลาสร้างเองด้วย Astro แค่ 2 ชั่วโมง ได้ผลลัพธ์ที่ดีกว่าในทุกด้าน

ฟีเจอร์

• Avatar + name + bio — ด้านบนหน้า
• Link cards — แต่ละ card มี icon, label, description (optional)
• Dark mode — toggle อัตโนมัติตาม OS preference
• Analytics — ใช้ Plausible (privacy-friendly, ไม่มี cookie banner)
• โหลดเร็วมาก — ไม่มี JavaScript นอกจาก dark mode toggle

Structure

src/
└── pages/
    └── index.astro    — หน้าเดียว ทุก link อยู่ที่นี่

public/
└── avatar.jpg

ไม่มี Content Collections เพราะ links เปลี่ยนบ่อย แก้ใน index.astro ตรงๆ ง่ายกว่า

ตัวอย่าง Link Config

---
const links = [
  {
    href: 'https://panupongws.com',
    label: 'Panupong WS',
    description: 'Projects, Resources, และไอเดีย',
    icon: '🏡',
  },
  {
    href: 'https://github.com/panupongws98',
    label: 'GitHub',
    description: 'Source code และ projects',
    icon: '⌨️',
  },
  {
    href: '/rss.xml',
    label: 'RSS Feed',
    description: 'ติดตาม Projects และ Resources ใหม่',
    icon: '📡',
  },
];
---

{links.map(({ href, label, description, icon }) => (
  <a href={href} class="link-card" target={href.startsWith('http') ? '_blank' : undefined}>
    <span class="link-icon">{icon}</span>
    <div>
      <p class="link-label">{label}</p>
      {description && <p class="link-desc">{description}</p>}
    </div>
    <span class="link-arrow" aria-hidden="true">→</span>
  </a>
))}

Performance

Lighthouse score หลัง deploy บน GitHub Pages:

• Performance: 100
• Accessibility: 100
• Best Practices: 100
• SEO: 100

เป็นเพราะ HTML+CSS ล้วนๆ ไม่มี framework overhead ไม่มี CDN script

สิ่งที่เรียนรู้

Simple ไม่ได้แปลว่า inferior — หน้าเดียว ไม่มี framework ไม่มี database ทำงานได้เร็วกว่า service ที่มี team ใหญ่ดูแล

CSS ล้วนๆ ทำได้มากกว่าที่คิด — dark mode, hover animation, responsive layout ไม่ต้องการ JavaScript เลย

Self-host เสมอถ้าทำได้ — ข้อมูลอยู่ใน git repo ไม่มีวัน lock-in