【发布时间】：2022-06-10 18:41:25
【问题描述】：
我正在尝试设置来自 Gatsby 的“My Barcadia”模板。到目前为止，我一直遵循自述文件，它提供了一个很好解释的设置指南。所有帐户和 CLI 均已安装/创建。此模板还需要与 Contentful 的 API 连接。帐户和“空间”已设置，我有必要的令牌可用。这是自述文件指南的一部分。步骤 1,2 和 4 已成功完成。步骤 3 产生以下错误。第 3 步的根目录已重命名为“patricklemmerdev”。
1. **Create a Gatsby site.**
Use the Gatsby CLI to create a new site, specifying the Barcadia starter.
```shell
# create a new Gatsby site using the barcadia starter
gatsby new my-barcadia-starter https://github.com/bagseye/barcadia
```
2. **Before running Gatsby Develop**
You'll need to setup a free account with Contentful [Here](https://www.contentful.com/) and create a space ID and access token for your new site.
Once these are generated create a new file in the site root called `.env.development` and populate it with the following information:
```
CONTENTFUL_SPACE_ID={YOUR SPACE ID}
CONTENTFUL_ACCESS_TOKEN={YOUR ACCESS TOKEN}
```
**NOTE** - Ensure this file has been added to your `.gitignore` to prevent it from being tracked
3. **Start developing.**
Navigate into your new site’s directory and start it up.
```shell
cd my-barcadia-starter/
gatsby develop
```
4. **Import Content-model.json on Contentful**
Make a Json file(e.g. example-config.json) with the following content.
```
{
"spaceId": "SPACE_ID",
"managementToken": "Generate a management token from the APIs Tab on contentful dashboard",
"contentFile": "content-model.json"
}
```
Important Note: you need contentful globally installed(`npm i -g contentful-cli`) before the next step
Then Run this Command from your terminal:
`contentful space import --config example-config.json`
5. **Open your site**
Your site is now running at `http://localhost:8000`!
_Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._
Open the `my-barcadia-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
6. **Build your site**
When you are ready to build your production site, you will need to create a `.env.production` file that will contain the `CONTENTFUL_SPACE_ID` and `CONTENTFUL_ACCESS_TOKEN` environment variables. After that is set up, you can run `npm run build` or `gatsby build` and Gatsby will build your site.
为了开始开发模板，我需要运行“gatsby develop”，它应该启动 localhost:8000。这是我收到一个我不理解的错误并且到目前为止找不到答案的地方。（见截图）
我 a) 在 Contentful 中删除并创建了一个新空间 b) 对空间 ID、访问令牌和管理令牌进行了三次检查。
由于错误特别指出它无法访问环境主控，我创建了一个开发环境，这似乎也没有帮助。
我正在使用：
- 盖茨比 CLI 4.16.0
- 内容 CLI 1.14.9
这是 package.json：
{
"name": "barcadia",
"private": true,
"description": "A super-fast site using GatsbyJS",
"version": "2.0.0",
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "gatsby develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"@contentful/rich-text-react-renderer": "^15.10.1",
"@contentful/rich-text-types": "^15.10.1",
"@fontsource/heebo": "^4.5.2",
"babel-plugin-styled-components": "^2.0.2",
"dotenv": "^10.0.0",
"framer-motion": "^5.5.5",
"gatsby": "^4.8.1",
"gatsby-background-image": "^1.6.0",
"gatsby-plugin-image": "^2.4.0",
"gatsby-plugin-react-helmet": "^5.4.0",
"gatsby-plugin-robots-txt": "^1.6.14",
"gatsby-plugin-sharp": "^4.4.0",
"gatsby-plugin-sitemap": "^5.4.0",
"gatsby-plugin-styled-components": "^5.4.0",
"gatsby-source-contentful": "^7.14.0",
"gatsby-transformer-sharp": "^4.4.0",
"gbimage-bridge": "^0.2.0",
"gsap": "^3.9.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-icons": "^4.3.1",
"react-image-gallery": "^1.2.7",
"styled-components": "^5.3.0"
},
"devDependencies": {
"prettier": "^2.5.1"
},
"repository": {
"type": "git",
"url": "https://github.com/bagseye/barcadia"
},
"bugs": {
"url": "https://github.com/bagseye/barcadia/issues"
}
}
编辑：这是 gatsby-config 文件：
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.org/docs/gatsby-config/
*/
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
siteMetadata: {
title: "Patrick Lemmer",
description: "Portfolio Website",
author: "Morgan Baker",
twitterUsername: "patricklemmer",
githubUsername: "patricklemmer",
instagramUsername: "patrick_lemmer",
linkedinUsername: "patricklemmer",
youtubeUsername: "patricklemmer",
image: "/macbook-color.jpg",
siteUrl: "https://patricklemmer.dev",
developerName: "Patrick Lemmer",
developerUrl: "https://patricklemmer.dev",
},
/* Your site config here */
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sitemap`,
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
// Learn about environment variables: https://gatsby.dev/env-vars
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
},
},
{
resolve: "gatsby-plugin-robots-txt",
options: {
host: "https://barcadia.netlify.com",
sitemap: "https://barcadia.netlify.com/sitemap.xml",
policy: [{ userAgent: "*", allow: "/" }],
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-styled-components`,
`gatsby-plugin-image`,
],
}
问题：是否有人知道要做什么或要寻找什么？任何帮助表示赞赏。 TIA
【问题讨论】：
-
你能分享一下
gatsby-config.js吗？ -
当然，刚刚。 @FerranBuireu
-
环境文件是否命名为
.env.development？ -
是的，它包含空间的 SpaceID 和访问令牌。
标签： gatsby contentful