Sử dụng GitHub Page xem trước nội dung tĩnh HTML

Giả sử bạn có một vài tài liệu HTML tĩnh dạng như trang demo hoặc docs muốn publish lên internet cho mọi người có thể xem được nhưng lại không có hosting. Liệu có giải pháp miễn phí nào có thể làm được điều này không ? Câu trả lời là có và GitHub Page sẽ giúp bạn làm điều này

Nếu bạn đã đọc một số bài viết trước của tôi thì hoàn toàn có thể sử dụng dịch vụ bên thứ 3 để raw file HTML. Lấy ví dụ tôi dùng trang https://raw.githack.com/

Nội dung trang HTML có thể đọc ngon lành như khi ta chạy trên localhost. Tuy nhiên bất cập bạn có thể thấy rõ đó là : đây không phải là dịch vụ được cung cấp bởi GitHub và nó có thể sập bất cứ lúc nào.

Vì thế để khắc phục vấn đề này một bạn nam giấu tên đã tạo ra một tool gọi là "html preview github"

Tham khảo sources code tại: https://github.com/htmlpreview/htmlpreview.github.com và homepage tại git page cùng tên http://htmlpreview.github.io/

Ví dụ tôi có 1 file HTML đã upload lên repo với địa chỉ sau:

https://github.com/hoanghung96cs/blog/blob/master/unminify.html

Bây giờ để preview nó chỉ cần thêm đoạn mã in đậm vào trước url

http://htmlpreview.github.io/?https://github.com/hoanghung96cs/blog/blob/master/unminify.html

Rất đơn giản đúng không, cơ chế hoạt động của tool này đó là lấy các nội dung trong file HTML của bạn và tạo 1 iframe mới append chúng vào để hiển thị. Vì sử dụng GitHub page là một tính năng của GitHub nên trang của bạn chỉ ngủm khi GitHub bỏ git page hoặc GitHub đóng cửa thôi :)

Hạn chế duy nhất đó là Bandwidth của GitHub Page (băng thông tối đa 100GB/1 tháng chắc cũng đủ dùng rồi !)

Fix lỗi nhỏ và host về git page của bạn

Nếu test kĩ thì thấy code có một vài chỗ chưa tối ưu. Tôi lấy ví dụ

+ Khi gặp phải 1 url bị encode trang preview sẽ xuất ra lỗi sau

Error: Cannot load file https%3A%2F%2Fgithub.com%2Fhoanghung96cs%2Fblog%2Fblob%2Fmaster%2Funminify.html

=> Lại mất công decode uri

+ Thuộc tính location

Tool dùng location.search: lấy phần query string của URL (phần đằng sau dấu ?) làm git url nhưng ví dụ như tôi vô tình thêm 1 đoạn như sau http://htmlpreview.github.io/?https://github.com/hoanghung96cs/blog/blob/master/unminify.html&campaign=xxx cũng sẽ không load được file HTML

Cả 2 trường hợp trên sẽ nghiệm đúng khi bạn dán url lên facebook, người xem click vào sẽ ra lỗi sau (fbclid face mới thêm vào gần đây chắc là để quét vi dút 😀)

Error: Cannot load file https%3A%2F%2Fgithub.com%2Fhoanghung96cs%2Fblog%2Fblob%2Fmaster%2Funminify.html&fbclid=IwAR1pKSV23MXt1paBc3WX4t5BN67Nbwd8Q4zFnITt8KfoNlAVJEVw00DTAoc

Và để khắc phục điều đó tôi có sửa lại code js cho tối ưu hơn

Bạn tải file sau về, giải nén và upload lên thư mục root project github page của bạn (nếu chưa biết GitHub Page là gì thì xem bài viết này)

Khi đó trang homepage preview của bạn sẽ là

https://username.github.io/preview/

Và liên kết preview sẽ có dạng

https://username.github.io/preview/?git_url

Bạn có thể dán url lên facebook thoải mái mà không lo bị lỗi như trên nữa.

Nếu quá ngại làm những điều trên có thể truy cập trang tôi làm sẵn https://hung1001.github.io/preview/

Kết luận: như qua bài viết này tôi tin bạn đã có giải pháp hoàn hảo cho việc raw file HTML để có thể xem được nội dung như trên localhost rồi. Việc sử dụng github page để raw file nhìn cũng rất ngầu 😀

Để lại bình luận nếu bạn gặp khó khăn và chúc thành công