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.
---
title: Most site generators use YAML
foo: bar
qux: quux
---
Your content goes here...
+++
title = "But Zola only lets you use TOML"
foo = "bar"
qux = "quux"
+++
Your content goes here...
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