GALAXY TECH
Chuyên gia Công nghệ
Thứ ba, 20/10/2020 | 00:00 GMT+7

Cách thiết lập trang web Gatsby đầu tiên của bạn

Gatsby là một khung công tác React cho phép bạn tạo các ứng dụng tĩnh và không server . Các trang web Gatsby khác với các trang web truyền thống vì chúng thường được triển khai trên mạng phân phối nội dung (CDN) và không có nội dung. Ưu điểm của việc triển khai từ CDN là có ít độ trễ hơn và các trang web thường được phục vụ cho khách hàng nhanh hơn.

Gatsby thường được mô tả như một lưới nội dung . Lưới nội dung nghĩa là với quyền là user , bạn có thể lấy dữ liệu từ nhiều nguồn khác nhau như trang WordPress , file CSV và nhiều API bên ngoài; kết quả là Gatsby là dữ liệu bất khả tri. Điều này khác với hệ thống quản lý nội dung (CMS) truyền thống như WordPress và Drupal , nơi dữ liệu thường đến từ một nguồn duy nhất - một database . Khi bạn xây dựng một ứng dụng trên Gatsby, bạn không phải lo lắng về việc duy trì và cung cấp database . Ngoài ra, khi sử dụng Gatsby, bạn có thể xây dựng trên một khuôn khổ nổi tiếng về tốc độ và tính linh hoạt của nó.

Các trang web không server này còn gọi là JAMStack . Trong kiến trúc JAMStack, vẫn có một server tham gia, nhưng nhà phát triển không cần cung cấp hoặc duy trì server . Một số nhà phát triển coi serverless là một tính năng mong muốn vì họ có thể tập trung nhiều hơn sự chú ý vào logic nghiệp vụ của ứng dụng của họ. Ví dụ: nếu họ đang tạo một cửa hàng thương mại điện tử, họ có thể tập trung vào mã liên quan trực tiếp đến việc tạo và bán sản phẩm. JAMStack giúp các nhà phát triển nhanh chóng phát triển các trang web an toàn hơn, hiệu suất hơn và triển khai rẻ hơn so với các khuôn khổ CMS truyền thống.

Trong hướng dẫn này, bạn sẽ:

  • Cài đặt mẫu mặc định Gatsby Starter.
  • Sửa đổi metadata trong gatsby config .
  • Chạy server phát triển và xem trang web Gatsby local .
  • Nhận phần giới thiệu ngắn về khả năng tối ưu hóa hình ảnh của JSX và Gatsby.

Đến cuối hướng dẫn này, bạn có thể tạo và sửa đổi một trang Gatsby. Bạn sẽ cài đặt và chạy trang web thương mại điện tử Gatsby đầu tiên của bạn . Lưu ý bạn sẽ tạo trang web này trên máy local của bạn và bạn sẽ không triển khai nó.

Yêu cầu

Bước 1 - Cài đặt Gatsby và tạo một dự án mới

Trong bước này, bạn sẽ cài đặt một trang Gatsby mới từ một mẫu. Gatsby cung cấp cho user các mẫu ban đầu, vì vậy bạn không phải lo lắng về việc xây dựng một trang web từ con số không.

Download gói Gatsby CLI. Giao diện dòng lệnh Gatsby này sẽ cho phép bạn tạo và tùy chỉnh một trang web mới:

  • npm install -g gatsby-cli

Cờ -g nghĩa là bạn đang cài đặt giao diện dòng lệnh Gatsby trên phạm vi global thay vì local . Điều này sẽ cho phép bạn sử dụng công cụ trong bất kỳ folder nào.

Lưu ý: Trên một số hệ thống như Ubuntu 18.04, việc cài đặt gói npm trên phạm vi global có thể dẫn đến lỗi quyền, điều này sẽ làm gián đoạn quá trình cài đặt. Vì đây là phương pháp bảo mật tốt nhất để tránh sử dụng sudo với npm install , thay vào đó bạn có thể giải quyết vấn đề này bằng cách thay đổi folder mặc định của npm. Nếu bạn gặp phải lỗi EACCES , hãy làm theo hướng dẫn tại tài liệu npm chính thức .

Nếu bạn nhập gatsby help bạn sẽ tìm thấy một số lệnh mà bạn có thể sử dụng để tạo trang web Gatsby của bạn :

  • gatsby help

Điều này sẽ cho kết quả sau:

Output
Usage: gatsby <command> [options]  Commands:   gatsby develop                   Start development server. Watches files, rebuilds, and hot reloads if something changes   gatsby build                     Build a Gatsby project.   gatsby serve                     Serve previously built Gatsby site.   gatsby info                      Get environment information for debugging and issue reporting   gatsby clean                     Wipe the local gatsby environment including built assets and cache   gatsby repl                      Get a node repl with context of Gatsby environment, see                                    (https://www.gatsbyjs.org/docs/gatsby-repl/)   gatsby new [rootPath] [starter]  Create new Gatsby project.   gatsby plugin                    Useful commands relating to Gatsby plugins   gatsby telemetry                 Enable or disable Gatsby anonymous analytics collection. ...

Dưới đây là các lệnh quan trọng nhất cho hướng dẫn này:

  • gatsby new tạo ra một trang web hoàn toàn mới. Nếu bạn sử dụng gatsby new của chính nó, bạn sẽ nhận được một trang web rõ ràng. Cách phổ biến hơn để sử dụng gatsby new là kết hợp nó với một mẫu khởi động, Đây là kết quả bạn sẽ làm trong hướng dẫn này.

  • gatsby develop development khởi động server phát triển. Trong suốt hướng dẫn này, bạn sẽ sử dụng gatsby develop để xem trang web local trên cổng :8000 .

  • gatsby build gói các file và nội dung tĩnh và tạo một bản dựng production ứng dụng của bạn.

Đến đây bạn đã cài đặt các công cụ dòng lệnh Gatsby, nhưng bạn vẫn chưa có trang web. Một trong những lợi thế của Gatsby là bạn không phải viết mã trang web từ đầu. Gatsby có một số mẫu khởi động mà bạn có thể sử dụng để cài đặt và chạy trang web của bạn . Có hàng trăm mẫu trên mạng và nhiều đóng góp trong số này đến từ cộng đồng. Đối với hướng dẫn này, bạn sẽ sử dụng một trong những mẫu khởi động chính thức của Gatsby , Gatsby Starter Default .

Điều đầu tiên bạn sẽ làm là cài đặt bộ khởi động Gatsby thông qua terminal của bạn:

  • gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

gatsby new tạo ra một trang web mới. Hướng dẫn này sẽ sử dụng mẫu gatsby-starter-default và sẽ đặt tên dự án theo mẫu.

Đầu ra sau trong dòng lệnh nghĩa là bạn đã cài đặt thành công mẫu Gatsby starter:

Output
... Your new Gatsby site has been successfully bootstrapped. Time to change into the directory    cd gatsby-starter-default   gatsby develop

gatsby-starter-default là tên của folder mới của bạn. Đến đây bạn sẽ thay đổi thành gatsby-starter-default và liệt kê nội dung của folder :

  • cd gatsby-starter-default && ls

Điều này sẽ cho kết quả sau:

Output
LICENSE           gatsby-browser.js gatsby-node.js    node_modules      public            yarn.lock README.md         gatsby-config.js  gatsby-ssr.js     package.json      src

Các file quan trọng bạn sẽ sửa đổi trong hướng dẫn này bao gồm:

  • gatsby-config.js chứa các tùy chỉnh trên toàn trang web . Đây là nơi bạn sẽ sửa đổi metadata và thêm các plugin Gatsby .

  • folder src chứa tất cả các trang, hình ảnh và các thành phần tạo nên trang web. Trong React,các thành phần là những phần riêng biệt của một trang web. Ví dụ: trong trang web , trang index được tạo thành từ các thành phần layout , image và seo .

Đến đây bạn đã tạo một dự án Gatsby mới và khám phá cấu trúc file , bạn đã sẵn sàng đi vào dự án của bạn và tùy chỉnh metadata của trang web.

Bước 2 - Sửa đổi Siêu dữ liệu Tiêu đề, Mô tả và Tác giả trong Cấu hình Gatsby của bạn

Nếu bạn muốn công cụ tìm kiếm phát hiện ra trang web của bạn , điều quan trọng là phải định dạng chính xác siêu dữ liệu . Trong phần này, bạn sẽ cấu hình metadata tiêu đề, mô tả và tác giả trong ứng dụng của bạn .

/gatsby config là file cấu hình của Gatsby. Đây là nơi bạn sẽ tìm thấy đối tượng siteMetadata site. Siêu dữ liệu của trang web giúp tăng cường SEO cho trang web và làm cho nó dễ phát hiện hơn bởi các công cụ tìm kiếm.

Mở gatsby-config.js trong editor tp xem cấu hình của Gatsby. nano là tên của editor văn bản mà hướng dẫn này sẽ sử dụng để xem file cấu hình Gatsby, nhưng bạn có thể sử dụng editor mà bạn chọn:

  • nano gatsby-config.js

Sau đây là gatsby-config.js với các cấu hình đi kèm với mẫu Gatsby Default Starter:

gatsby-config.js
module.exports = {   siteMetadata: {     title: `Gatsby Default Starter`,     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,     author: `@gatsbyjs`,   },   plugins: [     `gatsby-plugin-react-helmet`,     {       resolve: `gatsby-source-filesystem`,       options: {         name: `images`,         path: `${__dirname}/src/images`,       },     },     `gatsby-transformer-sharp`,     `gatsby-plugin-sharp`,     {       resolve: `gatsby-plugin-manifest`,       options: {         name: `gatsby-starter-default`,         short_name: `starter`,         start_url: `/`,         background_color: `#663399`,         theme_color: `#663399`,         display: `minimal-ui`,         icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.       },     },     // this (optional) plugin enables Progressive Web App + Offline functionality     // To learn more, visit: https://gatsby.dev/offline     // `gatsby-plugin-offline`,   ], }

Tệp cấu hình Gatsby cũng là nơi chứa các plugin của bạn. Plugin là các gói bạn cài đặt để thêm chức năng cho ứng dụng Gatsby của bạn . Bản cài đặt Gatsby này đi kèm với các gatsby-plugin-react-helmet , gatsby-transformer-sharp , gatsby-plugin-sharp và gatsby-plugin-manifest .

Mọi mẫu Gatsby Default Starter đều chứa cùng một metadata chung. Bạn sẽ cá nhân hóa dữ liệu này và bắt đầu quá trình biến trang web này thành của bạn .

Thay thế văn bản cho title , description và author bằng mã được đánh dấu sau:

gatsby-config.js
module.exports = {   siteMetadata: {     title: `Getting Started with Gatsby`,     description: `A tutorial that goes over Gatsby development`,     author: `@digitalocean`,   },   plugins: [     `gatsby-plugin-react-helmet`,     {       resolve: `gatsby-source-filesystem`,       options: {         name: `images`,         path: `${__dirname}/src/images`,       },     },     `gatsby-transformer-sharp`,     `gatsby-plugin-sharp`,     {       resolve: `gatsby-plugin-manifest`,       options: {         name: `gatsby-starter-default`,         short_name: `starter`,         start_url: `/`,         background_color: `#663399`,         theme_color: `#663399`,         display: `minimal-ui`,         icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.       },     },     // this (optional) plugin enables Progressive Web App + Offline functionality     // To learn more, visit: https://gatsby.dev/offline     // `gatsby-plugin-offline`,   ], }

Lưu và thoát khỏi file .

Như vậy, khi Google hoặc một công cụ tìm kiếm khác thu thập dữ liệu trang web , nó sẽ truy xuất dữ liệu được liên kết với ứng dụng của bạn. Bạn đã thay đổi metadata ; tiếp theo bạn sẽ thay đổi một trong các trang của trang web.

Bước 3 - Sửa đổi Trang Chỉ mục

Trong phần này, bạn sẽ tìm hiểu về JSX , thay đổi đánh dấu trên trang index , thêm hình ảnh và chạy local trang Gatsby của bạn.

Đã đến lúc xem trang web Gatsby trông như thế nào trong trình duyệt của bạn. Mở một cửa sổ mới trong terminal và nhập gatsby develop trong dòng lệnh để xem version local của trang web:

  • gatsby develop

Lệnh gatsby develop khởi động server phát triển. Nếu bạn truy cập trình duyệt, bạn có thể truy cập trang web của bạn tại localhost:8000 :

Đây là hình ảnh của trang chủ Gatsby

Bạn sẽ thay đổi đánh dấu trên trang để làm cho nó trông giống với nội dung bạn tìm thấy trên một trang web thương mại điện tử hơn. Thay đổi đánh dấu trên trang index :

  • nano src/pages/index.js

Đây là những gì bạn sẽ tìm thấy trong editor :

src / pages / index.js
import React from "react" import { Link } from "gatsby"  import Layout from "../components/layout" import Image from "../components/image" import SEO from "../components/seo"  const IndexPage = () => (   <Layout>     <SEO title="Home" />     <h1>Hi people</h1>     <p>Welcome to your new Gatsby site.</p>     <p>Now go build something great.</p>     <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>       <Image />     </div>     <Link to="/page-2/">Go to page 2</Link> <br />     <Link to="/using-typescript/">Go to "Using TypeScript"</Link>   </Layout> )  export default IndexPage

Mã ở đây là JSX . JSX cho phép bạn viết các phần tử HTML bằng JavaScript. Nếu bạn muốn có cái nhìn tổng quan hơn về JSX, hãy chuyển đến hướng dẫn JSX của ta .

Trong editor , hãy thay thế <h1>Hi People</h1> bằng <h1>Hello Shoppers, we are open for business!<h1> và <p>Welcome to your new Gatsby site.</p> with <p>We sell fresh fruit.</p> . Xóa <p>Now go build something great.</p> :

src / pages / index.js
import React from "react" import { Link } from "gatsby"  import Layout from "../components/layout" import Image from "../components/image" import SEO from "../components/seo"  const IndexPage = () => (   <Layout>     <SEO title="Home" />     <h1>Hello Shoppers, we are open for business!</h1>     <p>We sell fresh fruit.</p>     <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>       <Image />     </div>     <Link to="/page-2/">Go to page 2</Link> <br />     <Link to="/using-typescript/">Go to "Using TypeScript"</Link>   </Layout> )  export default IndexPage

Lưu các thay đổi . Không cần khởi động và dừng server phát triển vì Gatsby đi kèm với tính năng reload nóng . Reload nóng sẽ làm mới các file trong ứng dụng của bạn mà bạn đã thay đổi:

Ảnh chụp màn hình trang web với những thay đổi mới

Đến đây bạn sẽ thay đổi hình ảnh từ phi hành gia Gatsby thành Sammy the Shark . Mở hình ảnh trong trình duyệt của bạn và tải hình ảnh xuống folder src/images trong dự án Gatsby của bạn. Lưu hình ảnh dưới dạng sammy-shark.jpeg .

Kiểm tra kỹ để xem hình ảnh Sammy the Shark có ở đúng folder hay không. Điều hướng đến folder images :

  • cd src/images

Sau khi bạn đã truy cập được folder hình ảnh, hãy kiểm tra xem sammy-shark.jpeg có trong folder images :

  • ls

ls là lệnh cho danh sách. Bạn đang liệt kê tất cả các file được tìm thấy trong folder images :

Output
gatsby-astronaut.png gatsby-icon.png      sammy-shark.jpeg

Đến đây bạn đã xác nhận file ở đó, bạn sẽ mở image.js trong editor yêu thích của bạn . Bạn sắp swap hình ảnh phi hành gia Gatsby với Sammy the Shark.

Đầu tiên, quay lại folder src của bạn:

  • cd ..

Bây giờ mở thành phần image.js :

  • nano components/image.js

Thay thế gatsby-astronaut.png bằng sammy-shark.jpeg :

src / components / image.js
import React from "react" import { useStaticQuery, graphql } from "gatsby" import Img from "gatsby-image"  /*  * This component is built using `gatsby-image` to automatically serve optimized  * images with lazy loading and reduced file sizes. The image is loaded using a  * `useStaticQuery`, which allows us to load the image from directly within this  * component, rather than having to pass the image data down from pages.  *  * For more information, see the docs:  * - `gatsby-image`: https://gatsby.dev/gatsby-image  * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/  */  const Image = () => {   const data = useStaticQuery(graphql`     query {       placeholderImage: file(relativePath: { eq: "sammy-shark.jpeg" }) {         childImageSharp {           fluid(maxWidth: 300) {             ...GatsbyImageSharpFluid           }         }       }     }   `)    return <Img fluid={data.placeholderImage.childImageSharp.fluid} /> }  export default Image

Gatsby sử dụng GraphQL để thực hiện các truy vấn dữ liệu và ở đây file image.js trong Gatsby truy vấn hình ảnh PNG và tối ưu hóa nó. Trong đoạn mã này, Gatsby chia tỷ lệ kích thước hình ảnh của sammy-shark.jpeg thành chiều rộng tối đa là 300 . Bạn có thể đọc thêm về cách Gatsby định dạng hình ảnh tại đây .

file() là một hàm mở file có "sammy-shark.jpeg" . relativePath cho bạn biết vị trí của hình ảnh liên quan đến vị trí của bạn — hoặc thư mục làm việc hiện tại (pwd) . eq là giá trị bộ lọc, một phần của GraqhQL.

Lưu các file . Server sẽ khởi động lại và bạn sẽ tìm thấy Sammy the Shark trên trang Gatsby của bạn :

Đây là version cuối cùng của trang thương mại điện tử Gatsby của ta

Như vậy, bạn đã cài đặt và chạy trang web thương mại điện tử Gatsby của bạn tại local .

Kết luận

Trong hướng dẫn này, bạn đã tạo trang web Gatsby đầu tiên của bạn . Bạn đã học cách cài đặt một trang Gatsby cơ bản trên máy local của bạn . Đến đây bạn có thể tạo và tùy chỉnh ứng dụng Gatsby, bước tiếp theo là triển khai trang thương mại điện tử Gatsby của bạn .

Tags:

Các tin liên quan