GatsbyJS 入门实战篇（三）：巧手构建 React 静态网站，助您成为前端开发高手

2024-02-25 19:11:16

亲爱的读者，欢迎来到 GatsbyJS 入门系列文章的第三章。在这个激动人心的篇章中，我们将共同开启一段奇妙的旅程，从零开始构建一个功能完备的 React 静态网站，并体验 GatsbyJS 的强大功能。

我们已经学习了 GatsbyJS 的基础知识，包括项目创建、组件开发和数据查询等内容。现在，让我们更进一步，将这些知识应用于实践，打造一个属于我们自己的网站。

构建 React 静态网站的必要工具

在开始之前，确保您已经安装了以下软件：

Node.js（版本 >= 12.22.0）
npm（版本 >= 6.14.13）
GatsbyJS CLI（版本 >= 4.9.53）

您可以通过以下命令安装 GatsbyJS CLI：

npm install -g gatsby-cli

创建新项目

首先，让我们创建一个新的 GatsbyJS 项目。打开终端并输入以下命令：

gatsby new my-gatsby-project

这将创建一个名为 my-gatsby-project 的新文件夹。进入该文件夹并运行以下命令以启动开发服务器：

cd my-gatsby-project
gatsby develop

开发服务器启动后，您可以在浏览器中访问 http://localhost:8000 来查看网站。

添加必要组件

现在，让我们添加一些必要的组件来构建我们的网站。首先，我们需要创建一个导航栏组件。在 src/components/ 目录下创建一个名为 Header.js 的文件，并输入以下代码：

import React from "react";
import { Link } from "gatsby";

const Header = () => {
  return (
    <header>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/blog">Blog</Link>
      </nav>
    </header>
  );
};

export default Header;

这个组件很简单，它创建了一个导航栏，其中包含指向主页、关于页和博客页的链接。

接下来，我们需要创建一个页脚组件。在 src/components/ 目录下创建一个名为 Footer.js 的文件，并输入以下代码：

import React from "react";

const Footer = () => {
  return (
    <footer>
      <p>Copyright 2023 &copy; My Gatsby Project</p>
    </footer>
  );
};

export default Footer;

这个组件同样很简单，它创建了一个页脚，其中包含版权信息。

最后，我们需要创建一个主页组件。在 src/pages/ 目录下创建一个名为 index.js 的文件，并输入以下代码：

import React from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";

const IndexPage = () => {
  return (
    <>
      <Header />
      <main>
        <h1>Welcome to My Gatsby Project</h1>
        <p>This is a simple static website built with GatsbyJS.</p>
      </main>
      <Footer />
    </>
  );
};

export default IndexPage;