Gatsby-doc-starter-library-js-wolfactive-949x475
09/04/2020

[Gatsby] Gatsby Documentation, cấu trúc thư mục project

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:

gastby-js-doc

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.

gatsby-doc-starter-library-js

Để 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

gatsby-directory

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.

Vui lòng chọn size trước khi đặt hàng (*)