644 lượt xem | 4 bài đăng

Đầu tiên giới thiệu tí về web tĩnh (static site): web tĩnh là 1 trâng web chỉ có HTML, CSS, JS, ảnh. Không động, không có database, không đăng nhập đăng ký gì cả.

Trình tạo web tĩnh (Static site generator) làm tất cả các trang, bài viết của bạn sẽ được xuất ra dưới dạng trang tĩnh HTML.

Web tĩnh phù hợp để tạo blog cá nhân và trang bán hàng.


Xin phép kể về hành trình dùng web tĩnh của Dai

Bàn về web tĩnh nổi tiếng nhất chắc là Jekyll, trước đây Dai có mở 1 diễn đàn về Jekyll nhưng vào toàn hỏi wap4 nên dẹp cmn luôn.

Jekyll lâu đời được hỗ trợ chính thức từ Github Pages - 1 hosting miễn phí cho nội dung tĩnh của Github (vì ông tạo Jekyll là đồng sáng lập của Github).

Jekyll từ Ruby dùng Liquid một templating language, khá giống twig, ae nào biết twig thì việc xây dựng jekyll khá dễ dàng.

Nhưng sao khi dùng Jekyll 1 một thời gian thì vấn đề nó lồi ra:

- Github Pages không dùng được plugin, Dai muốn thêm plugin để có trang categories, tags nên muốn dùng chuyển hosting sang netfliy vậy~~
- Plugin khó cài
- Tốc độ build cực SIDA, build là quá trình tạo các ra file tĩnh HTML từ temple Jekyll. Mỗi lần build Jekyll là 2 phút hơn chậm vcl - đây là lý do chính Dai muốn đổi sang SSG khác

Sau đó mình tìm được Gatsby JS một SSG từ Javascript React. Cũng khá hay nhưng vấn đề với Dai:

- Sửa giao diện khó vcl, CSS inline JS? Dừ dụng các js khác như Jquery - cài plugin, sử trong giới hạn của react?
- Tỷ lệ gặp lỗi khá cao
- Time build cũng chậm vcl, chậm hơn cả Jekyll

Từ đó cạch SSG từ javascript

Dai muốn 1 SSG time build nhanh hơn, well Dai tìm được Hugo, SSG nổi tiếng thứ 2 sau Jekyll. Sử dụng ngôn ngữ GO giúp tạo web tĩnh nhanh chóng.

Nhưng cái cấu trúc của nó khó hiểu vcl, Dai muốn tạo 1 cái giao diện của riêng mình. Có lẽ Dai không là người duy nhất. Một số bình luận về Hugo trên Hacker News, google dịch:

> “Nếu ai đó đang cân nhắc sử dụng Hugo, vui lòng chuẩn bị hàng chục giờ bạn sẽ dành để d ebug cho sự kỳ lạ và ma thuật của nó.” - shubhamjain

> “Hugo đã trở nên rất khó hiểu vì nó ngày càng trở nên mạnh mẽ hơn. Chúng đang di chuyển quá nhanh và mọi người đang làm những điều điên rồ với nó ngay bây giờ! Là người duy trì một chủ đề Hugo đơn giản và một vài blog đơn giản, tôi khó có thể theo kịp ”. - aorth

> "Thật là một nỗi đau khi thực hiện bất cứ điều gì đi chệch khỏi con đường vàng được hiển thị trong tài liệu." - gima

Tại sao chả có cái nào vừa build nhanh vừa dễ dùng thế?

Và rồi Dai tìm được Zola Rust từ bài viết này https://css-tricks.com/comparing-static-site-generator-build-times/

Lý do của ông tác giả tạo cái Zola này do dùng Hugo là ổng phát điên lên, nên ổng tự làm một cái SSG luôn =)))

Hugo nhận được sự ủng hộ của công cụ mẫu bởi vì mặc dù nó có lẽ là công cụ mẫu mạnh mẽ nhất trong danh sách (sau Jinja2) nhưng cá nhân nó khiến tôi phát điên, đến mức phải viết công cụ mẫu và trình tạo trang web tĩnh của riêng tôi. Vâng, điều này là một chút thành kiến.

Tốc độ nhanh, thua Hugo 1 chút nhưng nhanh, 20s cho 50 bài viết thay vì 3ph như Jekyll

Zola dùng Tera template engine, giống với Jinja2, Django templates, Liquid, Twig

Nên việc chuyển qua từ Jekyll cũng khá nhanh.

Nó dùng TOML thay vì YAML như Jekyll, Gatsby nhưng cũng khá dễ để chuyển qua.








Zola có sẵn tính năng tạo categories, tags và cũng loại dễ dàng.

Nó có sẵn search, như cá nhân Dai thấy lấy search của jekyll sang nhanh hơn

Zola có thể dùng Github Pages, Firebase Hosting qua Github Action, Vercel, netlify, Cloudflare Pages.

Dùng Vercel là nhanh nhất > Netlify, build dưới 1 phút

Github Pages>Cloudflare Pages>Firebase

Thành quả: https://txebook.web.app/

Xây dựng từ https://github.com/getzola/even

Dành cho ae nào chưa biết, liquid, twig, nunjucks hay các template language/engine khác có syntax tương tự đều dựa theo Python Django

Cá nhân t thì chưa có nhu cầu lập website cho riêng mình (thặt ra nà t méo có gì để viết, để show LMAO)

Tuy nhiên vì hứng thú, t cũng đã tự viết 1 framework cho riêng mình

Framework của t dùng page.js làm client side router (à, dĩ nhiên là SPA - single page app), template tương tự twig, compile và render bằng nunjucks, build bằng browserify, những thứ lặt vặt như data, model này nọ sẽ tính toán sau

Build time rất nhanh vì là dạng SPA, dự kiến t sẽ public dự án lên github vào sau tết, hy vọng, dù chỉ xem cho vui, thì ae cũng sẽ ngó tới

Kệ Dai