Các bước đầu tiên của bạn với Gatsby v2

Trước đây, ta đã khám phá triết lý đằng sau Gatsby cũng như một số tính năng chính của nó, vì vậy đã đến lúc ta bắt đầu xây dựng các trang web với nó. Ta sẽ khám phá ở đây cách bắt đầu với Gatsby v2.

Gatsby CLI

Bước đầu tiên để bắt đầu sẽ là cài đặt Gatsby CLI trên phạm vi global :

$ yarn global add gatsby-cli  # or, using npm: $ npm install gatsby-cli -g

Và bây giờ ta có thể sử dụng trình gatsby new để bắt đầu một dự án mới:

$ gatsby new my-site

Thao tác này sẽ tạo một folder my-site với cấu trúc file bắt đầu sau:

├── /.cache ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── /node_modules ├── package-lock.json ├── package.json ├── /src └── yarn.lock

Đến đây bạn có thể cd vào folder của trang web mới của bạn và bắt đầu làm việc với nó bằng cách chạy gatsby develop :

$ cd my-site $ gatsby develop

Và bây giờ bạn có thể truy cập trang web của bạn tại http://localhost:8000/ :

Trang web Starter Gatsby

Sử dụng Starter

Trang web khởi động Gatsby mặc định được sử dụng khi sử dụng lệnh gatsby new mà không có đối số bổ sung, nhưng ta cũng có thể sử dụng một số trình khởi động cộng đồng hoặc được hỗ trợ chính thức khác. Hiện tại có 3 start-up chính thức: gatsby-starter-default , gatsby-starter-hello-world và gatsby-starter-blog .

Bạn cũng có thể xem những người mới bắt đầu cộng đồng khác nhau tại đây .

Mục tiêu cuối cùng của ta khi bắt đầu với bài đăng này sẽ là xây dựng một blog đầy đủ tính năng sử dụng Gatsby, vì vậy thay vì sử dụng trình khởi động mặc định như ta đã làm trong bước trước, hãy sử dụng gatsby-starter-blog . Ta sẽ gọi blog của bạn là Alligator Chronicles :

gatsby new alligator-chronicles https://github.com/gatsbyjs/gatsby-starter-blog#v2

Cấu hình trang web

Cấu hình cho một trang Gatsby được chỉ định trong file gatsby-config.js . Trình khởi động của ta đã điền file đó với cấu hình mặc định, nhưng bây giờ ta có thể thay đổi nó một chút:

gatsby-config.js

module.exports = {   siteMetadata: {     title: 'Alligator Chronicles',     description: 'The chronicles of a somewhat lonely Alligator.',     siteUrl: 'https://alligator-chronicles.com/',   },   plugins: [     ...   ], }

Ta đã thay đổi metadata của trang web để phù hợp với nhu cầu của ta và cũng xóa pathPrefix , chỉ hữu ích nếu blog của ta không nghĩa là tồn tại ở root của domain . Ta đã giữ nguyên cấu hình plugin, vì đây là điều mà ta sẽ khám phá trong các bài đăng trong tương lai.

Lưu ý bạn cần khởi động lại server local của bạn sau khi áp dụng các thay đổi đối với file gatsby-config.js hoặc tạo các trang mới.

Thêm bài viết mới

Với cách cài đặt trình bắt đầu blog chính thức, ta có thể thêm bài đăng bằng cách tạo folder mới cho mỗi bài đăng trong folder / src / page của dự án và sau đó là file index.md có nội dung của bài đăng.

Ví dụ: thêm một bài đăng mới vào trang web của ta :

/src/pages/lonely-gator/index.md

--- title: Lonely Gator date: '2018-08-16' ---  I'm just a lonely gator, going about my life. **Croc croc**!

Đối với hầu hết các phần, các bài đăng trên blog của ta chỉ là các file gỡ bỏ đơn giản. Sự khác biệt duy nhất là việc bổ sung một số metadata frontmatter ở đầu file được bao bọc bằng - cung cấp dữ liệu sẽ có sẵn để truy vấn bằng cách sử dụng GraphQL.

Xây dựng

Sau đó, khi blog của ta thực sự hoạt động, ta sẽ sử dụng lệnh gatsby build để biên dịch tất cả các nội dung và tạo các file tĩnh:

$ gatsby build

Điều này thêm các tài sản sẵn sàng triển khai vào folder public trong folder root của dự án của ta . Nội dung của folder đó chỉ có thể được tải lên một nhà cung cấp dịch vụ lưu trữ tĩnh để blog của ta hoạt động.

Sau khi trang web được xây dựng, bạn cũng có thể sử dụng gatsby serve để phục vụ version được xây dựng và tối ưu hóa của trang web tại http://localhost:9000/ :

$ gatsby serve

Điều này có thể hữu ích để kiểm tra trang web giống như nó sẽ ở trên server lưu trữ trực tiếp.

Kết thúc

Bây giờ ta đã hoàn thiện bề mặt và bắt đầu một trang web Gatsby mới, ta đã tạo tiền đề để bắt đầu đào sâu hơn trong các bài đăng trong tương lai và bắt đầu với những thành công trong việc xây dựng blog của bạn .

Trong khi chờ đợi, tôi khuyến khích bạn đọc tài liệu v2 chính thức .

Tags:

Các tin liên quan