Gatsby là một static site generator cho React đã phát hành phiên bản chính đầu tiên vào tháng trước. Đó là một công cụ không chỉ giúp bạn xây dựng các dự án (hoặc trang web) mà còn tuyên bố rằng các trang web đó nhanh chóng hoạt động.
Gatsby JS là gì ?
Gatsby là một "static site generator" được build từ core 
ReactJS. Về cơ bản nó cũng không khác gì create-react-app, bạn sẽ viết code bằng JavaScript rồi khi build nó sẽ bundle thành các file HTML, CSS và JS mà bạn có thể vứt lên bất kỳ web host tĩnh nào. Mình thì xài Netlify kết hợp với Github để đẩy web lên.
Cách viết một blog bằng Gatsby có thể làm như sau: viết bài blog bằng định dạng md, cho nó vào thư mục posts, bundles lại rồi đẩy lên hosting. Hoặc bạn có thể kết hợp với CMS khác như WordPress, Drupal, Contentful,… Hoặc bạn có thể kết hợp bằng một số CMS bạn tự build miễn có api để query dữ liệu là được. Hiện tại trang mình đang dùng CMS là WordPress để quản lý blog. Vậy ưu và nhược điểm của Gatsby là gì?
Ưu điểm của Gatsby JS
TỐC ĐỘ: Là một framework để tạo web tĩnh , tối ưu tốc độ và bảo mật cho website. Việc chuyển qua lại giữa các trang trong website cũng rất nhanh do tất cả các style, html và javascript sẽ được load trong lần tải đầu tiên, khi người dùng ấn vào một bài viết trong trang web của bạn, nội dung mới sẽ được tải về dưới dạng JSON và hiển thị lên, không cần load lại toàn bộ trang. Việc cấu hình các plugin cho phép tối ưu việc tải ảnh và preload (tải trước nội dung của các link người dùng có thể ghé qua) sẽ cho trang web của bạn một tốc độ cực cao.
SEO FRIENDLY (Thân thiện với các công cụ tìm kiếm): Nhiều bạn có thể lo ngại về việc website của bạn sẽ bị ảnh hưởng chất lượng SEO khi sử dụng GatsbyJS. Tuy nhiên bạn không cần lo lắng về điều đó vì Gatsby.js cung cấp khả năng server rendering, lần đầu crawler của các máy tìm kiếm tải trang web, chúng sẽ nhận được toàn bộ nội dung trang.
Sử dụng một loạt các công nghệ hiện đại hiện nay như React, Webpack, GraphQL, có thể load dữ liệu từ nhiều nơi như: các file dạng Markdown, các CMS (Contentful, WordPress), REST hay GraphQL API…
HỖ TRỢ Progressive Web Apps: Giúp trang web của bạn có thể tải về thành ứng dụng trên desktop lẫn trên mobile. Thật tiện phải không nào?
Nhược điểm của Gatsby JS
Khó tiếp cận : bạn sẽ khó tiếp cận và sử dụng được Gatsby nếu như bạn chưa biết và hiểu qua SPA là gì? Hoặc nói sâu hơn là bạn không thể sử dụng Gatsby nếu bạn chưa dùng qua React JS
Cài đặt môi trường cho Gatsby
Trước tiên muốn cài được Gatsby các bạn phải cài node Js trước bằng cách vào trang web của Node Js tải về.
Sau đó các bạn cài Gatsby CLI bằng lệnh: npm install -g gatsby-cli
Sau khi cài xong để khởi tạo dự án trước tiên bạn tao thư mục chứa dự án, sau đó bật cmd trong folder và khởi tạo bằng lệnh sau: gatsby new gatsby-site
Để chạy dự án trên local các bạn dùng lệnh: gatsby develop. Nhưng trong thời gian sử dụng trong folder dự án sẽ có cache của web lưu trữ các bạn xóa cache bằng cách dùng lệnh sau: gatsby clean
Vậy là mình đã hướng dẫn sơ bộ các bạn về Gatsby js trong bài tới mình sẽ viết rõ hơn về cấu trúc thư mục cũng như đào sâu về hướng dẫn code trên nền tảng này nhé