Đưa template của bạn lên mạng

Từ file zip tới một website đang chạy. Mọi template của Template Pantry đều là website Astro tĩnh, nên các bước giống nhau cho tất cả.

Trước khi bắt đầu

Bạn cần ba thứ:

  • Node.js 20 trở lên (nodejs.org). Kiểm tra bằng lệnh: node --version
  • File zip trong email xác nhận đơn hàng, đã giải nén vào một thư mục
  • Một trình soạn code như VS Code, và cửa sổ terminal mở tại thư mục đó

1. Chạy trên máy của bạn

Trong thư mục template, cài các gói và chạy bản xem trước:

npm install
npm run dev

Mở địa chỉ mà terminal in ra, thường là http://localhost:4321. Trang tự tải lại mỗi khi bạn lưu file.

2. Sửa thành website của bạn

File README.md trong zip ghi rõ cần sửa file nào. Ở hầu hết template, một file chứa tên doanh nghiệp, địa chỉ, giờ mở cửa, giá và menu, nên bạn hiếm khi phải đụng tới code của trang.

Ảnh mẫu chỉ để giữ chỗ. Hãy đặt ảnh của bạn vào public/images rồi cập nhật đường dẫn, chiều rộng, chiều cao và mô tả alt của từng ảnh trong cùng file đó.

3. Đặt tên miền

Mở astro.config.mjs và đặt site thành địa chỉ website sẽ chạy:

// astro.config.mjs
site: "https://www.your-domain.com",

Khi chưa đặt, template bỏ qua thẻ canonical, thẻ chia sẻ mạng xã hội và sitemap, để bản build không bao giờ xuất bản địa chỉ sai. Chưa có tên miền? Cứ deploy trước rồi quay lại bước này.

4. Build

Lệnh này biến dự án thành HTML, CSS và ảnh thuần:

npm run build

Website hoàn chỉnh nằm trong thư mục dist. Đó là thư mục bạn đưa lên mạng.

5. Đưa lên mạng

Dịch vụ lưu trữ tĩnh nào cũng dùng được, và cả bốn dịch vụ dưới đây đều có gói miễn phí. Nếu bạn kết nối kho Git, dịch vụ sẽ tự build với các thiết lập sau:

Lệnh build
npm run build
Thư mục đầu ra
dist
Phiên bản Node
20

Cloudflare Pages

  1. Trong bảng điều khiển Cloudflare, mở Workers & Pages và tạo một dự án Pages.
  2. Nhanh nhất: chọn cách tải lên và thả thư mục dist vào. Hoặc kết nối kho Git và nhập các thiết lập ở trên.
  3. Nếu build từ Git lỗi vì phiên bản Node, thêm biến môi trường NODE_VERSION với giá trị 20 rồi deploy lại.

Netlify

  1. Nhanh nhất: kéo thư mục dist thả vào app.netlify.com/drop.
  2. Hoặc tạo site mới từ kho Git và nhập lệnh build cùng thư mục đầu ra ở trên.

Vercel

  1. Đẩy dự án lên một kho Git rồi import vào Vercel.
  2. Vercel tự nhận ra Astro và điền sẵn thiết lập. Giữ nguyên rồi bấm deploy.

GitHub Pages

  1. Đẩy dự án lên GitHub. Trong phần cài đặt của kho, mở Pages và đặt nguồn là GitHub Actions.
  2. Thêm workflow GitHub Pages chính thức của Astro (tìm "Astro deploy to GitHub Pages") rồi đẩy lại.
  3. Nếu website nằm trong thư mục con, như username.github.io/my-site, hãy đặt thêm base là "/my-site" trong astro.config.mjs.

6. Gắn tên miền riêng

Thêm tên miền trong bảng điều khiển của dịch vụ lưu trữ, nó sẽ hiện bản ghi DNS cần tạo ở nơi bạn mua tên miền, thường là một bản ghi CNAME. HTTPS được bật sẵn cho bạn, và thay đổi DNS có thể mất tới một ngày để có hiệu lực.

Sau đó đặt site trong astro.config.mjs thành địa chỉ mới (bước 3), build và deploy thêm một lần.

7. Cho form liên hệ gửi được

Website tĩnh không có máy chủ, nên form cần một nơi để gửi tới. Hãy tạo một địa chỉ nhận form bằng dịch vụ như Formspree, Getform hoặc Netlify Forms, rồi điền địa chỉ đó vào chỗ README của template chỉ dẫn (một mục cấu hình, hoặc một dòng được đánh dấu trong script của form).

Khi chưa làm bước này, form vẫn hiện lời cảm ơn nhưng không gửi gì cả. Hãy tự gửi thử một tin trước khi ra mắt.

Lỗi thường gặp

npm install bị lỗi, hoặc cảnh báo unsupported engine
Node.js của bạn quá cũ. Hãy cài bản 20 trở lên, đóng rồi mở lại terminal, sau đó chạy lại npm install.
Build được trên máy nhưng lỗi trên dịch vụ lưu trữ
Kiểm tra ba thiết lập ở trên. Nguyên nhân thường gặp là dịch vụ dùng bản Node cũ hơn; hãy đặt thành 20.
Website đã lên nhưng mất định dạng, hoặc các link bị hỏng
Website đang được phục vụ từ một thư mục con. Hãy đặt base trong astro.config.mjs thành thư mục đó (ví dụ "/my-site"), hoặc chuyển website về gốc của tên miền.
Ảnh của tôi không hiện khi lên mạng
Trên máy chủ, tên file phân biệt chữ hoa và chữ thường: Photo.JPG và photo.jpg là hai file khác nhau. Hãy ghi tên trong cấu hình khớp chính xác với file, và để ảnh trong public/images.
Tôi sửa rồi nhưng website đang chạy không đổi
Website chỉ đổi khi bạn deploy lại. Hãy chạy npm run build rồi tải dist lên, hoặc đẩy lên Git nếu dịch vụ build từ đó. Sau đó tải lại trang bằng Ctrl+F5.
Không có sitemap, hoặc chia sẻ link không hiện ảnh xem trước
Hãy đặt site trong astro.config.mjs (bước 3). Cả hai được cố ý bỏ qua cho tới khi template biết địa chỉ thật của nó.