title: 使用 Gatsby 构建静态网站 date: 2022-05-10 excerpt: 本文将介绍如何使用 Gatsby 构建静态网站，并介绍如何丰富网站内容。
什么是 Gatsby？
Gatsby 是一个基于 React 的静态网站生成器，它可以帮助开发者快速构建高性能的静态网站。Gatsby 使用 GraphQL 查询语言来获取数据，可以轻松地从各种数据源（如 CMS、Markdown 文件、API 等）中提取数据并生成静态页面。
安装 Gatsby
要使用 Gatsby 构建静态网站，首先需要安装 Node.js 和 Gatsby 的命令行工具。打开命令行工具，运行以下命令进行安装：
npm install -g gatsby-cli
安装完成后，可以使用以下命令验证安装是否成功：
gatsby --version
创建新的 Gatsby 网站
使用 Gatsby 构建新的静态网站非常简单，只需要运行以下命令：
gatsby new my-website
该命令将创建一个名为 my-website 的新文件夹，并在其中初始化一个新的 Gatsby 网站。
进入新创建的文件夹：
cd my-website
在新的 Gatsby 网站中，你会找到一个名为 src 的文件夹，其中包含用于构建网站的源代码。
创建页面
要创建新页面，只需在 src/pages 目录下创建一个新的 .js 或 .jsx 文件，例如 about.js。Gatsby 将自动将这些文件转换为可访问的页面。
// src/pages/about.js
import React from "react"
const AboutPage = () => {
return (
<div>
<h1>About Us</h1>
<p>Welcome to our website!</p>
</div>
)
}
export default AboutPage
保存并在浏览器中访问 http://localhost:8000/about，就可以看到新创建的页面了。
丰富网站内容
为了使网站内容更丰富多样，我们可以使用 Markdown 文件来创建文章或博客。首先，安装 Gatsby 的 Markdown 插件：
npm install gatsby-source-filesystem gatsby-transformer-remark
然后，在 Gatsby 的配置文件 gatsby-config.js 中添加以下插件配置：
// gatsby-config.js
module.exports = {
plugins: [
`gatsby-source-filesystem`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/posts/`,
},
},
`gatsby-transformer-remark`,
],
}
现在，在 src/posts 目录下创建一个新的 Markdown 文件，例如 my-first-blog-post.md：
---
title: My First Blog Post
date: 2022-05-10
---
欢迎阅读我的第一篇博客文章！这是使用 Gatsby 构建的静态网站。
Gatsby 将自动读取 Markdown 文件的内容，并将其转换为可在网站上访问的页面。
在页面组件中使用 Markdown 数据：
// src/pages/blog.js
import React from "react"
import { graphql } from "gatsby"
const BlogPage = ({ data }) => {
const posts = data.allMarkdownRemark.edges
return (
<div>
<h1>Blog</h1>
{posts.map(({ node }) => (
<div key={node.id}>
<h2>{node.frontmatter.title}</h2>
<p>{node.frontmatter.date}</p>
<div dangerouslySetInnerHTML={{ __html: node.html }} />
</div>
))}
</div>
)
}
export const query = graphql`
query {
allMarkdownRemark {
edges {
node {
id
frontmatter {
title
date(formatString: "YYYY-MM-DD")
}
html
}
}
}
}
`
export default BlogPage
通过上述代码，我们可以在 http://localhost:8000/blog 看到博客文章的列表。
构建静态网站
在完成网站开发后，可以使用以下命令构建静态网站：
gatsby build
构建完成后，可以将生成的静态文件部署到任何静态网页托管服务，如 Netlify 或 Vercel。
通过使用 Gatsby，我们可以快速构建高性能的静态网站，并且可以方便地通过 Markdown 文件等多种数据源丰富网站内容。希望本文能帮助你开始使用 Gatsby 构建自己的静态网站！
本文来自极简博客，作者：星河之舟，转载请注明原文链接：利用Gatsby构建静态网站
