Trong bài này mình giới thiệu và hướng dẫn sử dụng sơ bộ về documentation của Gatsby JS. Đồng thời giới thiệu về cấu trúc thư mục của 1 project.
Giới thiệu và hướng dẫn sử dụng documentation.
Trước tiên các bạn vào trang chủ của Gatsby JS: tại đây. Trang chủ documentation được trình bày như sau:
Bên trái là thanh sidebar bao gồm các menu trong document. Trong mục Plugin Library bao gồm các plugin bổ trợ ví dụ:
- gatsby-plugin-react-helmet: plugin này giúp hỗ trợ SEO tự động thêm các thẻ meta hỗ trợ cho web Site chuẩn SEO
- gatsby-plugin-sass: plugin này hỗ trợ auto compile file scss thành css trên project của bạn.
- gatsby-plugin-robots-txt: plugin này giúp generate file robot.txt
- …
Ngoài ra còn một số plugin khác giúp trong việc làm một static-site. Các bài phía sau mình giới thiệu nhiều hơn. Tiếp theo mục cần nói tới là Starter Library, trong mục này có tất cả các starter template giúp các bạn có thể dev project dễ dàng hơn.
Để tạo một project có theme trong library các bật cmd tại thư mục gõ lệnh: gatsby new {ten-template} {url-git-hub-template}
Ngoài ra Gatsby giới thiệu 1 số tool như Develop & Build GatsbyJS static sites within Docker, các extension trên chrome, firefox để nhận biết được website đó có phải được build trên nền framework hay không. Và các mục sau là phần hướng dẫn sử dụng framework. Qua các bài sau mình sẽ từ từ nói rõ về những phần đó.
Cấu trúc thư mục
Cấu trúc thư mục của Gatsby gần như tương tự như thư mục của React JS
Thư mục node_modules là nơi chứa các modules được cài vào project của bạn. Tiếp theo đó là thư mục public đây là thư mục dùng để render giao diện chứa các hình ảnh tĩnh, các data được query được lưu thành file json đồng thời file index.html. Các bạn vào trang web được viết bởi Gatsby bật view source sẽ thấy được nội dung trong file này. Tiếp theo là thư mục src nơi chưa các Component, Template, Page của trang web. Còn lại là 3 file js ngoài cùng, file gatsby-browser.js nói import css, scss, thư viện vào trang web, file gatsby-config.js khai báo các và cấu hình các plugin bạn đã cài trong project, file gatsby-node.js file generate page của website. Vậy là mình giới thiệu sơ qua về cấu trúc thư mục của một project. Vào bài sau mình hướng dẫn các bạn cài plugin và khai báo, cũng như cách sửa dụng GraphQL.