Frontend Development

Deploy Astro lên Vercel từ A-Z cho người mới 2026

10/5/2026

Bạn vừa xây dựng xong website bằng Astro và muốn đưa lên internet miễn phí? Tin vui là bạn có thể deploy Astro lên Vercel chỉ trong vài phút mà không cần VPS hay cấu hình server phức tạp. Trong bài viết này, mình sẽ hướng dẫn đầy đủ cách deploy Astro lên Vercel từ A-Z cho người mới năm 2026.

Vì sao nên deploy Astro lên Vercel?

Vercel là một nền tảng hosting miễn phí rất phù hợp cho các website tĩnh hoặc framework hiện đại như Astro, Next.js hay React.

Ưu điểm khi dùng Vercel:

  • Miễn phí cho dự án cá nhân

  • Tự động build và deploy khi push code

  • Hỗ trợ HTTPS miễn phí

  • Tốc độ CDN toàn cầu nhanh

  • Dễ kết nối domain custom

Nếu bạn đang tìm hosting Astro miễn phí, Vercel là một lựa chọn rất đáng cân nhắc.


Bước 1: Tạo project Astro

Nếu chưa có project Astro, bạn hãy tạo mới bằng lệnh:

npm create astro@latest

Hoặc nếu dùng Bun:

bun create astro

Sau đó cài dependencies:

npm install

Chạy thử local:

npm run dev

Mở trình duyệt:

http://localhost:4321

Nếu website chạy bình thường nghĩa là project đã sẵn sàng để deploy.


Bước 2: Push project lên GitHub

Vercel sẽ lấy source code từ GitHub để build tự động.

Khởi tạo Git:

git init

Thêm file vào repository:

git add .  
git commit -m"first commit"

Tạo repository mới trên GitHub rồi kết nối:

git remote add origin YOUR_GITHUB_URL  
git branch -M main  
git push -u origin main

Sau khi push thành công, project Astro của bạn đã sẵn sàng để deploy.


Bước 3: Kết nối GitHub với Vercel

Truy cập website Vercel và đăng nhập bằng GitHub.

Sau đó:

  1. Nhấn Add New Project

  2. Chọn repository Astro vừa push

  3. Nhấn Import

Thông thường Vercel sẽ tự nhận diện Astro framework nên bạn không cần cấu hình nhiều.


Bước 4: Cấu hình Build Settings

Trong phần cấu hình build, kiểm tra các thông số sau:

Build Command

npm run build

Hoặc với Bun:

bun run build

Output Directory

dist

Install Command

npm install

Hoặc:

bun install

Nếu project dùng adapter của Vercel, hãy cài thêm:

npm install @astrojs/vercel

Sau đó cấu hình trong file:

// astro.config.mjs  
import { defineConfig } from"astro/config";  
importvercelfrom"@astrojs/vercel";  
  
exportdefaultdefineConfig({  
  adapter: vercel(),  
});

Điều này giúp website hoạt động tốt hơn khi chạy production.


Bước 5: Deploy Astro Production

Nhấn nút Deploy trên Vercel.

Quá trình build thường chỉ mất khoảng 1–3 phút. Sau khi hoàn tất, bạn sẽ nhận được URL dạng:

your-project.vercel.app

Mỗi lần bạn push code mới lên GitHub:

git add .  
git commit -m"update"  
git push

Vercel sẽ tự động build và deploy lại website.

Đây là điểm mạnh lớn của workflow deploy astro vercel hiện nay.


Bước 6: Thêm Domain Custom

Nếu muốn dùng domain riêng như:

www.websitecuaban.com

Bạn vào:

Project Settings → Domains

Thêm domain vào Vercel rồi cập nhật DNS tại nơi mua domain.

Thông thường chỉ cần:

A Record

76.76.21.21

Hoặc dùng:

CNAME

cname.vercel-dns.com

Sau vài phút đến vài giờ, domain sẽ hoạt động.


Bước 7: Fix lỗi 404 khi dùng SPA trong Astro

Nếu bạn dùng client routing hoặc SPA mode, đôi khi refresh trang sẽ bị lỗi 404 Not Found.

Tạo file:

vercel.json

Thêm cấu hình:

{  
  "rewrites": [  
    {  
      "source": "/(.*)",  
      "destination": "/index.html"  
    }  
  ]  
}

Điều này giúp mọi route đều trả về file chính của ứng dụng.


Bước 8: SEO sau khi deploy

Sau khi website online, đừng quên tối ưu SEO:

Tạo sitemap

Cài package:

npx astro add sitemap

Thêm robots.txt

Ví dụ:

User-agent: *  
Allow: /  
  
Sitemap: https://yourdomain.com/sitemap-index.xml

Submit Google Search Console

Gửi sitemap để Google index website nhanh hơn.

Ngoài ra hãy tối ưu:

  • Meta title

  • Meta description

  • Open Graph image

  • Structured Data

  • Core Web Vitals

Astro vốn nổi tiếng cực nhanh nên rất dễ đạt điểm SEO cao.

Kết luận

Việc deploy Astro lên Vercel hiện nay cực kỳ đơn giản, kể cả với người mới. Bạn chỉ cần tạo project, push GitHub và kết nối Vercel là đã có website chạy production miễn phí. Nếu muốn một giải pháp hosting Astro miễn phí, tốc độ cao và dễ dùng, Vercel gần như là lựa chọn tốt nhất năm 2026.