Jekyll ,Hugo ,Hexo và Gatsby
Xin chào các bạn ,Static Site (web tĩnh) ngày càng được sử dụng rộng rãi kể cả web của mình đây cũng là một trang web tĩnh không hề có database , server rendering,… Vì sự phổ biến rộng rãi như vậy nên hôm nay mình sẽ giới thiệu, so sánh bốn framework nổi tiếng nhất để xây dựng một trang web tĩnh đồng thời sẽ đưa ra giải pháp ai nên dùng framework nào. Bắt đầu thôi 🤘
Những gì mình nói ở đây là theo kiến thức hạn hẹp và là theo ý kiến cá nhân của mình nên có sai sót mong được mọi người hướng dẫn để mình bổ sung kiến thức của mình.
Jekyll — blog-aware static site generator in Ruby
Bắt đầu với bài viết đó là Jekyll một framework rất được ưu ái bởi Github. Như chỉ mục có thể biết Jekyll viết bằng ngôn ngữ Ruby và tất nhiên Jekyll thể hiện sự ưu ái rõ ràng khi mà trong trang chủ của Jekyll còn ghi câu dưới
GitHub Pages are powered by Jekyll
Theo như triết lý được Jekyll đề cập đến là giúp người đọc tập trung vào nội đung mà tác giả hướng đến.
Để khẳng định độ HOT của Jekyll đây là những cái tên đã dùng Jekyll cho trang web của mình Spotify for Developers ,Twitch Developer Documentation ,Netflix Devices ,Sketch App ,…
Toàn những tên tuổi có tiếng đã tin tưởng là lựa chọn Jekyll cho trang web của họ. Các bạn có thể xem thêm ở đây : Jekyll Showcase.
Để tùy biến được Jekyll thì bạn phải có kiển thức về HTML, CSS và JS hoặc không nếu bạn chỉ cần tập trung vào việc viết bài thì dưới đây là kho giao diện đồ sộ của Jekyll.
Ưu điểm :
- Được tích hợp với Github Page
- Lượng theme đồ sộ
- Mã nguồn mở với hơn 38k sao ở trên Github
- Lượng Plugin rất rất lớn và có hệ sinh thái rất tốt
Nhược điểm :
- Thời gian build của trang web sẽ càng chậm nếu nội dung ngày càng nhiều đặc điểm của Ruby
- Thời gian build không thực sự nhanh
- Phân trang vẫn chưa hỗ trợ dù rằng đã là Jekyll 3
Hugo — The world’s fastest framework for building websites
Nếu như nhược điểm của Jekyll là chậm khi nội dung của trang web bạn ngày càng nhiều thì đây Hugo sẽ giải quyết bài toàn đó. Được xây dựng ngôn bằng ngôn ngữ lập trình Go ,Hugo nhanh chóng trở thành một trong những Framework cho static web nổi tiếng nhất bởi tốc bộ build website và sự linh hoạt
Vì được xây dựng trên nền tảng Go ,Hugo đã tận dụng tốt được các Template Engines của Go vốn rất là đa dạng và dễ dàng tùy biến hơn rất nhiều .Dù trang web của bạn nhỏ ,lớn ,đơn giản hay phức tạp đều có thể xử lý được hết.
Tuy không được dùng rộng rãi như Jekyll nhưng Hugo cũng tỏ ra không kém cạnh khi được các ông lớn sử dụng như 1Password Support ,Let’s Encrypt ,…
Các bạn có thể xem thêm ở đây : Hugo Showcase
Dù vậy kho giao diện lại không phải là điểm mạnh của Hugo chỉ với hơn 300 giao điện có sẵn và trừ khi bạn là một người rành về Go thì chuyện này không phải là vấn đề.
Đây là một số giao diện có sẵn : Hugo Themes
À trang 12bit.vn cũng dùng Hugo đấy đó là một trang mà mọi người có thể chia sẻ ,học hỏi kiến thức về công nghệ thông tin ,lập trình ,…
Hugo có thể build một blog có 5000 trang trong vòng 6 giây
Ưu điểm
- Tốc độ build là như tốc độ của Flash
- Cộng động hỗ trợ mạnh mẽ
- Mã nguồn mở với hơn 37k sao ở trên Github
- Có sẵn Livereload
Nhược điểm
- Bạn phải là một người có kiến thức căn bản về Go để sử dụng được
- Hugo không có giao diện mặc định
- Không có nhiều tiện ích nếu muốn bạn phải tự code
Hexo – A fast, simple & powerful blog framework
Nếu như Hugo được xây dựng bằng ngôn ngữ Go cực kỳ HOT thì người bạn Hexo đây lại được xây dựng trên ngôn ngữ Nodejs ,một ngôn ngữ được sử dụng nhiều nhất trong năm 2018. Vì vậy Hexo được sử dụng rất nhiều bởi vì sự đơn giản và mạnh mẽ mà nó đem lại cho người dùng.
Vì Nodejs là ngôn ngữ nền tảng đã tạo nên anh bạn hexo đây nên npm hay yarn đều có thể sử dụng được để thêm các dependencies không chỉ vậy việc deploy còn cực kỳ đơn giản khi được hỗ trợ như Gihub Page , Heroku ,Netlify ,Netlify ,FTPSync ,… và tất cả cấu hình có thể tìm thấy ở đây .
Về template engine bạn có thể sử dụng Jade, EJS ,… nhưng phổ biến nhất là Swig còn nếu bạn muốn dùng các template engine khác thì hoặc bạn phải tìm plugin để hexo có thể render hoặc bạn phải tự code một plugin để xử lý việc đó.
Giao diện và plugins là điểm mạnh của Hexo khi mà đa số đều là mã nguồn mở và rất rất nhiều để cho bạn tùy biến. Sự tùy biến còn được nâng cao khi Hexo còn cung cấp cho một API để bạn có thể tùy biến website của bạn theo cách bạn muốn.
Trang web của mình cũng xây dựng trên Hexo nè 😁
Ưu điểm
- Nhanh tất nhiên là không nhanh hơn Hugo
- Rất nhiều tool ,theme và plugin mạnh mẽ hỗ trợ
- Dễ dàng tích hợp với JS
- Dễ dàng deploy và quản lý các dependencies qua Yarn và Npm
Nhược điểm
- Tuy có một cộng đồng hỗ trợ mạnh mẽ nhưng đa số cộng đồng lại là người Trung quốc nên khi dùng Plugin hay tùy biến Theme sẽ hơi khó khăn cho những người dùng không phải là người Trung Quốc.
GatsbyJS — Fast in every way that matters
Nếu bạn là một người thích React thì đây là lại là lựa chọn sáng suốt nhất GatsbyJS sử dụng nguồn dữ liệu có thể là từ CMSs ,Markdown ,Json ,APIs,… và kết hợp bởi GraphQL ,HTML ,CSS ,React để tạo ra một trang web tĩnh hoàn hảo. Hiệu năng và tốc độ cũng là điểm cộng.
Vì là xử lý nhờ GraphQL và React nên nếu bạn cần xử lý logic phức tạp thì GatsbyJS vẫn sẽ đáp ứng được nhu cầu của bạn.
Dù là sinh sau đẻ muộn nhưng GatsbyJS vẫn được tin dùng bởi nhiều trang web của cách hãng công nghệ lớn như : ReactJS , Airbnb Engineering & Data Science , Nike - Just Do It , …
Các bạn có thể xem hết Showcase của GatsbyJS.
Mặc định Gatsby cũng sở hữu một lượng khổng lồ tới 1160 plugins quá đủ cho một trang web tĩnh. Giao diện cho Gatsby vì mới ra mắt từ năm 2017 nên kho giao diện vẫn chưa nhiều các bạn có thể xem ở đây.
Trang web của công ty mình cũng được xây dựng trên nền tảng Gatsbyjs Innoteq Vietnam
Ưu điểm
- Dễ dàng tích hợp với nhiều CMS đã có sẵn.
- Thân thiện với các công cụ tìm kiếm.
- Công nghệ HOT TREND.
Nhược điểm
- Bạn phải là một người có kiến thức về React hoặc GraphQL thì mới dùng được.
Kết Luận ✍
Ok bây giờ sẽ là đúc kết từ những gì đã nói ở trên để xem Framework nào phù hợp với bạn
Framework này sẽ phù hợp với những ai đã quen thuộc với cách dùng git và markdown.
Phù hợp với những ai rành về ngôn ngữ Go ,ưu tiên về tốc độ ,sự ổn định cũng như là bảo mật tính riêng tư.
Phù hợp với những ai chỉ cần viết Blog không quá giỏi về lập trình và thích nhiều lựa chọn trong tùy biến và giao diện
Chỉ nên sử dụng nếu bạn biết React ,GraphQL hoặc là nếu bạn muốn học thêm về React hoặc GraphQL thì GatsbyJS sẽ là lựa chọn đúng đắn vì rất đơn giản
Cảm ơn các bạn đã dành thời gian đọc bài viết này của mình các bạn sẽ lựa chọn framework nào hãy bình luận bên dưới để cùng nhau thảo luận nhé.