Cách đưa trang web lên Cloudflare Workers

Bạn có một thư mục chứa trang web đã làm xong, nhưng chưa có liên kết nào cả. Hãy đưa nó lên Cloudflare Workers, và giao luôn quy trình này cho Claude Code: chúng ta sẽ dựng một skill để việc đăng và cập nhật gói gọn trong một yêu cầu ngắn.

1. Cloudflare Workers cho nội dung tĩnh là gì

Từ Workers nghe như "những chương trình chạy trên server", và điều đó đúng. Nhưng chưa phải toàn bộ: bạn có thể gắn một thư mục file vào worker, và khi đó server chỉ đơn giản trả các file đó ra, giống một dịch vụ hosting bình thường. Không cần viết một dòng code nào cho việc này.

Với một trang chỉ gồm HTML, CSS và hình ảnh thì chế độ này là đủ. Trong tài liệu, thư mục này được gọi là static assets, tài nguyên tĩnh, và trong cài đặt của dự án nó chiếm đúng một trường với đường dẫn.

Cloudflare phân phát các file qua mạng lưới server của mình và cache chúng gần người truy cập hơn.

2. Chi phí bao nhiêu

Các yêu cầu đến file tĩnh miễn phí và không giới hạn số lượng. Đó là điều khoản của gói dịch vụ, chứ không phải lời hứa rằng không ai đếm lượt truy cập.

Vậy con số nổi tiếng - 100.000 yêu cầu mỗi ngày - đến từ đâu? Đó là giới hạn cho các lệnh gọi tới Worker script, tức chương trình chạy trên server. Một trang chỉ gắn thư mục thì không có script, nên không bị tính vào bộ đếm đó.

Đường đi phía trên trong sơ đồ chính là đường mà trang của bạn đi qua: file được trả về mà không gọi chương trình phía server. Đường phía dưới sẽ cần đến nếu sau này bạn thêm Worker script.

Gói miễn phí vẫn có giới hạn, nhưng chúng nói về chuyện khác - về dung lượng của những gì bạn đăng lên:

Với một trang có chừng chục hình ảnh, các giới hạn này thường là đủ. Trước một dự án lớn, hãy kiểm tra điều khoản hiện hành của Cloudflare: các giới hạn có thể thay đổi. 25 MB cho mỗi file, nhân tiện, nghe có vẻ hào phóng cho đến tận video đầu tiên.

3. Tài khoản

Đăng ký trên cloudflare.com theo cách thông thường: email và mật khẩu, sau đó là email xác nhận. Gói miễn phí không cần thẻ ngân hàng. Bạn cũng không cần thêm tên miền riêng - dịch vụ sẽ gợi ý điều đó, nhưng gợi ý này thuộc về nửa còn lại của sản phẩm: bảo vệ và tăng tốc các trang web đã có sẵn.

Sau khi đăng nhập, mục bạn cần tên là "Workers & Pages", và nó không nằm ngay trước mắt: trong menu bên trái, trước tiên là nhóm Build, bên trong đó là Compute, và chỉ bên trong nữa mới có "Workers & Pages". Bảng điều khiển thỉnh thoảng được sắp xếp lại, nên nếu không thấy mục đó theo đường dẫn trên, hãy tìm theo tên: ô tìm kiếm ở góc trên bên trái mở ra bằng Ctrl + K. Hai từ trong tên gọi này là hai sản phẩm của Cloudflare; bạn cần nửa đầu, Workers, và bạn sẽ tự đến đó mà không cần chọn gì cả.

Một điều nữa sẽ xuất hiện ở lần deploy đầu tiên: Cloudflare sẽ yêu cầu bạn chọn tên subdomain cho tài khoản. Mọi dự án của bạn sẽ nằm trên đó, và địa chỉ được ghép từ hai phần - tên dự án cộng với subdomain của bạn:

my-landing.example-account.workers.dev
|          |               |
|          |               tên miền chung của Cloudflare
|          subdomain của tài khoản bạn
tên dự án

tên này về sau rất khó đổi, vì vậy đừng điền đại cái tên đầu tiên nảy ra trong đầu.

4. Lần deploy đầu tiên

Trước tiên, hãy xem nhanh việc đăng trang trông ra sao trong bảng điều khiển. Đây là phần tham quan không bắt buộc: nếu bạn muốn thiết lập deploy bằng agent ngay và giữ một địa chỉ duy nhất, hãy chuyển thẳng đến phần chuẩn bị bên dưới.

landing/          <- thư mục này ta đưa lên
  index.html      <- trang chính, tên là bắt buộc
  wrangler.jsonc  <- agent sẽ tạo trước lần deploy đầu tiên
  style.css
  img/
    hero.png

Trước khi đăng, hãy xem lại nội dung thư mục đã chọn: các file trong đó sẽ trở nên công khai. Loại bỏ các file cá nhân và bản nháp mà bạn không định cho ai xem.

Thủ công qua bảng điều khiển

Trong mục dự án có một nút để tạo dự án mới. Sau đó bạn sẽ được yêu cầu đưa file lên: có thể chọn một file duy nhất, cũng có thể chọn cả thư mục. Tải lên, xác nhận - Cloudflare sắp xếp chúng ở phía họ và trả về một liên kết. Tên nút và thứ tự các màn hình ở đây thay đổi thường xuyên hơn cả tần suất các bài viết ra đời, vậy nên hãy bám vào ý nghĩa chứ đừng bám vào nhãn chữ: tạo dự án, đưa file lên, nhận địa chỉ.

Mở địa chỉ vừa nhận được, https://…workers.dev, và kiểm tra trang cùng hình ảnh. Việc này có thể làm ngay trên chính máy tính đó. Điện thoại sẽ hữu ích để kiểm tra thêm xem trang có mở được từ thiết bị khác không và giao diện trên di động ra sao.

Sau khi đăng qua bảng điều khiển, không có config cục bộ nào xuất hiện cả. Skill trong ví dụ của chúng ta sẽ không tự liên kết một thư mục với dự án kiểu đó: không có config, nó sẽ tạo một tên mới và một địa chỉ thứ hai. Cloudflare cho phép cập nhật một Worker đã có qua Wrangler, nhưng để làm vậy bạn phải tự thiết lập riêng config mang đúng tên Worker đó.

Cần gì để agent làm việc này

Cho những lần đăng về sau, chúng ta sẽ thiết lập một skill. Việc chuẩn bị chỉ cần làm một lần trên máy tính của bạn.

Bạn sẽ không cần nhiều phần mềm. Tài khoản thì đã có sẵn, chỉ cần thêm Node.js - kiểm tra bằng lệnh node -v, và nếu không tìm thấy lệnh này, bạn phải cài Node.js trước. Bản thân wrangler thì không cần cài: npx sẽ tự tải bản mới khi cần đến.

Bước thứ hai trong sơ đồ là đăng nhập, và nên xong việc này ngay bây giờ, trước mọi thứ khác:

npx wrangler login    # một trình duyệt sẽ mở ra, trong đó có nút xác nhận

Chạy lệnh này trong terminal. Nếu bỏ qua bước này, toàn bộ quy trình sẽ vấp ngay ở lần chạy đầu tiên, và trông giống như một skill bị hỏng, dù skill hoàn toàn không có lỗi gì. Để kiểm tra mọi thứ đã ổn chưa, dùng lệnh npx wrangler whoami - nó sẽ cho biết bạn đang đăng nhập bằng tài khoản nào.

Với hướng đi này, đăng nhập qua trình duyệt là đủ. API token được nói đến trong phần mở rộng không bắt buộc ở cuối bài.

Bước thứ ba trong sơ đồ, npx wrangler deploy, sẽ do agent chạy từ thư mục chứa trang web. Trước tiên, hãy cho nó các quy tắc chuẩn bị config và đăng trang.

5. Skill deploy của riêng bạn

Khi chỉ có một trang, một yêu cầu trong khung chat là đủ. Nhưng chỉ cần thêm trang thứ hai, thứ ba, thứ mười - và mỗi lần bạn lại phải giải thích cho agent đúng những điều cũ: lấy thư mục nào, đặt tên dự án ra sao, làm gì với file cài đặt. Đến lần thứ ba thì việc này bắt đầu gây khó chịu.

Skill cần làm được những gì

Năm bước, và mỗi bước giải quyết một vấn đề cụ thể, không phải thêm vào cho đủ:

1. Lấy thư mục đã được nêu tên và đảm bảo index.html nằm ở thư mục gốc của nó. Một bước kiểm tra tốn rất ít công nhưng bắt được lỗi phổ biến nhất trước khi deploy, chứ không phải sau đó.
2. Xác định tên dự án - suy ra từ tên thư mục, thay vì hỏi mỗi lần.
3. Xem bên trong thư mục, cạnh index.html, có file wrangler.jsonc hay không. Không có - tạo mới; có rồi - lấy tên từ đó và không viết đè lên bất cứ gì trong đó.
4. Chạy deploy từ thư mục này và hiển thị lệnh trước khi chạy.
5. Trả về địa chỉ công khai và nhắc kiểm tra trang cùng hình ảnh theo địa chỉ đó.

Tên dự án được suy ra từ thư mục

Đây là quyết định quan trọng nhất trong toàn bộ quy trình, và chính điều này không thể để agent tự tùy hứng. Nếu không có quy tắc nào ấn định tên, agent sẽ tự nghĩ ra - và lần sau lại nghĩ ra một cái khác. Kết quả là một dự án thứ hai với địa chỉ khác, còn dự án đầu thì vẫn còn treo đó.

Quy tắc rất đơn giản: tên thư mục chính là tên dự án. Tên worker chỉ được chứa chữ cái Latin viết thường, chữ số và dấu gạch ngang, nên mọi thứ khác - dấu chấm, khoảng trắng, gạch dưới - đổi thành gạch ngang, và thêm một hậu tố ngắn, bốn ký tự ngẫu nhiên, vào cuối:

landing/                 ->  landing-42c2
my.first.page/           ->  my-first-page-8e10
portfolio-2026/          ->  portfolio-2026-b7a3

Hậu tố này cần để hai thư mục cùng tên trong các dự án khác nhau không chiếm cùng một địa chỉ. Nó được tạo ra đúng một lần, khi file cài đặt được tạo, và bắt buộc phải lấy bằng một lệnh, chứ không phải nghĩ ra trong đầu agent: nếu không, nó sẽ lấy hậu tố từ ví dụ, và tất cả những ai đọc cùng bài viết này sẽ có cùng một hậu tố giống hệt nhau. Sau đó, hậu tố luôn được đọc từ config. Đây chính là lý do vì sao skill phải xem config đã có trước, rồi mới ghi thêm bất cứ gì.

Agent viết file cài đặt

Trong wrangler.jsonc, agent ghi tên dự án và các cài đặt đăng trang, để việc deploy chạy mà không cần hỏi gì trong terminal. Config nằm cạnh index.html, nên đường dẫn tới các file trong đó là một dấu chấm, nghĩa là "chính thư mục này":

{
  "name": "landing-42c2",
  "compatibility_date": "2026-09-07",
  "assets": { "directory": "." }
}

Trường compatibility_date chọn hành vi tương thích của nền tảng theo ngày được ghi. Với một config mới, agent đặt ngày hiện tại, theo khuyến nghị của tài liệu Cloudflare; khi đăng lại, nó giữ nguyên ngày cũ.

Đặt config ở cấp cao hơn, cạnh thư mục, không phải ý hay: tên file là cố định, trong một thư mục chỉ có thể có một file như vậy, và thư mục thứ hai sẽ hoặc ghi đè config của thư mục đầu, hoặc bị đăng dưới tên của thư mục đầu. Bên trong thư mục, mỗi dự án tự đứng độc lập, và deploy chạy thẳng từ đó.

Một tác dụng phụ của cách sắp xếp này: config nằm cùng thư mục với trang web, nên sẽ được đưa lên hosting cùng với nó và có thể mở được qua liên kết. Trong đó không có bí mật nào cả - chỉ có tên, ngày và một dấu chấm - và ai thấy phiền thì đặt thêm một file .assetsignore bên cạnh và liệt kê trong đó những gì không đăng lên.

Ba quy tắc nên nói rõ trong yêu cầu, nếu không agent sẽ không đoán ra:

• không có file - tạo mới, và cho biết đã ghi những gì;
• có file rồi - giữ nguyên tên và ngày như cũ, kể cả khi hôm nay là ngày khác;
• chỉ viết đè file khi nội dung thực sự thay đổi.

Bốn yêu cầu nên giữ sẵn bên mình

Yêu cầu đầu tiên chính là yêu cầu tạo skill. Nó dài hơn các yêu cầu còn lại, vì đây là lần duy nhất bạn mô tả toàn bộ quy trình:

Hãy dựng một skill để deploy các trang tĩnh lên Cloudflare Workers.
Đặt nó vào .claude/skills/ của dự án này.
Cuối cùng, hãy cho tôi xem đường dẫn tới SKILL.md vừa tạo và cách gọi skill một cách tường minh.

Trước tiên hãy đọc tài liệu hiện hành của Cloudflare về Workers
và static assets: các lệnh và trường trong config có thể đã thay đổi.
Nếu điều gì trong mô tả dưới đây khác với tài liệu - hãy nói cho tôi,
đừng âm thầm viết lại.

Trong mô tả của skill, liệt kê các cụm từ mà nó nên kích hoạt,
tối thiểu là: "đăng thư mục lên", "đăng lại", "deploy lên Cloudflare".

Quy trình: tôi lấy một thư mục, kiểm tra xem thư mục gốc có index.html không.
Tôi suy ra tên dự án từ tên thư mục đó: trong tên chỉ giữ lại
chữ cái Latin viết thường, chữ số và dấu gạch ngang, mọi thứ khác (khoảng trắng,
gạch dưới, chữ hoa, chữ có dấu, chữ không phải Latin) tôi đổi thành dấu gạch ngang.
Ở cuối, tôi thêm qua dấu gạch ngang một hậu tố gồm bốn ký tự.
Tôi không tự nghĩ ra hậu tố, mà lấy nó bằng lệnh:
node -e "console.log(crypto.randomUUID().slice(0,4))"
Config wrangler.jsonc nằm bên trong thư mục được đăng, cạnh
index.html, và assets.directory trong đó bằng ".".
Nếu không có config - tôi tạo nó: name, compatibility_date,
assets.directory. Với compatibility_date mới, tôi lấy ngày hiện tại
theo định dạng YYYY-MM-DD. Tôi cho biết đã ghi những gì.
Nếu đã có config - tôi lấy tên và ngày từ đó và không viết đè.
Tôi chỉ viết đè file khi nội dung thực sự thay đổi.
Nếu có config nhưng assets.directory trỏ đến nơi khác không phải thư mục này,
hoặc config có trường main - tôi dừng lại và nói ra, không chạy deploy.
Nếu được yêu cầu đăng lại mà trong thư mục không có config - tôi dừng lại
và hỏi, không tự tạo dự án mới.
Deploy: npx wrangler deploy từ thư mục dự án. Tôi hiển thị lệnh trước khi chạy.
Trong câu trả lời, tôi trả về địa chỉ công khai và nhắc kiểm tra
trang cùng hình ảnh theo địa chỉ đó. Khi cập nhật, địa chỉ phải giữ nguyên.
Nếu không có Node.js hoặc chưa đăng nhập - tôi nói ra điều đó,
chứ không cố tìm cách lách qua.
Nếu tài khoản chưa có subdomain workers.dev - tôi nói ra điều đó:
deploy không tương tác sẽ thất bại ở chỗ này.

Sau khi tạo xong, hãy mở file mà agent đã chỉ ra, .claude/skills/<tên>/SKILL.md: trong đó phải có các quy tắc ở trên. Trước yêu cầu thứ hai, hãy gọi tường minh skill vừa tạo theo cách agent đã chỉ ra. Nếu không tìm thấy skill, hãy nhờ kiểm tra đường dẫn và khả năng dùng được trong dự án hiện tại.

Yêu cầu thứ hai là kiểm tra trước khi làm. Hữu ích trước lần deploy đầu tiên của một thư mục, khi bạn muốn xem kế hoạch trước khi bất cứ thứ gì được đưa ra bên ngoài; nếu có nhiều thư mục, hãy đưa ra yêu cầu này cho từng thư mục:

Đừng tạo hay thay đổi file nào, đừng chạy wrangler. Chỉ cần cho tôi xem
bạn định làm gì với thư mục landing: tên dự án là gì,
config nào sẽ được ghi, lệnh nào sẽ được chạy.

Có một điểm cần lưu ý: hậu tố xuất hiện đúng vào lúc config được ghi, nên với một thư mục chưa có config, tên trong kế hoạch và tên ở lần chạy thật có thể không khớp nhau. Mọi thứ khác sẽ khớp.

Yêu cầu thứ ba và thứ tư là các yêu cầu làm việc thực sự, mục đích của tất cả những gì đã chuẩn bị ở trên:

Đăng thư mục landing lên Cloudflare Workers.

Tôi đã sửa index.html trong landing. Đăng lại lên Cloudflare Workers.

Sau lần đăng đầu tiên, hãy mở liên kết nhận được, kiểm tra văn bản và hình ảnh. Sau đó sửa một câu nổi bật trong landing/index.html và gửi yêu cầu thứ tư. Tải lại trang theo đúng địa chỉ cũ: câu mới phải xuất hiện. Nếu địa chỉ thay đổi, hãy nhờ agent kiểm tra lại tên trong config trước lần deploy tiếp theo.

Đến đây, lộ trình chính đã hoàn tất: skill đã được tạo, trang đã được đăng, việc cập nhật đã được kiểm tra qua cùng một liên kết. Trước mỗi lần đăng, việc còn lại chỉ là chọn đúng thư mục và xem lệnh mà agent đưa ra.

6. Các kịch bản mở rộng

Phần sau bạn có thể chưa cần đọc, cho đến khi có nhu cầu chuẩn bị nhiều thư mục cùng lúc hoặc chạy deploy mà không cần đăng nhập qua trình duyệt.

Khi quy trình thủ công không còn đủ

Skill dạng hướng dẫn hoạt động tốt khi số thư mục chỉ vài cái hoặc vài chục. Vượt qua mức đó, điều gây khó chịu là agent mỗi lần đều phải đọc lại quy trình và thực hiện thủ công: với năm mươi thư mục, việc này chậm và không phải lúc nào cũng giống nhau.

Đó là lúc bạn viết lại quy trình thành một script: nó tự duyệt qua các thư mục, ghi config, bỏ qua những thư mục không có gì thay đổi, và in ra một bảng tổng kết. Skill không hề biến mất - nó chỉ gọi script thay vì tự ghi config, còn việc chạy deploy vẫn do chính nó đảm nhận.

Việc viết script cũng không phải việc của bạn. Agent đã có sẵn một mô tả chi tiết về quy trình - chính là skill của bạn - nên yêu cầu trở nên ngắn gọn:

Hãy viết bằng Python một script làm đúng những gì được mô tả trong skill
deploy của tôi, chỉ khác là chạy luôn cho tất cả các thư mục trong dự án.

Lấy các thư mục có index.html ở thư mục gốc;
không xem xét bên trong node_modules, .git và dist.
Với mỗi thư mục, ghép tên theo quy tắc của chúng ta và ghi wrangler.jsonc
vào bên trong thư mục đó.
Nếu config đã có sẵn - lấy name và compatibility_date từ đó,
và chỉ viết đè file khi nội dung thực sự thay đổi.
Nếu config không đọc được - không đụng vào nó, báo cho biết
và bỏ qua thư mục đó.
Mặc định chỉ hiển thị kế hoạch và không ghi gì cả;
việc ghi thực sự chỉ xảy ra khi có cờ tường minh.
Cần một bộ lọc để chỉ chạy những thư mục được chọn.
Script chỉ chuẩn bị config, không chạy deploy.
Cuối cùng in ra một bảng: thư mục, tên dự án, đã làm gì.
Nếu điều gì trong mô tả này không rõ ràng - hãy hỏi, đừng tự đoán rồi làm.

Việc hiển thị kế hoạch cho phép kiểm tra danh sách thư mục trước khi ghi bất cứ gì. Việc giữ nguyên tên và ngày bảo vệ các config đã có khỏi những thay đổi ngoài ý muốn. Bản thân script chỉ chuẩn bị cài đặt; việc đăng trang vẫn do skill đảm nhận.

Token truy cập

Trên máy tính của bạn, bạn đã đăng nhập qua npx wrangler login. Wrangler lưu lại thông tin đăng nhập đó, và các lệnh của agent cũng dùng chung.

Nếu cần chạy tự động mà không đăng nhập qua trình duyệt, hoặc cần quyền hạn hẹp hơn, đó là lúc dùng API token. Bạn có thể tạo nó trong hồ sơ cá nhân: ảnh đại diện, hồ sơ, mục API token. Địa chỉ trực tiếp là dash.cloudflare.com/profile/api-tokens.

Biểu mẫu tạo token trông có vẻ đáng sợ: nhóm quyền, tài nguyên, một số bộ lọc. Thực ra chỉ có bốn quyết định cần đưa ra, và một nửa số trường bạn có thể bỏ qua hoàn toàn.

1. Tên token. Nửa năm sau bạn sẽ không nhớ nó dùng để làm gì, vậy nên hãy viết đúng trọng tâm: "deploy trang từ laptop", chứ không phải "token 2".
2. Quyền hạn. Không cần và cũng không nên gom quyền từng cái một. Trong danh sách các bộ quyền dựng sẵn có Edit Cloudflare Workers - trong đó đã gom đủ mọi thứ cần cho việc đăng trang.
3. Tài nguyên. Giới hạn token vào đúng một tài khoản, chính là nơi bạn đăng trang lên. Kể cả khi bạn chỉ có một tài khoản duy nhất, hãy chọn nó một cách tường minh: số tài khoản có thể tăng lên, còn token thì vẫn giữ nguyên.
4. Thời hạn hiệu lực và bộ lọc theo IP. Các trường không bắt buộc. Đặt thời hạn có ý nghĩa khi token chỉ cần dùng trong một buổi tối hoặc trên máy của người khác; trong công việc thông thường, cứ để nguyên như vậy.

Sau đó, đặt token vào biến môi trường CLOUDFLARE_API_TOKEN, còn tài khoản thì đặt vào CLOUDFLARE_ACCOUNT_ID. Biến môi trường là một cài đặt trên máy của bạn mà các chương trình tự đọc; wrangler sẽ tự tìm thấy cả hai mà không cần bạn can thiệp. Cách các biến này hoạt động và nên đặt ở đâu là một chủ đề riêng, ở đây chỉ cần biết đó là một nơi lưu trữ, chứ không phải một dòng chữ trong đoạn chat.