🚀 Astro, GitHub and Vercel: a site that deploys itself · Astro, GitHub และ Vercel: เว็บที่ขึ้นออนไลน์ให้ตัวเอง · Astro、GitHub 和 Vercel：一个自己上线的网站

1 Make it, and run it · สร้างมัน แล้วรันมัน · 把它建出来，然后跑起来

⌨️ TERMINAL · make the project

npm create astro@latest my-site -- --template minimal
cd my-site
npm run dev

🖥️ WHAT IT PRINTED · a real run

Dev server running at http://localhost:4321

2 A page is a file · หน้าเว็บคือไฟล์หนึ่งไฟล์ · 一个页面就是一个文件

📄 NEW FILE · src/pages/hello.astro

---
// A page with nothing clever in it. No layout, no component, no imports.
// The point of this one is only that the file exists and the URL works.
const town = "Chiang Mai";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello from {town}</h1>
    <p>This file is src/pages/hello.astro, and it is at /hello.</p>
  </body>
</html>

3 A layout, and the hole in it · เลย์เอาต์ กับช่องว่างในนั้น · 一个布局，和它中间的洞

📄 NEW FILE · src/layouts/Base.astro

---
// Everything between the two lines of dashes runs while the page is being
// built, on the computer doing the building. It never reaches the browser.
const { title } = Astro.props;
const year = new Date().getFullYear();
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <header>
      <a href="/">Doi Suthep Coffee</a>
      <a href="/lessons">Lessons</a>
    </header>

    <main>
      <!-- Whatever the page puts inside <Base> lands here. -->
      <slot />
    </main>

    <footer>Chiang Mai &middot; {year}</footer>
  </body>
</html>

<style>
  body { font-family: system-ui, sans-serif; max-width: 34rem;
         margin: 0 auto; padding: 2rem; }
  header a { margin-right: 1rem; }
  footer { margin-top: 3rem; color: #666; font-size: 0.9rem; }
</style>

4 A page that uses the layout · หน้าเว็บที่เรียกใช้เลย์เอาต์ · 一个用上布局的页面

📄 NEW FILE · src/pages/lessons.astro

---
import Base from "../layouts/Base.astro";
---

<Base title="Lessons">
  <h1>Lessons</h1>
  <p>This file is <code>src/pages/lessons.astro</code>.</p>
  <p>It is at <code>/lessons</code>. Nobody told it to be. The folder is the map.</p>
</Base>

5 A component that takes props · คอมโพเนนต์ที่รับ props · 一个会收 props 的组件

📄 NEW FILE · src/components/Card.astro

---
// A component takes props, the same way a function takes arguments.
const { name, price, note } = Astro.props;
---

<article>
  <h2>{name}</h2>
  <p class="price">{price} baht</p>
  <p>{note}</p>
</article>

<style>
  article { border: 1px solid #ddd; border-radius: 8px;
            padding: 1rem; margin: 1rem 0; }
  h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
  .price { margin: 0 0 0.5rem; color: #166534; font-weight: 600; }
</style>

6 A list, and the front page · ลิสต์ กับหน้าแรก · 一个列表，和首页

📄 NEW FILE · src/pages/index.astro

---
import Base from "../layouts/Base.astro";
import Card from "../components/Card.astro";

// Ordinary JavaScript. This runs once, when the site is built.
const coffees = [
  { name: "Doi Chaang", price: 180, note: "Grown on the mountain, washed." },
  { name: "Doi Tung", price: 165, note: "Softer. Good with milk." },
  { name: "Mae Salong", price: 150, note: "The cheap one we drink ourselves." },
];
---

<Base title="Doi Suthep Coffee">
  <h1>Our coffee</h1>
  <p>{coffees.length} bags, roasted in Chiang Mai.</p>

  {coffees.map((coffee) => (
    <Card name={coffee.name} price={coffee.price} note={coffee.note} />
  ))}
</Base>

7 Build it, and see what a visitor gets · สั่งบิลด์ แล้วดูว่าผู้เข้าชมได้อะไร · 构建一次，看看访客拿到什么

⌨️ TERMINAL

npm run build

🖥️ WHAT IT PRINTED · a real build

generating static routes
  ├─ /hello/index.html (+9ms)
  ├─ /lessons/index.html (+5ms)
  ├─ /index.html (+3ms)
  Completed in 28ms.
3 page(s) built in 629ms

8 Put it on GitHub · เอาขึ้น GitHub · 把它放到 GitHub 上

⌨️ TERMINAL · once per project

git init
git add .
git commit -m "my first astro site"
git branch -M main
git remote add origin https://github.com/YOURNAME/my-site.git
git push -u origin main

9 Vercel deploys every push · Vercel เอาขึ้นให้ทุกครั้งที่ push · 你每次 push，Vercel 就发布一次

10 An adapter, and a route that runs per visit · อะแดปเตอร์ กับเส้นทางที่รันทุกครั้งที่มีคนเข้า · 一个适配器，和一条每次访问都运行的路由

⌨️ TERMINAL · it edits astro.config.mjs for you

npx astro add vercel

📄 CHANGED FILE · astro.config.mjs

// @ts-check
import { defineConfig } from 'astro/config';

import vercel from '@astrojs/vercel';

// https://astro.build/config
export default defineConfig({
  adapter: vercel()
});

📄 NEW FILE · src/pages/api/open.ts

import type { APIRoute } from "astro";

// Without this line Astro answers the question once, while building, and
// serves that same answer for ever. The shop would be open all night.
export const prerender = false;

const OPENS = 7;
const CLOSES = 18;

export const GET: APIRoute = async () => {
  // Bangkok time, whatever time zone the server happens to be in.
  const now = new Date();
  const bangkok = new Date(now.toLocaleString("en-US", {
    timeZone: "Asia/Bangkok",
  }));
  const hour = bangkok.getHours();

  return new Response(
    JSON.stringify({
      open: hour >= OPENS && hour < CLOSES,
      hour,
      opens: OPENS,
      closes: CLOSES,
      asked: now.toISOString(),
    }),
    { headers: { "Content-Type": "application/json" } },
  );
};

🖥️ TWO REAL CALLS · two seconds apart

curl http://localhost:4321/api/open
{"open":true,"hour":17,"opens":7,"closes":18,"asked":"2026-09-22T10:26:14.642Z"}

curl http://localhost:4321/api/open
{"open":true,"hour":17,"opens":7,"closes":18,"asked":"2026-09-22T10:26:16.814Z"}

11 Read what the build made · อ่านสิ่งที่การบิลด์สร้างออกมา · 读懂构建生成了什么

🖥️ THE SAME BUILD, AFTER THE ADAPTER

prerendering static routes
  ├─ /hello/index.html (+9ms)
  ├─ /lessons/index.html (+5ms)
  ├─ /index.html (+3ms)
[@astrojs/vercel] Bundling function ../../server/entry.mjs
[@astrojs/vercel] Copying static files to .vercel/output/static
Server built in 1.94s

🖥️ WHAT VERCEL ACTUALLY RECEIVES

.vercel/output/static/index.html
.vercel/output/static/hello/index.html
.vercel/output/static/lessons/index.html
.vercel/output/functions/_render.func

🖥️ AND HOW IT DECIDES · from .vercel/output/config.json

{ "handle": "filesystem" }
{ "src": "^/api/open/?$", "dest": "_render" }
{ "src": "^/.*$",         "dest": "_render", "status": 404 }