Gatsby 是一个基于React的静态网站生成器，它可以帮助开发者快速构建高性能的静态网站。由于使用了React的特性，Gatsby可以提供可扩展的插件生态系统，以及优秀的开发者体验。
本次实战中，我们将使用Gatsby来创建一个内容丰富的静态网站。我们将使用Gatsby Starter Blog模板作为基础，这个模板提供了一些基本的网站结构，包括博客文章列表、文章详情和标签分类等功能。
步骤一：创建新项目
首先，我们需要在本地创建一个新的Gatsby项目。在命令行中执行以下命令：
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog
这将会在当前目录下创建一个名为 my-blog 的新项目，并且使用 gatsby-starter-blog 模板初始化项目。
步骤二：安装依赖
进入项目目录，并安装项目所需的依赖：
cd my-blog
npm install
步骤三：运行开发服务器
使用以下命令在开发模式下启动Gatsby开发服务器：
gatsby develop
然后，在浏览器中打开 http://localhost:8000，你将看到一个简单的博客主页。
步骤四：自定义网站内容
现在我们可以开始自定义博客的内容并创建新的博客文章。所有的博客文章都位于项目目录下的 content/blog 文件夹中。
可以在该文件夹中创建新的Markdown文件，用于表示你的博客文章。例如，你可以创建一个名为 hello-world.md 的文件，并在其中添加以下内容：
---
title: Hello, World!
date: 2022-01-01
description: My first blog post using Gatsby!
---
这是我的第一篇博客文章，使用Gatsby创建。我很兴奋开始使用Gatsby构建内容丰富的静态网站。
步骤五：显示博客文章列表
现在我们已经有了一篇博客文章，我们可以在博客主页中显示它。打开 src/pages/index.js 文件，并按照以下方式修改代码：
import React from "react"
import { Link, graphql } from "gatsby"
const IndexPage = ({ data }) => {
const { edges } = data.allMarkdownRemark
return (
<div>
<h1>欢迎来到我的博客</h1>
<h2>最新文章</h2>
<ul>
{edges.map(({ node }) => {
const { frontmatter } = node
return (
<li key={frontmatter.title}>
<h3>
<Link to={frontmatter.slug}>{frontmatter.title}</Link>
</h3>
<p>{frontmatter.date}</p>
<p>{frontmatter.description}</p>
</li>
)
})}
</ul>
</div>
)
}
export const query = graphql`
query {
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
edges {
node {
frontmatter {
title
date(formatString: "YYYY-MM-DD")
description
slug
}
}
}
}
}
`
export default IndexPage
在上述代码中，我们使用GraphQL查询获取所有博客文章的信息，并在博客主页中显示文章的标题、日期和描述。每篇文章标题都链接到对应的文章详情页面。
步骤六：显示博客文章详情
如果用户点击了博客文章列表中的文章标题，我们将会展示该文章的详细内容。新建一个文件 src/templates/blog-post.js，并将以下代码添加到该文件中：
import React from "react"
import { graphql } from "gatsby"
const BlogPost = ({ data }) => {
const { markdownRemark } = data
const { frontmatter, html } = markdownRemark
return (
<div>
<h1>{frontmatter.title}</h1>
<h2>{frontmatter.date}</h2>
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(frontmatter: { slug: { eq: $slug } }) {
frontmatter {
title
date(formatString: "YYYY-MM-DD")
}
html
}
}
`
export default BlogPost
在上述代码中，我们使用了GraphQL查询获取文章的标题、日期和内容，并将其展示在文章详情页面中。
步骤七：构建和部署
当你完成了博客的内容和样式定制后，你可以使用以下命令构建静态网站：
gatsby build
该命令将会生成一个静态网站，并将所有的文件输出到 public 目录中。
要将你的网站部署到互联网上，你可以使用各种不同的方法，比如将 public 目录中的文件上传到静态网站托管服务（如Netlify、Vercel等）。
总结
在这个实战中，我们通过使用Gatsby创建了一个内容丰富的静态网站。你可以根据自己的需求继续定制和扩展该网站，添加新的功能和页面。
Gatsby提供了强大的工具和生态系统，使得创建高性能静态网站变得更加容易和快速。希望这个实战对你开始使用Gatsby有所帮助！
本文来自极简博客，作者：心灵的迷宫，转载请注明原文链接：实战：使用Gatsby创建静态网站
