Cài Đặt Astro Trên Windows Và VS Code: Tạo Blog Tĩnh Từ Đầu

Windows và VS Code triển khai blog Astro lên Cloudflare

Nếu bạn đang dùng Windows và VS Code, việc cài đặt Astro để làm blog tĩnh khá nhanh. Astro phù hợp với website thiên về nội dung vì build ra HTML tĩnh, tải nhanh, dễ quản lý bài viết bằng Markdown và triển khai thuận tiện lên Cloudflare Pages.

Trong bài này, mình sẽ đi từ bước kiểm tra Node.js, khởi tạo project Astro, chạy thử local cho đến cách tổ chức source khi muốn chuyển dần một blog WordPress tĩnh sang Astro mà vẫn giữ site cũ an toàn.

NỘI DUNG BÀI VIẾT

Astro là gì và vì sao phù hợp với blog?

Astro là framework tập trung vào website nội dung. Ở chế độ static mặc định, Astro tạo sẵn các file HTML trong lúc build và không gửi JavaScript xuống trình duyệt nếu trang không cần tương tác. Với blog kỹ thuật, tài liệu hoặc website giới thiệu, mô hình này đơn giản hơn nhiều so với duy trì WordPress, PHP và MySQL.

Mỗi bài viết có thể là một file Markdown. Layout, SEO, danh mục, tag và giao diện được quản lý bằng component nên không phải sao chép một file HTML dài mỗi lần đăng bài.

Kiểm tra Node.js và npm trên Windows

Mở Terminal trong VS Code bằng tổ hợp Ctrl + `, sau đó chạy:

node -v
npm -v

Nếu cả hai lệnh đều trả về phiên bản, môi trường đã sẵn sàng. Với các phiên bản Astro mới, bạn nên kiểm tra yêu cầu Node.js trong package.json của project; dùng một bản Node LTS còn được hỗ trợ sẽ ổn định hơn.

Khởi tạo project Astro trong VS Code

Tại thư mục repo, chạy trình tạo project chính thức:

npm create astro@latest

Với một repo đã có Git và muốn thử nghiệm an toàn, bạn có thể chọn:

Where should we create your new project? — ./astro-blog
How would you like to start? — Blog template hoặc Empty
Install dependencies? — Yes
Initialize a new Git repository? — No

Chọn No ở bước Git vì thư mục Astro đang nằm bên trong repo hiện tại. Việc tạo thêm một repository lồng nhau thường làm quy trình commit và deploy khó quản lý hơn.

Chạy Astro trên máy local

Sau khi cài xong, chuyển vào thư mục project và chạy development server:

cd astro-blog
npm run dev

Mở http://localhost:4321. Nếu trang Astro xuất hiện, phần cài đặt đã thành công. Khi thay đổi component hoặc Markdown, trình duyệt sẽ cập nhật gần như ngay lập tức.

Trước khi commit, luôn chạy production build để bắt lỗi schema, đường dẫn ảnh hoặc route:

npm run build
npm run preview

Tổ chức source cho blog Astro

Một cấu trúc blog thực tế có thể như sau:

astro-blog/
├── src/
│   ├── content/
│   │   └── blog/
│   │       ├── bai-1.md
│   │       └── bai-2.md
│   ├── components/
│   ├── layouts/
│   └── pages/
├── public/
│   └── images/
├── astro.config.mjs
└── package.json

Bài mới được tạo trong src/content/blog/. Ảnh không cần tối ưu bởi Astro có thể đặt trong public/images/; ảnh cần pipeline tối ưu có thể đưa vào src/assets/.

![Cấu hình Asterisk](/images/asterisk/pjsip.webp)

Chuyển blog WordPress static sang Astro an toàn

Không nên xóa source static cũ rồi thay ngay bằng Astro. Cách an toàn là tạo branch migration:

git switch -c astro-migration

Sau đó đặt project Astro trong thư mục riêng. Site production vẫn tiếp tục đọc HTML ở root, còn Astro được phát triển và build độc lập trong astro-blog/.

Khi chuyển bài cũ, điều quan trọng nhất là giữ nguyên slug. Nếu URL hiện tại là /cai-dat-prometheus/, route Astro cũng phải build ra đúng /cai-dat-prometheus/index.html, không tự ý thêm tiền tố /blog/. Cần đối chiếu thêm canonical, title, description, heading, internal link và đường dẫn ảnh.

Chuẩn bị deploy Astro lên Cloudflare Pages

Với website Astro static, cấu hình Cloudflare Pages cơ bản là:

Root directory: astro-blog
Build command: npm run build
Build output directory: dist

Nên tạo preview deployment trước, crawl toàn bộ URL và so sánh với website cũ. Chỉ đổi production khi các bài quan trọng, sitemap, robots.txt, trang danh mục, tag và lỗi 404 đã được kiểm tra.

Kết luận

Workflow sau khi chuyển sang Astro sẽ gọn hơn: viết Markdown, thêm ảnh, commit, push và để Cloudflare Pages build website. Tuy nhiên, lợi ích chỉ thực sự trọn vẹn khi quá trình migration giữ nguyên URL và SEO của nội dung cũ.

Với repo AdTek Labs, hướng đi phù hợp là dựng Astro trên branch riêng, chuyển một bài đại diện để kiểm thử giao diện và SEO, sau đó mới viết công cụ chuyển hàng loạt các bài còn lại.