Logo Trần Văn Giỏi Trần Văn GiỏiAI Thực Chiến · Nhật ký xưởng ← Trang chính
🧭 Chuyện thật 100% — không tô hồng

Nhật ký xây web bằng Claude Code —
từ 1 file HTML đến cả kho tàng

Tôi không phải lập trình viên. Website bạn đang đọc — 31 trang, chatbot riêng, kho skill, kho workflow, tự deploy — được xây bằng cách ra lệnh tiếng Việt cho Claude Code, chạy trên hạ tầng 0 đồng. Đây là nhật ký 7 chương: mỗi chương một cú vấp thật và thứ bạn copy được.

30trang HTML
82skill Claude tải ngay
0đchi phí hạ tầng/tháng
96/100điểm audit gần nhất
Đọc trước 30 giây

Vì sao tôi kể chuyện này?

Vì lúc bắt đầu, tôi ước có ai kể cho mình nghe những cú vấp này trước. Mỗi chương dưới đây theo đúng một khung: bối cảnh → vấn đề thật → cách giải → bài học bạn mang về được. Không cần đọc theo thứ tự — nhưng chương 6 thì đừng bỏ qua.

Chương 1 Khởi đầu

Một file HTML và một con bot 0 đồng

Nhu cầu ban đầu bé xíu: một trang giới thiệu khoá học AI nội bộ, kèm chỗ cho học viên hỏi đáp. Tôi mô tả bằng tiếng Việt, Claude Code viết file index.html đầu tiên. Phần "não" chatbot thì không thuê server nào cả — dùng Google Apps Script làm backend miễn phí: nhận câu hỏi, đọc kho kiến thức, trả lời.

Vấn đề thậtMuốn chatbot chỉ trả lời trong phạm vi bài giảng — không chém gió lung tung ngoài lề.
Cách giảiToàn bộ "luật" nằm trong 2 hàm: KNOWLEDGE_BASE (kho kiến thức) + SYSTEM_PROMPT (bản luật: chỉ đáp trong kho, ngoài phạm vi thì mời liên hệ). Sau này nguyên tắc đó thành hẳn trang Tự tạo chatbot dạy lại cho mọi người.
🎒 Bài học: đừng đợi "đủ đồ" mới bắt đầu. Một trang + một bot đủ dùng, ra mắt tuần đầu — mọi thứ hoành tráng về sau đều mọc từ cái mầm xấu xí này.
Chương 2 Tháng đầu

Từ 1 trang nở thành hệ trang — và bài toán trật tự

Nội dung phình nhanh: trang cho người mới, kho mã lệnh, quà tặng, khảo sát… Mỗi trang một kiểu là con đường ngắn nhất đến một website luộm thuộm.

Vấn đề thậtLàm sao 31 trang vẫn nhìn ra "một nhà" — và thêm trang mới không phải sửa tay 30 chỗ menu?
Cách giảiĐặt quy ước trước khi đặt gạch: mỗi trang một màu accent riêng nhưng chung khung (font chữ, topbar, hero tối + sao, thẻ trắng bo góc); menu là một khối dữ liệu dùng chung nhúng vào mọi trang — thêm trang mới chỉ sửa 1 danh sách rồi chạy script đồng bộ cho cả site.
🎒 Bài học: với AI, thứ đắt nhất không phải code — là quy ước. Chốt quy ước sớm, về sau chỉ cần nói "làm trang mới theo chuẩn cũ" là Claude tự hiểu.
Chương 3 Khi có người lạ ghé

Mở cửa cho máy đọc — SEO thời AI

Website không chỉ cho người đọc. Google đọc. Và giờ ChatGPT, Claude, Perplexity cũng đọc rồi trích dẫn. Muốn được nhắc tên, phải bày cỗ đúng kiểu của máy.

Vấn đề thậtChia sẻ link lên Zalo/Facebook hiện ô xám xịt không ảnh không mô tả; hỏi AI về nội dung web thì AI không biết gì.
Cách giảiGói "SEO-META" chuẩn cho mọi trang: thẻ OG (share đẹp), JSON-LD (máy hiểu trang nói về gì), canonical, sitemap.xml + robots.txt mở cửa cho GPTBot/ClaudeBot, và llms.txt — bản "mục lục cho AI đọc" ít người làm.
🎒 Bài học: viết cho người, gắn thẻ cho máy. Một buổi tối làm SEO-META một lần cho cả site — lãi dài hạn không tưởng.
Chương 4 Ngày chia tay kéo-thả

Git + Cloudflare — sửa chữ xong, 60 giây sau cả thế giới thấy

Thuở đầu mỗi lần sửa web là nén zip, mở Cloudflare, kéo-thả, chờ, F5. Ngày nào sửa 5 lần là biết mùi. Rồi tôi nối GitHub với Cloudflare Pages: git push — web tự lên sóng.

Vấn đề thậtPush xong mở web vẫn thấy bản cũ — tưởng deploy hỏng, suýt làm lại từ đầu. Hoá ra là cache: máy chủ biên giữ bản cũ vài phút, trình duyệt cũng giữ.
Cách giảiBình tĩnh chờ deploy chạy xong + mở tab ẩn danh hoặc Ctrl+F5 để xem bản mới thật. Quy trình chuẩn từ đó: sửa → push → chờ 60 giây → kiểm tra tab ẩn danh.
🎒 Bài học: hạ tầng tự động không chỉ tiết kiệm thời gian — nó làm bạn dám sửa. Khi việc đưa thay đổi lên chỉ tốn 1 lệnh, bạn cải tiến web mỗi ngày thay vì "để dành cuối tháng làm thể".
Chương 5 Đêm soi kính lúp

Cái nút 44 pixel — audit như dân chuyên

Web đẹp trên máy tính không có nghĩa dễ dùng trên điện thoại — nơi 80% người xem thật đang đứng. Tôi cho Claude đóng vai auditor quét cả site như bên thứ ba khó tính.

Vấn đề thậtAudit phát hiện gần 500 nút bấm nhỏ hơn chuẩn ngón tay (44px) — người dùng điện thoại bấm trượt liên tục mà mình không hề biết; một trang còn tràn ngang màn hình.
Cách giảiMột khối CSS chuẩn "tap target 44px" tiêm vào toàn bộ trang, chỉ kích hoạt trên màn cảm ứng — desktop giữ nguyên; đo lại tự động từng trang xác nhận 0 nút nhỏ, 0 tràn ngang.
🎒 Bài học: cảm giác "web này xịn" đến từ những chuẩn nhỏ vô hình. Và: đừng tự tin, hãy đo — audit tự động rẻ hơn một người dùng bực mình bỏ đi.
Chương 6 Đêm đáng nhớ nhất

3.200 chiếc chìa khoá bị bỏ quên trong file

Khi làm Kho 92 Workflow n8n, tôi định "úp thẳng" file JSON lên cho mọi người tải. May mà soát trước khi đăng.

Vấn đề thậtBên trong các file có hơn 3.200 thông tin nhạy cảm còn sống: token Facebook Page (ai cầm là điều khiển được fanpage), key OpenAI/Google (ai xài mình trả tiền), email, số điện thoại. File workflow chia sẻ trên mạng dính bệnh này rất nhiều — người tải về không biết mình đang cầm chìa khoá nhà người khác.
Cách giảiViết công cụ "khử trùng" tự động: quét mọi mẫu key/token/email/SĐT, thay bằng placeholder <<DÁN_KEY_CỦA_BẠN>>, rồi quét xác nhận lượt 2 bằng bộ mẫu khác — 0 sót mới cho lên sóng. File gốc bị chặn vĩnh viễn khỏi Git.
🎒 Bài học (xin khắc cốt): ① key luôn để trong mục Credentials, không bao giờ dán thẳng vào node/code; ② trước khi chia sẻ bất kỳ file gì, Ctrl+F tìm eyJ, sk-, EAA, AIza; ③ nghi lộ là thu hồi tạo key mới — key là đồ xoay, không phải đồ giữ.
Chương 7 Vòng lặp hiện tại

Thủ thư biết nói — giữ chatbot luôn thuộc bài

Website giờ như thư viện 30 phòng. Người mới lạc là chuyện thường — nên chatbot được nâng vai thành thủ thư: hỏi gì cũng biết kho có gì, nằm trang nào.

Vấn đề thậtMỗi lần thêm trang mới, chatbot… không hề biết trang đó tồn tại — nó chỉ thuộc những gì có trong kho kiến thức của nó.
Cách giảiThành luật vận hành: thêm trang = thêm mục kiến thức cho bot, trong cùng một lần làm. Mô tả trang, ai nên hỏi gì thì chỉ tới đó — rồi deploy lại "não". Website và bot luôn thuộc bài như nhau.
🎒 Bài học: tài liệu chết là tài liệu viết một lần. Tài liệu sống là tài liệu đi kèm quy trình cập nhật — áp dụng cho chatbot, cho wiki công ty, cho mọi thứ.
Đồ nghề toàn bộ hành trình

Stack 0 đồng/tháng — đúng nghĩa đen

🟣Claude Code

Thợ chính: viết trang, sửa lỗi, audit, đồng bộ menu — nhận lệnh tiếng Việt.

gói Claude có sẵn
☁️Cloudflare Pages

Nhà ở của web: hosting nhanh toàn cầu + tự deploy khi push, kèm analytics.

0 đồng
🐙GitHub

Két giữ code: mọi phiên bản được lưu, lỡ tay có đường lùi.

0 đồng
📜Google Apps Script

Não chatbot + phát tài khoản + nhận khảo sát — backend không cần server.

0 đồng

Không framework, không database, không thuê VPS. HTML thuần + 4 dịch vụ miễn phí — cho một hệ 31 trang phục vụ cả trăm người dùng thật.

Đến lượt bạn

Checklist 10 bước — tự xây phiên bản của bạn

1

Chốt 1 mục đích + 1 người dùng cụ thể. "Web tài liệu cho đội của tôi" tốt hơn "web về AI".

2

Bảo Claude Code dựng 1 trang duy nhất — mô tả bằng tiếng Việt: nội dung, tông màu, cảm giác muốn có.

3

Tạo tài khoản GitHub + Cloudflare Pages, nối 2 cái lại. Từ nay sửa xong chỉ cần push.

4

Chốt quy ước thiết kế (font, khung trang, cách đặt màu) ngay khi có trang thứ 2 — nhờ Claude viết thành 1 đoạn "chuẩn nhà".

5

Cần hỏi–đáp? Dựng bot Apps Script theo công thức 3 phần ở trang Tự tạo chatbot.

6

Làm gói SEO-META 1 lần cho cả site: OG + JSON-LD + sitemap + robots + llms.txt.

7

Mỗi tháng 1 lần, cho Claude đóng vai auditor: mobile, tốc độ, link hỏng, nút nhỏ — sửa theo danh sách nó trả.

8

Chia sẻ file gì cũng khử trùng trước — tìm eyJ, sk-, EAA, AIza như Chương 6.

9

Thêm trang mới = dạy lại chatbot + cập nhật sitemap trong cùng một lần làm — đừng để nợ.

10

Kể lại hành trình của bạn — như trang này. Dạy lại là cách học sâu nhất, và là content không ai bắt chước được.

Nếu tôi làm được, bạn làm được

Toàn bộ kỹ năng trong nhật ký này đều có trang dạy lại trên web — từ dùng Claude cho người mới đến tự động hoá n8n. Chọn cửa mà vào:

🚀 Claude cho người mới 🤖 Tự tạo chatbot ⚙️ Học n8n từ số 0
Khám phá nhanh