Руководство по началу работы с Gatsby

Gatsby — это бесплатная платформа с открытым исходным кодом на основе React для создания статических сайтов.

Fast in every way that matters.

На следующей картинке скриншот главной страницы официального сайта: описание рабочего процесса Гэтсби.

Основными технологиями применения Gatsby являются React и GraphQL.Использование Gatsby для создания простого статического сайта — хороший процесс обучения. В этой статье в основном объясняется процесс создания простой структуры личного блога с нуля, а также процесс самостоятельного изучения и устранения некоторых ошибок.

Создав этот простой проект, вы узнаете:

• Процесс сборки Гэтсби
• Простое использование GraphQL
• Функциональные компоненты в React
• CSS Module
• CSS in JS
• SEO-оптимизация
• быстрое развертывание
• Netlify CMS

Адрес склада данной статьи:GitHub.com/destiny Таоэ…

Предварительное знание

• React: просто нужно знать основы React, особенно синтаксис JSX.
• GraphQL: понимание базового использования запросов

Вот рекомендуемая станция BНачало работы с GraphQLУчебное видео по GraphQL может занять час или два, чтобы быстро начать работу.

Начинать

Установить строительные леса Гэтсби

npm install -g gatsby-cli

Общие команды, предоставляемые строительными лесами Gatsby:

• gatsby new [projectName] [starter]: создать новый проект на основе стартового
• gatsby develop: включить горячую загрузку среды разработки
• сборка гэтсби: упакована под паблик
• gatsby serve: после упаковки запустите локальную службу для тестирования упакованного файла производственной среды.

Новый проект

gatsby new gatsby-start

gatsby по умолчанию будет использовать gatsby-starter-default для создания новых проектов.Вы можете добавить другие стартовые адреса GitHub для инициализации проектов с помощью этого стартера.

starter

Концепция стартера — это шаблон инициализации, который вы можете разработать на основе этого шаблона. В этой статье используется самая базовая версия gastby-starter-hello-world, которая содержит только основные зависимости: react, graphql и prettier.

gatsby new gatsby-start https://github.com/gatsbyjs/gatsby-starter-hello-world

• Другие стартеры можно посмотретьОфициальный сайт

Если вы используете другие стартеры, при установке зависимостей может возникнуть ошибка: проверка предварительной сборки pngquant не удалась. Решения можно найти нижеОптимизация изображения Гэтсбичасть.

Стартовый проект

cd gatsby-start
gatsby develop
# 或者
yarn develop

Открытьlocalhost:8080Посмотреть сгенерированную страницу, которую можно открытьlocalhost:8000/__graphiqlИнтерфейс отладки GraphiQL.

GraphiQL

GraphiQL — это интерфейс отладки для GraphQL, где вы можете просмотреть все данные и узнать, возвращает ли оператор запроса отладки соответствующие данные.

Gatsby также улучшил этот интерфейс, добавив боковую панель Explorer, мы можем щелкнуть, чтобы выбрать ее прямо слева, и оператор запроса может быть сгенерирован автоматически.

Создать страницу

Вам просто нужно знать React, чтобы написать страницу.

существуетsrc/pages/В каталоге создайте новый файл JS. существуетsrc/pages/Для страниц в каталоге Gatsby автоматически добавит маршруты для создания страниц.

Давайте создадимabout.jsдокумент:

import React from 'react'

export default () => (
  <div>
    <h1>About destiny</h1>
    <p>location: SHEN ZHEN</p>
  </div>
)

затем откройтеlocalhost:8000/aboutПросмотр страницы

общие компоненты

существуетsrcкаталог, создайтеcomponentsПапка, название которой не фиксированное, а общепринятое, используемое для размещения файлов компонентов.

Давайте попробуем создатьHeaderкомпоненты.

Создать первымheader.jsдокумент:

import React from 'react'
// Link 是由 Gatsby 封装好的用于跳转链接的组件
import { Link } from 'gatsby'

export default () => (
  <header>
    <Link to="/">
      <h1 style={{display: 'inline'}}>Destiny'Note</h1>
    </Link>
    <Link style={{float: 'right'}} to='/about'>About</Link>
  </header>
)

потом на страницеaboutПрименение в:

import Header from '../components/header'
export default () => (
  <div>
  	<Header />
    <!-- 省略 -->
  </div>
)

компонент макета

Мы можем создать общий компонент макета для реализации некоторых общих стилей и логики. мы вcomponentsСоздано в каталогеlayout.jsдокумент

import React from 'react'
import Header from './header'

export default ({ children }) => (
  <div
    style={{
      margin: '0 auto',
      maxWidth: '650px',
      padding: '2rem';
      paddingTop: '3rem'
  >
    <Header />
    {children}
  </div>
)

затем вabout.jsа такжеindex.jsможно применить в файле.

// about.js
import React from 'react'
import Layout from '../components/layout'
export default () => (
  <Layout>
    <!-- 省略 -->
  </Layout>
)
// index.js
import React from 'react'
import Layout from '../components/layout'
export default () => (
  <Layout>
    <!-- 省略 -->
  </Layout>
)

Применить стили

нормальный стиль

существуетsrcкаталог, создатьstylesПапки также не ограничены. Путь к файлу css также настраивается вами.

Нужно только ввести в компонент страницы или другие компоненты

import '../styles/xxx.css'

Применение глобальных стилей

мы можемstylesСоздано в каталогеglobal.cssдокумент:

html {
  background-color: lightblue;
}

Затем в корневом каталоге создайтеgatsby-browser.jsфайл, обратите внимание, что имя файла фиксировано:

import "./src/styles/global.css"
// 或者使用 require
// require('./src/styles/global.css')

Просто импортируйте файл стиля.

Установите глобальную функцию стиля, которая в основном используется для инициализации некоторых стилей по умолчанию и общедоступных стилей. На самом деле внедрение обычных css-файлов носит глобальный характер, и нет модульности CSS, о которой речь пойдет позже.

Использование Sass

Вы также можете использовать препроцессор sass.

Установить зависимости

yarn add node-sass gatsby-plugin-sass

Если вы не можете скачать node-sass, вы можете попробовать установить источник вашего менеджера пакетов на источник Taobao.yarn config set registry http://registry.npm.taobao.org

затем найтиgatsby-config.jsфайл, вpluginsДобавьте в поле:

plugins: [
  //...
  `gatsby-plugin-sass`
]

Затем используйте sass напрямую

Следует отметить, что установка новых зависимостей и редактирование файла js в корневом каталоге требует перезапуска проекта.

CSS Module

Это очень важная часть, CSS-модули могут уменьшить глобальное загрязнение, предотвратить конфликты имен и переопределения стилей. Модуль CSS предназначен для применения файла CSS только к компоненту, не затрагивая другие внешние стили.

Принцип реализации модуля CSS состоит в том, чтобы изменить все имена модульных классов на уникальные имена, то есть добавить несколько уникальных префиксов или суффиксов. Таким образом, стили, написанные разными людьми, не будут перезаписываться и конфликтовать в проекте.

В Gatsby мы называем наши модульные файлы CSS какxxx.module.css, обратите внимание на его суффикс. Нам просто нужно написать его в соответствии с обычным файлом CSS:

.container {
  background: red;
  margin: 0 auto;
}

Затем импортируйте в компонент:

import React from "react"
// 引入这个文件，得到的是所有的类名映射对象
import containerStyles from "../styles/container.module.css"

// 在 HTML 元素上添加类名，需要像下面这样，使用映射后的类名
export default ({ children }) => (
  <div className={containerStyles.container}>{children}</div>
)

Вы можете открыть консоль, чтобы увидеть сгенерированные имена классов.

CSS in JS

Это еще одно новое знание: CSS в JS заключается в написании стилей, встроенных в файлы JS. Как и модуль CSS, он призван решить проблему модульности CSS.

Принцип CSS в JS: автоматически добавить уникальное имя класса к элементу, где написан встроенный стиль, а затем сгенерировать файл CSS и поместить в него соответствующее имя класса и стиль.

На официальном сайте Гэтсби рекомендуются две библиотеки:Emotionа такжеStyled Component. Здесь используется эмоция.

В Гэтсби оба написаны одинаково.

Установить зависимости:

yarn add gatsby-plugin-emotion @emotion/core @emotion/styled

после этогоgatsby-config.jsДобавьте плагин в файл:

plugins: [
  //...
  `gatsby-plugin-emotion`
]

использовать:

// header.js
import React from 'react'
import { Link } from 'gatsby'
// 两种写法，一个是用 styled，一个是用 css
import styled from "@emotion/styled"
import { css } from "@emotion/core"

// 模板字符串的写法，实际上就是函数传参
// styled 返回的是一个组件，方便复用元素
const Title = styled.h1`
	display: inline；
`
export default () => (
   <Title>Destiny'Note</Title>
)

// css 返回的是样式对象，方便复用样式
const inline = css`
	display: inline；
`
export default () => (
	<h1 css={inline}>Destiny'Note</h1>
)
// 或者直接内联编写
export default () => (
	<h1 css={css`
		display: inline；
	`}>Destiny'Note</h1>
)

Теперь вы можете попробовать изменить все свои компоненты, чтобы они были написаны так.

Типографика в стиле типографики

Typography.js — это библиотека JavaScript, которая позволяет вам устанавливать макет вашего веб-сайта в соответствии с уже существующими темами макета, а также настраивать макет. По сути, это библиотека, которая использует шрифты и высоту строки для набора текста.

Зависимости при установке: последняя тема макета, вы можете выбрать свою любимуютема.

yarn add gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

существуетgatsby-config.jsВнедрить плагины в:

plugins: [
  //...
  // 插件的两种写法，没有配置，就是字符串，需要配置则是一个对象
  {
    resolve: `gatsby-plugin-typography`,
  	options: {
    	pathToConfigModule: `src/utils/typography`, // typography 配置文件路径
  	},
  }
]

существуетsrcСоздаватьutils/typography.jsдокумент:

import Typography from 'typography'
import fairyGateTheme from 'typography-theme-fairy-gates'

// 自定义
const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: ["Avenir Next", "sans-serif"],
  bodyFontFamily: ["Georgia", "serif"],
})
// 使用主题
const typography = new Typography(fairyGateTheme)
export default typography

Перезапустите проект, чтобы увидеть текущий стиль макета страницы.

Конкретный API можно посмотреть на официальном сайте

Получить данные в GraphQL

Сначала мыgatsby-config.jsфайл созданsiteMatedata:

module.exports = {
  siteMetadata: {
    title: `Destiny'Note`,
    author: `destiny`
  },
  plugins: [
    //...
  ]
}

В компоненте, как мы должны получить данные? В Гэтсби его нужно разделить на две формы.

Компонент страницы получает данные

В компоненте страницы нам нужно вызвать метод graphql, предоставленный Gatsby, для запроса данных: Gatsby сам обработает их.

// about.js
import React from 'react'
import Layout from '../components/layout'
import {graphql} from 'gatsby'

// GraphQL 获取的数据，会当做参数传递到页面组件中
// 数据的形式是 {errors， data}，没有错误则不会有 errors
export default ({data}) => (
  <Layout>
    <h1>About ${data.site.siteMetadata.author}</h1>
    <p>location: SHEN ZHEN</p>
  </Layout>
)

// 调用 graphql 方法获取数据，返回的是 Promise
// 变量名没有规定
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

Нестраничные компоненты получают данные

Чтобы нестраничные компоненты могли получать данные, необходимо объединить два API: useStaticQuery и graphql.

// header.js
import React from 'react'
import { Link, useStaticQuery, graphql } from 'gatsby'
import { css } from '@emotion/core'

export default () => {
  // 使用 useStaticQuery 包裹 graphql 查询，实际上相当于 async/await，等待返回数据
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  return (
    <header css={css`margin-bottom: 1.5rem`}>
      <Link to="/">
        <h1 css={css`display: inline`}>
          {data.site.siteMetadata.title}
        </h1>
      </Link>
      <Link to="/about" css={css`float:right;`}>About</Link>
    </header>
  )
}

Получить данные файла

Гэтсби может использовать несколько исходных плагинов для преобразования всех аспектов данных во что-то, что может быть получено локально через GraphQL. Например, gatsby-source-filesystem, gatsby-source-wordpress и т. д. В других системах управления контентом в основном есть локальные файлы и данные, которые можно использовать для переноса данных. Здесь объясняется только получение данных локального файла.

gatsby-source-filesystem

Установите плагин:

yarn add gatsby-source-filesystem

Затем добавьте плагины и конфигурацию:

plugins: [
  //...
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      path: `${__dirname}/src`,// 文件路径
      name: 'src', // 名称，可以用来过滤
      ignore: [] // 可选的，忽略的文件
    }
  },
  // 如果需要再获取第二个文件夹，可以再设置一遍
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      path: `${__dirname}/src/_posts`,// 文件路径
      name: 'posts' // 名称，可以用来过滤
    }
  }
]

Этот плагин добавляет два поля данных, allFile и file, в GraphQL, который содержит множество полей, и вы можете просматривать graphiql самостоятельно.

пройти черезsourceInstanceNameдля фильтрации начальных настроекname :

Для конкретного использования см.Документация

На данный момент мы можем получить некоторые данные файла через GraphQL.

Создание страниц из данных файла

Давайте создадим страницуmy-file.js: показать представление, просмотреть текущееsrcинформация о файле

import React from 'react'
import { graphql } from 'gatsby'

export default ({ data }) => (
  <Layout>
    <div>
      <h1>My Site's Files</h1>
      <table>
        <thead>
          <tr>
            <th>relativePath</th>
            <th>prettySize</th>
            <th>extension</th>
            <th>birthTime</th>
          </tr>
        </thead>
        <tbody>
          {data.allFile.edges.map(({ node }, index) => (
            <tr key={index}>
              <td>{node.relativePath}</td>
              <td>{node.prettySize}</td>
              <td>{node.extension}</td>
              <td>{node.birthTime}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </Layout>
)

export const query = graphql`
  query {
    allFile(filter: { sourceInstanceName: { eq: "src" } }) {
      edges {
        node {
          relativePath
          prettySize
          extension
          birthTime(fromNow: true)
        }
      }
    }
  }
`

Плагин конвертера

В общем, формат данных, полученных из исходного плагина, не тот формат, который вам нужен. Конвертер Gatsby поддерживает плагины, эти плагины-конвертеры позволяют получить исходный контент из исходного плагина и преобразовать его во что-то более полезное.

Например, файл MARKDOWN, который необходимо преобразовать в HTML при построении страницы.

gatsby-transformer-remark

Функция gatsby-transformer-remark состоит в том, чтобы извлечь данные файла md из данных, преобразованных файловой системой, выполнить определенное преобразование, а затем сохранить их в GraphQL.

Установите плагин:

yarn add gatsby-transformer-remark

Добавить плагин:

plugins: [
  //...
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      "excerpt_separator": `<!-- more -->` // 设置摘要分隔符
    }
  }
]

Этот плагин добавляет два поля данных: allMarkdownRemark и markdownRemark.

• Документация

Простого использования этого конвертера может быть недостаточно, вы можете посетить официальный сайт, чтобы найти другиеплагин, такие как: mdx, другие замечания и т.д.

Создать образец статьи

существуетsrcСоздать под_postsкаталог, добавьтеfirst.mdдокумент:

---
title: Hello World
date: 2019-11-07
---
# Hello World

hello, destiny

​```js
function info() {
	return {
		name: 'destiny',
		age: 16
	}
}
​```

начало файла---Завернутый является главным

Также создайте еще одинsecond.mdдокумент.

Показать на главной странице

Получить данные статьи и отобразить их на главной странице

// index.js
import React from 'react'
import Layout from '../components/layout'
import { Link, graphql } from 'gatsby'
import { css } from '@emotion/core'

export default ({ data }) => (
  <Layout>
    <div>
      <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.id}>
          <h3 css={css`margin-bottom: 1rem}`}>
            {node.frontmatter.title}{' '}
            <span css={css`color: #bbb`}>
              — {node.frontmatter.date}
            </span>
          </h3>
          <p>{node.excerpt}</p>
        </div>
      ))}
    </div>
  </Layout>
)
// 这里对数据根据 frontmatter 中的 date 进行排序
export const query = graphql`
  query {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`

Программное создание страниц

Мы не можем сделать это для каждой статьиpagesСоздайте файл ниже, поэтому нам нужно написать код для автоматического создания страницы, Gatsby предоставляет два API:onCreateNode,createNodeField,createPagesа такжеcreatePage.

Создать в корневом каталогеgatsby-node.jsфайл, имя фиксированное. Напишите сюда логику.

Разделен на два шага:

• генерироватьpathилиslugкак путь
• Создать страницу создания на основе пути

const path = require('path')
const { createFilePath } = require(`gatsby-source-filesystem`)

// 每当 GraphQL 数据中创建（或更新）新节点时，Gatsby 都会调用此函数
// 注意，这个名称是固定的
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  
  // 在 GraphQL 数据中创建的节点类型是 MarkdownRemark
  if (node.internal.type === `MarkdownRemark`) {
    // 根据文件名创建 slug
    let slug = createFilePath({ node, getNode, basePath: `posts` })
    // 通过 createNodefield 在当前字段的 fields 下创建一个数据字段
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

// 创建页面，这个名称是固定的
exports.createPages = async ({ graphql, actions }) => {
  // 获取到 createPage 方法
  const { createPage } = actions
  // 查询所有 md 文件数据
  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
						frontmatter {
							path
						}
          }
        }
      }
    }
  `)
  // 逐个创建相应的页面
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    let path = node.frontmatter.path || node.fields.slug; // 可以使用自定义路径
    createPage({
      path,
      // 创建页面需要模板组件
      component: path.resolve(`./src/templates/post.js`),
      context: {
        // 传递给模板组件中在查询时, 接收的变量值
        path
      },
    })
  })
}

компонент шаблона

Все статьи отображаются с использованием одного и того же шаблона. существуетsrcкаталог, создатьtemplatesпапка, добавитьpost.js:

import React from 'react'

export default function Post({data}) {
  const {markdownRemark: post} = data
  return (
    <div>
      <h1>{post.frontmatter.title}</h1>
    </div>
  )
}
// $path 是生成页面时的 context 中带上的变量，名称前面加上 $ 符
export const postQuery = graphql`
  query ($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        path
        title
      }
    }
  }
`

оптимизация

Добавить поддержку PWA

Требуются два плагина:gatsby-plugin-manifestа такжеgatsby-plugin-offline.

Установить зависимости:

yarn add gatsby-plugin-manifest gatsby-plugin-offline

Добавить плагин:

plugins: [
  //...
  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `Destiny'Note`,
      short_name: `Destiny`,
      start_url: `/`,
      background_color: `#6b37bf`,
      theme_color: `#6b37bf`,
      display: `standalone`,
      icon: `src/images/icon.png`,
    },
  },
  `gatsby-plugin-offline` // 这个插件必须在 manifest 后面
]

добавить соответствующийicon.png

SEO-оптимизация

добавить метаданные

Установить зависимости:

yarn add gatsby-plugin-react-helmet react-helmet

существуетgatsby-config.jsдобавлено вsiteMetadataи плагин:

{
  siteMetadata: {
    // 这三个属性必须要有
    title: `Destiny'Note`,
    author: `destiny`,
    description: `my own blog`,
    keywords: `react, graphql, gatsby`
  },
  plugins: [
    //...
    `gatsby-plugin-react-helmet`
  ]
}

существуетsrc/componentsувеличить внизseo.jsдокумент:

import React from "react"
import PropTypes from "prop-types"
import Helmet from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
function SEO({ description, lang, meta, keywords, title }) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  )
  const metaDescription = description || site.siteMetadata.description
  const metaKeywords = keywords.join(',') || site.siteMetadata.keywords
  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          name: `keywords`,
          content: metaKeywords
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}
// 默认配置
SEO.defaultProps = {
  lang: `zh-CN`,
  meta: [],
  description: ``,
}
SEO.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}
export default SEO

Затем добавьте соответствующие компоненты SEO на все страницы.

// post.js
import SEO from '../components/seo'

export default ({ data }) => {
  const { markdownRemark: post } = data
  return (
    <Layout>
      <SEO title={post.frontmatter.title} description={post.excerpt} />
      <!-- else -->
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
      excerpt
    }
  }
`

Обзор производительности с Chrome LightHouse

Сначала запакуйте файлы:

yarn build

Затем запустите производственный код:

yarn serve

Открытьlocalhost:9000смотреть

Откройте консоль и нажмитеAuditстолбец:

Проверьте все элементы аудита, затем нажмите «Выполнить аудит», подождите некоторое время, чтобы увидеть интерфейс аудита.

Gatsby Imgae Оптимизация

основные навыки

В Gatsby вы можете импортировать изображения следующим образом:

• Используйте относительные пути
• использоватьstaticпапка, потому что все файлы в статической папке будут скопированы непосредственно в общедоступную, поэтому путь может напрямую использовать статический в качестве корневого каталога для ссылки на изображения
• импортировать изображения с помощью веб-пакета

import logo from "./logo.png"
console.log(logo); // 是一个经过 webpack 编译后的路径
function Header() {
  return <img src={logo} alt="Logo" />
}

Давайте представим Gatsby Image, который помогает нам оптимизировать изображения для более быстрого отображения на странице. это будет вpublic/staticСжатые изображения различного разрешения генерируются при следующих условиях, и эти изображения будут загружаться по запросу.

зависимости и конфигурация

Сначала установите зависимости:

yarn add gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

затем вgatsby.config.jsВнедрить плагины в:

plugins: [
  `gatsby-transformer-sharp`,
  `gatsby-plugin-sharp`,
  { 
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `./static/assets/`， // 图像存在的位置，我们统一修改为 ./static/assets/ 中
      name: `image`
    }
  }
]

BUG

В процессе установки зависимостей может произойти ошибка предварительной сборки pngquant из-за того, что gatsby-plugin-sharp зависит от пакета с именем pngquant-bin, и есть проблема с загрузкой этого пакета.

Вы можете обратиться к следующему вопросу:

• pngquant-bin@5.0.1 postinstall: node lib/install.js #97
• pngquant-bin@5.0.2 postinstall #104

Большинство этих проблем возникает в системах Linux. Большинство проблем в первую очередь вызвано:Use raw.githubusercontent.com instead of raw.github.com for binaries #99, этот PR был объединен с исходным кодом, чтобы сформировать версию 5.0.2, которая, кажется, решает проблемы некоторых людей. Тем не менее, все еще есть большое количество проблем, отправленных позже, и все они имеют такие проблемы в 5.0.2.

Под Linux это может быть решено установкой libpng-dev, вы можете проверитьGatsby on Linux

В Windows можно просмотретьGatsby On Windows

Под Mac пока нет руководства по использованию. Вы можете попробовать выполнить следующие действия:

• Сначала установите другие пакеты, не зависящие от pngquant-bin, и, наконец, установите пакеты, зависящие от pngquant-bin.
• При установке последнего пакета будет сообщено об ошибке: не удалось выполнить предварительную сборку pngquant test. Или вы останавливаетесь, когда загрузка завершена, и останавливаетесь при компиляции.

• затем откройтеnode_modules/pngquant-bin/lib/index.js
• Установите его снова, обратите внимание, что во время запущенного процесса, когда будет достигнут вышеуказанный этап, измените найденныйindex.jsфайл, будетgithubusercontentизменить наgithub

Теперь, когда это сделано, вы можете запустить проект напрямую. Однако при повторной установке пакета позже такая проблема все равно будет.

изображение запроса

export const query = graphql`
  query {
    file(relativePath: { eq: "headers/headshot.jpg" }) {
      childImageSharp {
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
				fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

• Относительные пути относятся к конфигурацииpathпуть на основе
• использоватьGatsbyImageSharpFixedВозвращает изображение фиксированной ширины и высоты.
• использовать фрагментGatsbyImageSharpFluidВозвращает адаптивные изображения, которые будут заполнять свой контейнер, а не соответствовать определенному размеру.

отображать изображение

import Img from "gatsby-image"
export default ({data}) => (
  <Img
  	className="headshot"
  	fixed={data.file.childImageSharp.fixed} // 使用数据进行渲染
  	alt="headshot"
	/>
)

Подробности смотрите в учебнике:

• Gatsby Image tutorial
• Gatsby Image API

развертывать

surge

Установить всплеск:

npm install -g surge

Войдите или создайте учетную запись:

surge login

Вам будет предложено ввести адрес электронной почты и пароль.Если у вас нет учетной записи, она будет создана вами самостоятельно.

После упаковки кода:

surge public/ # 发布 public 文件夹下的文件
# 或者
cd public
surge

Затем появятся проект и домен. Если вы остаетесь в проекте, не забудьте нажать Enter. После появления домена домен появляется случайным образом, и домен можно изменить.Формат должен быть xxx.surge.sh. Затем возврат каретки, возврат каретки, возврат каретки.

В первый раз, когда я использовал его, я думал, что он автоматизирован, вообще без подсказок и инструкций, а потом я продолжал думать, что он застрял. Ввод этого доменного имени не является вашей собственной веб-страницей, поэтому не забудьте нажать Enter. После нажатия Enter, если кто-то развернет доменное имя, появится запрос и произойдет сбой.

• Официальный сайт

GitHub Pages

Страницы GitHub необходимо зафиксировать в репозитории GitHub, а код развертывания будет опубликован в ветке gh-page.

yarn build
cd public

git init
git add -A
git commit -m 'update'

git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

Затем нажмите на складSettings, Найдите GitHub Pages, выберите Source в качестве ветки gh-pages и нажмите OK.

Netlify

Netify используется как для развертывания, так и для систем управления контентом. Вы можете развернуть веб-страницы в Netlify, вы также можете опубликовать свою систему CMS и войти в свою развернутую CMS, чтобы публиковать и изменять статьи в любое время без публикации в вашей локальной кодовой базе.

Установить зависимости:

yarn add netlify-cms-app gatsby-plugin-netlify-cms

Добавить плагин:

plugins: [
  `gatsby-plugin-netlify-cms`,
  //...
]

Проверьте конфигурацию плагина для деталейОфициальный сайт

Затем вstaticкаталог, создатьadmin/config.ymlдокумент:

backend:
  name: github
  repo: <username>/<repo>

media_folder: static/assets # 媒体文件，一般是图片的存储路径
public_folder: assets # 媒体文件夹名称

display_url: https://your-website.cn # CMS 上展示一个指向你的网站的 URL

collections: # 收藏集，CMS 的侧边栏分类
  - name: blog
    label: Blog
    folder: src/posts
    create: true  # 允许新增
    fields: # 编辑文件时，需要填写的数据，会将其放在 frontmatter 中
      - { name: path, label: Path, required: false }
      - { name: date, label: Date, widget: date }
      - { name: title, label: Title }
      - { name: tags, label: Tags,  widget: list}
      - { name: categories, label: Categories,  widget: list}
      - { name: body, label: Body, widget: markdown }

Посмотреть конкретную конфигурациюКонфигурационный файл Netlify

В среде разработки можноlocalhost:8000/adminПросмотрите интерфейс вашей CMS в формате .

Наконец, упакуйте код и загрузите его на GitHub, чтобыapp.netlify.comЗарегистрируйте учетную запись, затем создайте новый веб-сайт, свяжите свой репозиторий GitHub и разверните проект в Netlify.

После этого нужно получитьGitHub  OAuth token, после входа на страницу нажмите Новое приложение OAuth.

Уведомление: URL-адрес домашней страницы может быть установлен на ваш адрес развертывания, нет жестких требований. Однако конечный URL-адрес обратного вызова должен быть установлен наhttps:api.netlify.com/auth/done, иначе авторизация на странице CMS невозможна.

После завершения настройки нажмите и найдите clientID и clientScret.

Затем в Netlify, в интерфейсе настроек вашего развернутого проекта, найдите Контроль доступа, нажмите «Установить поставщика» и вставьте clientID и clientScret.

После этого вы можете получить доступ к интерфейсу управления вашей CMS.

Ссылаться на

• Gatsby tutorial