10 Công Cụ Static Site Generator Cho Website

10 Công Cụ Static Site Generator Cho Website


Ngày 9 Tháng 12 Năm 2021

Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi tìm hiểu static generator là gì và các framewwork giúp bạn xây dựng SSG cho website nha.

Static Site Generator(SSG)

Nó là một công cụ tạo các trang web tĩnh HTML mà không cần phải dựa vào cơ sở dữ liệu, nguồn dữ liệu bên ngoài và không phải xử lý server side. Nó được xem là giải pháp thay thế cho các hệ thống quản lý nội dung (CMS) hiện nay. Một số điểm mạnh của nó là Không cần quản lý phía máy chủ cơ sở dữ liệu, tốc độ tải trang nhanh hơn, có thể tạo nhiều templates cho website...

Nextjs

Next.js là framework cho React được tạo bởi Vercel. Nó là mã nguồn mở được xây dựng dựa trên Node.js, Babel và tích hợp với React để phát triển các single page application, các trang web tĩnh hay các trang được hiển thị từ phía máy chủ. Một số điểm mạnh của nó là Automatic Static Optimization, cải thiện trải nghiệm người dùng, có mức độ bảo mật cao, thời gian load trang ngắn, hỗ trợ Typescript...
Sử dụng ngôn ngữ javascript vơi template React.
Điểm yếu của nó là chưa cung cấp trình quản lý trạng thái. Nếu bạn muốn sử dụng state manager thì phải tích hợp redux, mobx...

Nextjs

Nguồn

Gatsbyjs

Gatsby cho phép chúng ta phát triển xây dựng các trang web an toàn và mạnh mẽ bằng cách sử dụng framework trên React giúp tích hợp nội dung, API và các dịch vụ khác vào website một cách nhanh chóng đơn giản. Để tăng hiệu suất, GatsbyJS chỉ tải HTML, CSS, JavaScript và các dữ liệu quan trọng. Sau khi tải xong thì nó sẽ tìm nạp trước các tài nguyên cho các trang khác giúp trang web giảm được thời gian load trang cho các lần tiếp theo. Ngoài ra nó cũng cho phép tích hợp các công nghệ phổ biến hiện nay như GraphQL, Webpack...
Sử dụng ngôn ngữ Javascript với template dựa trên React.

Gatsbyjs

Nguồn

Hugo

Hugo là một trình tạo trang web tĩnh được viết bằng ngôn ngữ lập trình. Một số điểm mạnh của nó là có thể thiết lập trên trên S3, Github Pages, Dropbox... Tốc độ build nhanh, dễ dàng cài đặt, cập nhật, cho phép bạn có thể xuất dữ liệu khác nhau như HTML, JSON, AMP...

Hugo

Nguồn

Jekyllrb

Jekyll là một trình tạo trang web tĩnh. Nó có văn bản được viết bằng ngôn ngữ đánh dấu yêu thích của bạn và sử dụng bố cục để tạo các trang web tĩnh. Ngoài ra bạn có thể chỉnh sửa giao diện của trang web, các URL, dữ liệu hiển thị trên trang...
Một số điểm mạnh của nó là không cần phải thiết lập thêm cơ sở dữ liệu, cung cấp markdown, cải thiện tốc đọ load trang... Tuy nhiên nó có một số điểm yếu như tốc độ build dự án lớn hơi lâu, theme hơi ít.
Sử dụng ngôn ngữ ruby với template Liquid.

Jekyllrb

Nguồn

Nuxtjs

Nuxt.js là một trình tạo giao diện được xây dựng dựa trên Vue.js cung cấp nhiều tính năng phát triển cho ứng undj web như trình quản lý tag tốt hơn, tổ chức của ứng dụng rõ ràng, dễ hiểu, biên dịch ES6/ES7 mà không cần bất kỳ thiết lập nào, cung cấp các pre processor như Less, Sass, Stylus...

Nuxtjs

Nguồn

Hexo

Các tính năng chính:

  • Sử dụng ngôn ngữ Javascript.
  • Sử dụng template: EJS, Pug, Mustache, Handlebars, Twig, Marko, Haml, Swig, Nunjucks.
  • Dễ dàng Deploy lên Heroku, Github Page...
  • Cung cấp nhiều plugin hữu ích như EJS, Pug, Babel, PostCSS...
  • Hỗ trợ Markdown.
Hexo

Nguồn

11ty

Các tính năng chính:

  • Yêu Cầu Nodejs 10 trở lên.
  • Sử dụng template: Pug, Ejs, Markdown, Liquid, HTML, Handlebars...
11ty

Nguồn

VuePress

Các tính năng chính:

  • Tạo pre-rendered static HTML cho mỗi trang.
  • Hỗ trợ các bundler phổ biến như Webpack, Vite...
  • Cung nhiều nhiều theme.
VuePress

Nguồn

Docusaurus

Các tính năng chính:

  • Giúp xây dựng các document cho dự án.
  • Được xây dựng dựa trên React.
  • Hỗ trợ translate hơn 70 ngôn ngữ.
Docusaurus

Nguồn

Docsify

Các tính năng chính:

  • Đơn giản và dễ sử dụng.
  • Cung cấp nhiều plugin.
  • Hỗ trợ emoji.
  • Cung cấp nhiều theme.
Docsify

Nguồn

Nếu bạn muốn tham khảo các free hosting dành cho front-end developer thì truy cập đường dẫn bên dưới nha.
Free Hosting Dành Cho Front-end Developer

Nếu bạn muốn tham khảo các web hosting miễn phí thì truy cập đường dẫn bên dưới nha.
Web Hosting Miễn Phí

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế phát triển Static Site Generator và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!