🚀 Personal HTML Dashboard Pipeline

Học cách xây dựng hệ thống xuất bản tự động, bảo mật và chuyên nghiệp trên nền tảng AWS.

🧩

Tại sao bạn cần một Pipeline?

Vấn đề "Thủ công"

Bạn viết xong 1 Dashboard học tập, sau đó mở AWS Console, tìm Bucket S3, rồi bấm Upload. Làm 1 lần thì được, làm 100 lần là thảm họa. Bạn sẽ quên config, quên Metadata, và tốn thời gian vô ích.

Giải pháp "Pipeline"

Chỉ cần git push hoặc chạy 1 lệnh script duy nhất. Hệ thống tự động kiểm tra code, dọn dẹp (sanitize), upload, và cập nhật CloudFront Cache. Bạn chỉ việc tập trung vào việc học!

📊

So sánh các phương án Hosting

Phương pháp Ưu điểm Nhược điểm Phù hợp khi nào?
Local Script → S3 Nhanh, dễ setup ban đầu. Dễ lộ Access Key, khó quản lý version. Thử nghiệm cực nhanh.
GitHub → Actions → S3 Tự động 100%, bảo mật cao, có CI/CD. Cần biết dùng Git cơ bản. Gold Standard - Khuyên dùng.
S3 + CloudFront Tốc độ cao, hỗ trợ HTTPS, bảo mật OAC. Phức tạp hơn 1 chút về cấu hình. Khi bạn muốn link dashboard trông chuyên nghiệp.
GitHub Pages Free hoàn toàn, cực nhanh. Hạn chế tính năng private (nếu không trả phí). Public Docs đơn giản.
🔄

Flow Diagram: The Professional Way

1

Local Workspace
Viết HTML & CSS

2

GitHub Repo
Quản lý version

3

GitHub Actions
Sanitize & Deploy

4

AWS S3
Static Hosting

5

CloudFront
Content Delivery

🛠️

Xử lý nội dung (Sanitization & Metadata)

⚠️ Sanitize HTML

Trước khi upload, hãy đảm bảo HTML của bạn không chứa các script độc hại hoặc các thẻ rác. Nếu bạn dùng script tự động để generate HTML từ Markdown, hãy dùng thư viện như DOMPurify hoặc regex đơn giản để dọn dẹp.

Mentor Note: Đừng bao giờ tin tưởng input của chính mình trong tương lai. Luôn sanitize!

🏷️ Lưu Metadata

Đừng chỉ lưu file. Hãy tận dụng S3 User Metadata để lưu thông tin sau:

  • x-amz-meta-topic: Chủ đề (Networking, AWS...)
  • x-amz-meta-tags: Tags phân loại
  • Content-Type: text/html (Bắt buộc!)
📂

Cấu trúc thư mục & Link bền vững

Cấu trúc gợi ý

/learning-dashboards
  /aws
    - s3-deep-dive.html
    - iam-policies.html
  /networking
    - tcp-ip-visualizer.html
  /metadata.json (Tổng hợp index)

Permanent Link Strategy

Tránh dùng /v1/page.html. Hãy dùng cấu trúc:
domain.com/dashboards/{category}/{slug}

Nếu dùng S3, bạn có thể tạo Folder ảo để URL trông đẹp hơn và không bị hỏng khi bạn cập nhật file mới.

🛡️

Security & Recommended Design

Recommended Design

  • Single Page: Giữ mọi thứ trong 1 file (như file này) để dễ deploy.
  • Tailwind/CSS-in-JS: Tránh phụ thuộc file CSS bên ngoài nếu không cần.
  • Offline First: Thiết kế để có thể mở trực tiếp từ máy tính vẫn chạy tốt.

Security Best Practices

  • No Public Buckets: Dùng CloudFront Origin Access Control (OAC) để khóa S3 lại.
  • Least Privilege: GitHub Actions chỉ được quyền s3:PutObject, không được xóa bucket.
  • WAF: Nếu cần, thêm Web Application Firewall để chặn bot.
🤖

What to Automate Next?

Nếu bạn đã master việc upload, đây là level tiếp theo:

  1. Automatic Index Generation: Một script chạy mỗi khi deploy để tạo ra trang index.html liệt kê tất cả dashboards hiện có dựa trên metadata.
  2. Search Integration: Dùng Algolia hoặc một file JSON search đơn giản để tìm kiếm bài học nhanh hơn.
  3. Screenshot Bot: Tự động chụp ảnh preview của dashboard để hiển thị ở trang chủ.
📚

Quick Recap & Glossary

  • S3 là nơi chứa file (The Storage).
  • CloudFront là nơi phân phối (The Delivery).
  • GitHub Actions là công nhân bốc vác (The Worker).
  • Metadata là nhãn dán trên mỗi thùng hàng (The Tags).

"Tự động hóa không chỉ giúp bạn rảnh tay, nó giúp bạn không sai sót."

Static Website Hosting
Tính năng của S3 cho phép truy cập file HTML như một trang web.
Bucket Policy
Luật lệ quy định ai được phép xem/sửa file trong S3.
Deployment Pipeline
Chuỗi các bước tự động từ lúc viết code đến lúc code chạy trên server.
Versioning
Lưu lại các bản cũ của file để phòng trường hợp bạn lỡ tay xóa nhầm.