Gatsby 的简单入门指南

2023-10-28 07:15:22

Gatsby 入门

Gatsby 是一个用于构建快速、安全的静态网站的现代 JavaScript 框架。它使用 React 和 GraphQL 来构建网站，并使用静态站点生成器来生成最终的 HTML 和 CSS 文件。Gatsby 网站非常快速，因为它们是静态的，这意味着它们不需要服务器来运行。它们也非常安全，因为它们没有数据库或其他可能被攻击的组件。

安装和使用 Gatsby

要安装 Gatsby，您需要在您的电脑上安装 Node.js 和 npm。然后，您可以使用以下命令安装 Gatsby：

npm install -g gatsby-cli

安装完成后，您可以使用以下命令创建一个新的 Gatsby 网站：

gatsby new my-gatsby-site

这将在您的计算机上创建一个名为“my-gatsby-site”的新文件夹。该文件夹将包含您网站的所有文件。

要启动您的 Gatsby 网站，您可以使用以下命令：

gatsby develop

这将在您的计算机上启动一个开发服务器。您可以通过在浏览器中访问 http://localhost:8000 来查看您的网站。

创建页面和组件

Gatsby 网站由页面和组件组成。页面是网站的不同部分，例如主页、关于页和联系页。组件是页面中可重用的块，例如导航栏、页脚和侧边栏。

要创建一个新页面，您可以在 src/pages 文件夹中创建一个新的 JavaScript 文件。例如，要创建一个新的主页，您可以在 src/pages 文件夹中创建一个名为 index.js 的文件。

要创建一个新组件，您可以在 src/components 文件夹中创建一个新的 JavaScript 文件。例如，要创建一个新的导航栏组件，您可以在 src/components 文件夹中创建一个名为 Navbar.js 的文件。

使用 GraphQL 查询数据

Gatsby 使用 GraphQL 来查询数据。GraphQL 是一种用于查询数据的查询语言。它可以从各种来源查询数据，例如数据库、API 和文件系统。

要使用 GraphQL 查询数据，您可以在您的 React 组件中使用 useStaticQuery 钩子。例如，要查询主页的数据，您可以在您的 index.js 文件中使用以下代码：

import React from "react";
import { useStaticQuery, graphql } from "gatsby";

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
          description
        }
      }
    }
  `);

  return (
    <div>
      <h1>{data.site.siteMetadata.title}</h1>
      <p>{data.site.siteMetadata.description}</p>
    </div>
  );
};

export default IndexPage;