Gatsby-WPGraphQL 博客示例项目启动和配置教程

1. 项目的目录结构及介绍

gatsby-wpgraphql-blog-example 项目是一个使用 Gatsby 和 WPGraphQL 的博客示例项目。以下是项目的目录结构及各部分的简要介绍：

gatsby-wpgraphql-blog-example/
├── .gitignore             # Git 忽略文件
├── .eslintrc.json         # ESLint 配置文件
├── .nvmrc                 # Node.js 版本管理文件
├── .prettierrc            # Prettier 配置文件
├── .prettierignore        # Prettier 忽略文件
├── config.js              # Gatsby 配置文件
├── gatsby-browser.js      # Gatsby 浏览器相关函数
├── gatsby-config.js       # Gatsby 主配置文件
├── gatsby-node.js         # Gatsby Node API 相关函数
├── gatsby-ssr.js          # Gatsby 服务端渲染相关函数
├── package-lock.json      # 包版本锁定文件
├── package.json           # 项目包配置文件
├── README.md              # 项目说明文件
├── src/                   # 源代码目录
│   ├── components/        # React 组件
│   ├── templates/         # 页面模板
│   ├── utils/             # 工具函数
│   └── ...
└── yarn.lock              # Yarn 包版本锁定文件

2. 项目的启动文件介绍

在项目的根目录中，主要的启动文件是 package.json。以下是其一些关键的启动命令：

• start: 使用 Gatsby 开发者服务器启动项目，通常用于本地开发。
• build: 构建静态网站，用于生产环境。
• serve: 启动一个静态文件服务器，用于本地预览构建后的网站。

在终端中运行以下命令以启动项目：

npm start
# 或者
yarn start

3. 项目的配置文件介绍

以下是项目中的几个关键配置文件：

• gatsby-config.js: 这是 Gatsby 的主要配置文件，其中包含站点元数据、插件和其他配置选项。

module.exports = {
  siteMetadata: {
    title: `Gatsby + WPGraphQL 博客示例`,
    description: `一个使用 Gatsby 和 WPGraphQL 的博客示例项目`,
    author: `你的名字`,
  },
  plugins: [
    {
      resolve: `gatsby-source-graphql`,
      options: {
        // WPGraphQL 的 GraphQL 端点
        url: `https://demo.wpgraphql.com/graphql`,
      },
    },
    // ... 其他插件
  ],
}

• config.js: 这个文件可能包含特定的项目配置，如 API 端点、第三方服务的密钥等。

确保在使用前根据你的需求调整这些配置文件。