TỪ MÃ NGUỒN ĐẾN THƯ VIỆN CỦA BẠN

Đưa Hiểu và Thương lên
GitHub, Cloudflare và Supabase.

Thực hiện lần lượt các bước dưới đây. Bạn tự giữ tài khoản và mật khẩu; website chỉ cần Project URL và public key của Supabase.

V4: Trang tiếp theo, giao diện và thành viên

Chạy supabase/upgrade-pages-branding-members.sql sau bản Chương/Phẩm, rồi cập nhật thư mục dist trên GitHub. Giữ nguyên config.js và cấu hình Worker.

• Chọn “Viết tiếp nhiều trang · Chương/Phẩm tùy chọn” và “Không dùng Chương/Phẩm — viết theo trang”. Nhấn “+ Trang / phần mới” để tiếp tục; các trang trước vẫn được giữ.
• Tab “Giao diện & hình ảnh” cho phép thay ảnh trang chủ, logo và favicon bằng file hoặc URL, rồi lưu trực tuyến.
• Tab “Thành viên” hỗ trợ thêm, sửa tên/email/mật khẩu/vai trò và xóa tài khoản. Cần triển khai Edge Function manage-members và đặt ALLOWED_ORIGINS theo hướng dẫn trong HUONG-DAN-CAP-NHAT-V4.md của gói.

Để cài qua Supabase Dashboard, tạo hàm manage-members bằng nội dung supabase/functions/manage-members/dashboard.ts; đặt verify_jwt=false cho riêng hàm này vì mã xác minh người dùng trực tiếp qua Supabase Auth. Đặt ALLOWED_ORIGINS bằng origin của website. Khóa máy chủ chỉ ở Supabase, không đưa vào config.js.

Nâng cấp: Chương/Phẩm và soạn thảo có định dạng

1. Với website đang chạy: mở Supabase → SQL Editor, chạy toàn bộ supabase/upgrade-chapters.sql. Không cần chạy lại file cấp quyền; bài cũ được giữ nguyên.
2. Đưa các file trong thư mục dist của gói cập nhật vào đúng thư mục dist trên GitHub. Giữ file dist/config.js và cấu hình Worker/Cloudflare hiện tại của bạn; gói cập nhật không chứa config.js để tránh ghi đè kết nối.
3. Đợi Cloudflare triển khai mới rồi nhấn Ctrl + F5. Với website mới, chạy schema.sql rồi upgrade-chapters.sql trước khi dùng.

Cách viết từng phần

1. Chọn Kinh/Sách, nhập tên và ảnh bìa. Tại “Cách đăng nội dung”, chọn Theo từng Chương / Phẩm, rồi lưu thông tin chung. Không bắt buộc nhập toàn bộ nội dung ở bước này.
2. Ở khu vực Chương/Phẩm, chọn Chương hoặc Phẩm, số thứ tự, tên phần và nội dung.
3. Chọn Lưu bản nháp nếu chưa xong. Bản nháp lưu trong Supabase, chỉ quản trị viên đọc được. Hãy lưu trước khi đóng trang; đây không phải chế độ tự động lưu.
4. Khi hoàn thành, xác nhận quyền chia sẻ và chọn Lưu & công khai phần này. Phần này xuất hiện trong mục lục trang đọc.
5. Chọn + Chương / Phẩm mới để viết phần tiếp theo. Phần trước được lưu riêng và không bị thay thế. Khi quay lại, chọn Chỉnh sửa bộ Kinh/Sách rồi Viết tiếp phần muốn sửa.
6. Sửa một phần đã công khai rồi lưu nháp sẽ giữ nguyên bản người đọc đang thấy. Chỉ khi công khai bản sửa, người đọc mới thấy nội dung mới. Chọn Ẩn để gỡ khỏi mục lục nhưng giữ bản nháp; Xóa xóa cả bản nháp và bản công khai của phần đó.

Thanh công cụ hỗ trợ đậm, nghiêng, gạch chân, căn trái/giữa/phải, màu chữ, hoàn tác/làm lại và xóa định dạng. “Căn trái/giữa/phải” là căn đoạn văn, không phải thay lề giấy. Định dạng được giữ trong trang đọc. Nội dung cũ vẫn hiển thị và có thể chỉnh tiếp.

1. Giải nén bộ mã nguồn

Giải nén file ZIP đã tải. Trong thư mục dự án sẽ có dist, supabase và README.md. Không tải riêng file ZIP lên GitHub rồi dùng ZIP làm website.

2. Tạo dự án Supabase

1. Đăng nhập Supabase Dashboard, tạo project mới và lưu mật khẩu database của bạn.
2. Mở SQL Editor → New query. Mở file supabase/schema.sql trong bộ mã nguồn, copy toàn bộ nội dung vào SQL Editor và nhấn Run. Sau đó chạy supabase/upgrade-chapters.sql. File này cũng nâng cấp cơ sở dữ liệu của phiên bản cũ, giữ lại bài đã đăng.
3. Trong Authentication → Users, chọn thêm user và tạo tài khoản với email, mật khẩu của bạn. Xác nhận email của user; nếu có tùy chọn Auto Confirm User, bật khi tự tạo tài khoản quản trị.
4. Mở supabase/grant-admin.sql, thay YOUR_EMAIL_HERE bằng email vừa tạo, rồi chạy nội dung file trong SQL Editor. Đây là bước cấp quyền đăng/sửa/xóa; chỉ tạo user là chưa đủ.
5. Trong cài đặt Authentication, bật cho phép đăng ký user mới và tắt Confirm Email theo cấu hình V6. Khách vẫn không cần tài khoản để xem.
6. Mở phần API Keys của project, lấy publishable key (thường bắt đầu bằng sb_publishable_) hoặc legacy anon key. Lấy Project URL của cùng project.

SQL tạo 2 nơi lưu file: documents cho PDF, covers cho ảnh bìa. Cả hai là public để khách đọc được; chỉ quản trị viên được tải lên và xóa.

3. Điền cấu hình kết nối

Mở dist/config.js bằng VS Code hoặc trình sửa văn bản. Điền thông tin thật vào giữa dấu nháy:

window.APP_CONFIG = {
  supabaseUrl: 'https://PROJECT_REF.supabase.co',
  supabaseKey: 'sb_publishable_THAY_BANG_PUBLIC_KEY_CUA_BAN'
};

Public key được thiết kế để xuất hiện trong trình duyệt; quyền truy cập được giới hạn bởi RLS. Không đặt secret key, service_role key, mật khẩu tài khoản hoặc mật khẩu database vào mã nguồn. Với bản static này, chỉ thêm biến môi trường trên Cloudflare sẽ không tự sửa config.js; hãy chỉnh file và commit.

4. Tạo kho mã nguồn GitHub

1. Đăng nhập GitHub, chọn New repository, đặt tên hieu-va-thuong. Có thể chọn Private.
2. Khởi tạo README nếu cần để repo có nhánh main.
3. Chọn Add file → Upload files. Kéo các thư mục dist, supabase và file README.md bên trong dự án vào. Giữ nguyên cấu trúc thư mục, không tạo thêm một tầng thư mục bao ngoài.
4. Kiểm tra thấy đường dẫn dist/index.html, dist/admin.html, dist/fonts/… rồi chọn Commit changes. Thư mục font đi kèm giữ dấu tiếng Việt hiển thị đúng.

5. Kết nối Cloudflare Pages với GitHub

1. Đăng nhập Cloudflare. Vào Workers & Pages → Create application → Pages → Connect to Git (tên nút có thể thay đổi theo giao diện).
2. Kết nối GitHub và cho Cloudflare truy cập repository hieu-va-thuong. Chọn repository đó.
3. Điền cấu hình bên dưới và chọn Save and Deploy.

Khi thành công, Cloudflare trả về URL của website. Mở URL đó để xem thư viện. Để quản trị, thêm /admin.html sau tên miền. Ví dụ nếu URL là https://ten-du-an.pages.dev thì quản trị là https://ten-du-an.pages.dev/admin.html. Đây chỉ là ví dụ; dùng đúng URL Cloudflare trả về.

Nếu có tên miền riêng, vào dự án Pages → Custom domains và làm theo bước xác minh DNS được Cloudflare cung cấp.

6. Đăng Kinh, Sách và Video

1. Mở trang /admin.html, nhập email/mật khẩu đã tạo ở Supabase.
2. Chọn Kinh, Sách hoặc Video; nhập tiêu đề, tác giả/dịch giả/kênh, giới thiệu ngắn.
3. Chọn ảnh bìa JPG/PNG/WebP trên máy (tối đa 5 MB), hoặc nhập link HTTPS tới ảnh. Khung bên phải hiển thị ảnh xem trước. Ảnh được tải lên sẽ được tối ưu và lưu trong Supabase.
4. Với Kinh/Sách: nhập nội dung đọc, tải PDF tối đa 20 MB, hoặc cung cấp liên kết nguồn. Với Video: dán link YouTube/Vimeo hoặc trang nguồn khác. YouTube dạng thường, youtu.be và Shorts được nhận diện; nền tảng khác có thể chỉ mở liên kết ngoài.
5. Kiểm tra quyền chia sẻ, đánh dấu xác nhận và chọn Đăng nội dung.
6. Mở trang thư viện hoặc thiết bị khác để xác nhận nội dung và ảnh bìa hiển thị. Dùng Chỉnh sửa để cập nhật hoặc Xóa để gỡ bài và file đi kèm.

Đăng bài mới được lưu trực tiếp vào Supabase; không cần cập nhật GitHub hoặc triển khai lại Cloudflare cho mỗi bài. Thay đổi giao diện/mã nguồn thì commit lên GitHub để Cloudflare tự triển khai lại.

7. Kiểm tra lần đầu

• Khách không đăng nhập vẫn đọc được trang, PDF và ảnh bìa.
• Tài khoản chưa được cấp quyền quản trị không đăng/sửa/xóa được dữ liệu.
• Đăng thử một bài, tải lại trang, rồi mở bằng thiết bị khác để xác nhận lưu trực tuyến.
• Thử sửa bìa, đổi link video, xóa bài thử và kiểm tra Supabase Storage.
• Đăng xuất. Nếu tải lại trang quản trị, cần đăng nhập lại; phiên không được lưu lâu dài trên thiết bị.

Khi có vấn đề

Tài liệu chính thức

• Cloudflare Pages: Static HTML
• Cloudflare: Git integration
• Supabase: API Keys
• Supabase: phân quyền Storage

Bản mã nguồn đã có giao diện và API kết nối. Việc xác thực, lưu bài, tải/xóa file cần kiểm tra trên Supabase thật sau khi cấu hình. Bản xem trước ChatGPT và website Cloudflare là hai bản triển khai riêng; cập nhật một bản không tự cập nhật bản còn lại.