Hướng dẫn cài đặt và làm quen với Gatsby

Ngày đăng: 26 - 04 - 2020 Lượt xem: 1030 lượt

Trong bài trước mình đã giới thiệu các bạn về framework Gatsby JS. Những ưu điểm, nhược điểm mà framework mạng lại. Thì với bài này mình hướng dẫn các bạn các cài đặt và làm quen với Gatsby JS. Trước khi hướng dẫn chi tiết thì chúng ta hãy cùng nhau ghé xem qua trang web của Gatsby JS.

gatsby-lam-quen

Như các bạn cũng thấy thì trên trang chủ của Gatsby có giới thiệu về cách mà trang web trên nền Gatsby hoạt động. Trang web sẽ lấy data từ các nguồn như CMS, Markdown, hoặc các link api, Json,.. Sau đó Gatsby sẽ lấy data bằng GraphQL sau đó build thành trang web thành file .html, .css trên nền React và sau đó deploy lên hosting để public trang web.

Gatsby-lam-quen-menu

Đây là menu của trang web Gatsby thì sẽ có 2 mục là các bạn sẽ thường xuyên tiếp xúc: Docs, Plugins. Cũng giống như WordPress thì Gatsby hỗ trợ số lượng plugin cực kì lớn. Sau khi tìm hiểu xong trang chủ, thì chúng ta sẽ tiến hành cài đặt Gatsby.

Cài đặt Gatsby JS và khởi tạo dự án

Trước tiên các bạn cần phải cài node js và npm. Các bạn vào trang chủ của Node JS  để download. Sau đó bạn bật terminal và dùng lệnh sau để cài Gatsby vào máy:

npm install -g gatsby-cli

Sau khi cài xong thì terminal sẽ hiện ra như sau:

gatsby-làm-quen-cmd

Tiếp theo các bạn di chuyển terminal vào trong folder bạn muốn chưa project. Tại đây chúng ta bất đầu khởi tạo project. Nếu các bạn tham quan trang web của Gatsby thì sẽ thấy trang web trang bị đủ base source theme cho các lĩnh vực, các bạn tham khảo tại đây. Tuy nhiên mình thích dev từ base source theme default hơn nên mình dùng lệnh sau để tạo project:

gatsby new gatsby-site; cd gatsby-site

Các bạn có thể thay thế gatsby-site thành tên dự án của bạn, và lệnh cd để đưa terminal của bạn tiến vào thư mục của dự án. Vậy là bước đầu khởi tạo dự án đã xong.

Làm quen với Gatsby JS

Tiếp theo chúng ta sẽ chạy thử dự án chúng ta mới tạo sẽ như thế nào? Các bạn dùng lệnh sau để chạy dự án:

gatsby develop

Sau khi thực thi lệnh xong terminal sẽ trả về kết quả như sau:

gatsby-lam-quen-cmd-develop

Như các bạn thấy thì terminal trả về 2 link. Link đầu tiên là http://localhost:8000/  để vào dự án khởi tạo

gatsby-js-lam-quen-develop

Dự án trả về cho chúng ta 3 trang, các bạn trải nghiệm sẽ thấy. Và link thứ 2 là http://localhost:8000/__graphql  để các bạn có thể truy cập và sử dụng GraphQL 

gatsby-js-lam-quen-graphql

Công cự GraphQL giúp ích cho chúng ta rất nhiều trong việc lấy data từ các nguồn dự liệu. Không chỉ riêng Gatsby có thể sài GraphQL mà ngay cả WordPress, React, Vue,… Đều có thể sử dụng được. Vậy là chúng ta đã xong phần cái đặt và làm quen với Gatsby JS.

Tổng kết

Qua bài này mình đã giúp các bạn làm quen và cài đặt và khởi tạo dự án trên Gatsby. Qua bài sau mình tiếp tục hướng dẫn các bạn kết nối Gatsby với WordPress, đồng thời hướng dẫn cách sử dụng công cụ GraphQL nhé.

Cảm ơn các bạn.

5 1 vote
Đánh giá bài viết

Nhận thông báo
Nhận thông báo cho
guest

0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Thêm pagination và sidebar vào archive template trên Gatsby

Thêm pagination và sidebar vào archive template trên Gatsby

05 - 06 - 2020

Trong bài trước mình cùng mọi người cách tạo archive template trên Gatsby. Bài viết lần này mình và các...

Làm Archive template trên Gatsby

Làm Archive template trên Gatsby

02 - 06 - 2020

Trong bài trước mình cùng mọi người làm  sidebar cho page template trên Gatsby. Thì với bài viết này chúng...

Thêm sidebar vào page template trên Gatsby

Thêm sidebar vào page template trên Gatsby

27 - 05 - 2020

Trong bài trước mình cùng mọi người làm  page template trong Gatsby. Thì hôm nay mình tiếp tục hướng...

Làm Page template trên Gatbsy

Làm Page template trên Gatbsy

25 - 05 - 2020

Trong bài trước mình cùng mọi người luyện tập sử dụng custom field từ WordPress để render phần tin...

Render Tin tức mới của homepage trên Gatsby

Render Tin tức mới của homepage trên Gatsby

18 - 05 - 2020

Trong bài trước mình cùng mọi người luyện tập sử dụng custom field từ WordPress để render sang giao...

Render slider và CTA images của homepage trên Gatsby

Render slider và CTA images của homepage trên Gatsby

17 - 05 - 2020

Trong bài trước mình đã hướng dẫn các bạn render footer từ WordPress sang Gatsby. Nói đơn giản là các...

0
Would love your thoughts, please comment.x