Gatsby 入門指南

時間  2019-11-24
標籤 gatsby 入門 指南 简体版
原文   原文鏈接

Gatsby 是一個基於 React 的、免費開源的、用於搭建靜態站點的框架。javascript

Fast in every way that matters.css

下圖是官網首頁的截圖：描述了 Gatsby 的工做流程html

gatsby-works.jpg

Gatsby 主要的應用的技術是 React 和 GraphQL，利用 Gatsby 搭建一個簡單的靜態站點，是一個很好的學習過程。本文主要講解如何從零搭建一個簡單的我的博客結構的過程，也是本身學習和解決一些 bug 的過程。java

經過搭建這個簡單的項目，你能夠學習到：node

  • Gatsby 的搭建流程
  • GraphQL 的簡單運用
  • React 的函數式組件
  • CSS Module
  • CSS in JS
  • SEO 優化
  • surge 部署
  • Netlify CMS

本文倉庫地址：github.com/destinytaoe…react

前置知識

  • React：只須要對 React 基礎知識有所瞭解便可，尤爲是 JSX 語法
  • GraphQL：瞭解基本查詢用法便可

這裏推薦一個 B 站 GraphQL 入門的學習視頻，能夠花上一兩個小時快速的入門 GraphQL。linux

開始

安裝 Gatsby 腳手架webpack

npm install -g gatsby-cli
複製代碼

Gatsby 腳手架提供的經常使用命令有：git

  • gatsby new [projectName] [starter]：根據 starter 建立一個新項目
  • gastby develop：開啓熱加載開發環境
  • gastby build：打包到 public 下
  • gatsby serve：在打包以後，啓動一個本地的服務測試打包好的生產環境文件

新建項目

gatsby new gatsby-start
複製代碼

gatsby 默認會使用 gatsby-starter-default 來新建項目，你能夠在後面加上其餘 starter 的 GitHub 地址，來使用這個 starter 初始化項目。github

starter

starter 的概念就是一個初始化模板，你能夠基於這個模板進行開發。本文使用的是最基礎的版本 gastby-starter-hello-world，只包含基本的依賴：react、graphql 和 prettier。

gatsby new gatsby-start https://github.com/gatsbyjs/gatsby-starter-hello-world
複製代碼
  • 其餘 starter 可查看官網

若是你使用其餘 starter，可能會出現安裝依賴時報錯的狀況：pngquant pre-build test failed。解決方案可查看下文Gatsby 圖片優化部分。

啓動項目

cd gatsby-start
gatsby develop
# 或者
yarn develop
複製代碼

打開 localhost:8080 查看生成頁面，能夠打開 localhost:8000/__graphiql GraphiQL 調試界面。

GraphiQL

GraphiQL 是 GraphQL 的調試界面，你能夠在這裏查看全部的數據、以及調試 query 語句是否返回相應的數據。

Gatsby 還加強了這個界面，添加了 Explorer 側邊欄，咱們能夠直接在左側點擊選中，就能夠自動生成 query 語句。

建立頁面

只須要了解 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，那麼能夠嘗試將你的包管理器的源設置爲淘寶源。 yarn config set registry http://registry.npm.taobao.org

而後找到 gatsby-config.js 文件，在 plugins 字段中加上：

plugins: [
  //...
  `gatsby-plugin-sass`
]
複製代碼

而後直接使用 sass 便可

須要注意的是，安裝了新的依賴，以及編輯了根目錄下的 js 文件，須要從新啓動項目。

CSS Module

這是很是重要的一部分，CSS Module 能夠減小全局污染、防止命名衝突和樣式的覆蓋。CSS Module 即將某個 CSS 文件單獨應用於某個組件，不會影響外界其餘的樣式。

CSS Module 實現原理是：將全部模塊化的類名，修改成成惟一的名稱，即添加一些不重複的前綴或後綴。這樣使得項目中，不一樣人員編寫的樣式不會出現覆蓋和衝突。

在 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 in JS 是在 JS 文件中，使用內聯的方式編寫樣式。與 CSS Module 同樣是爲了解決 CSS 模塊化的問題。

CSS in JS 的原理：在編寫了內聯樣式的元素上，自動添加一個惟一的類名，而後生成一個 CSS 文件，將對應的類名和樣式放入其中。

Gatsby 官網中推薦了兩個庫：Emotion 和 Styled Component。這裏選用 Emotion。

在 Gatsby 中，兩個寫法相似。

安裝依賴：

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 樣式排版

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: [
    //...
  ]
}
複製代碼

在組件中，咱們應該如何獲取數據呢？在 Gatsby 中，須要分紅兩種形式。

頁面組件獲取數據

頁面組件中，咱們須要調用 Gatsby 提供的 graphql 方法來查詢數據：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>
  )
}
複製代碼

獲取文件數據

Gatsby 能夠經過一些源（source）插件將各方面的數據轉換爲本地可以經過 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' // 名稱，能夠用來過濾
    }
  }
]
複製代碼

這個插件爲 GraphQL 添加了 allFile 和 file 兩個數據字段，其中包含有不少的字段，能夠自行查看 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 的做用是將 filesystem 轉換的數據中，將 md 文件的數據抽取出來，進行必定的轉換再存儲到 GraphQL 中。

安裝插件：

yarn add gatsby-transformer-remark
複製代碼

添加插件：

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

這個插件添加了 allMarkdownRemark 和 markdownRemark 兩個數據字段

只使用這個轉換器多是不夠的，能夠查看官網查找其餘插件，如：mdx、其餘 remark 等等

建立示例文章

在 src 下建立 _posts 目錄，添加一個 first.md 文件：

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

hello, destiny

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

文件開頭的 --- 包裹的是 frontmatter

一樣再建立一個 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 優化

添加 metadata

安裝依賴：

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 欄：

light house.jpg

選中全部 Audits 項，而後點擊 Run audits，等待一會就能看到你的審覈界面。

Gatsby Imgae 優化

基本功能

在 Gatsby 中，你能夠這樣引入圖片：

  • 使用相對路徑
  • 利用 static 文件夾，由於靜態文件夾下的全部文件都會直接複製到 public 下，因此路徑能夠直接將 static 做爲根目錄來引用圖片
  • 使用 webpack import 圖片
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 pre-build test failed，這是由於 gatsby-plugin-sharp 依賴於一個叫 pngquant-bin 的包，這個包下載出現問題。

能夠參考下面的 Issue：

其中大部分出現問題都是在 Linux 系統下。一開始大部分問題出現緣由是：Use raw.githubusercontent.com instead of raw.github.com for binaries #99，這個 PR 已經合併到源碼中，造成了 5.0.2 版本，貌似解決了一些人的問題。可是，後面仍然有大量提交 issue 都是 5.0.2 出現這樣的問題。

在 Linux 下，可能安裝 libpng-dev 就能解決，能夠查看 Gatsby on Linux

在 Windows 下，能夠查看 Gatsby On Windows

在 Mac 下，暫時沒有教程指導。能夠嘗試如下步驟：

  • 先安裝其餘不依賴 pngquant-bin 的包，最後安裝依賴 pngquant-bin 的包。
  • 安裝最後一個包時，會報錯：pngquant pre-build test failed。或者，你到下載完成，在編譯的時候中止下來

pngquant-bin2.png

  • 而後打開 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" /> ) 複製代碼

具體可查看教程：

部署

surge

安裝 surge：

npm install -g surge
複製代碼

登錄或者建立帳號：

surge login
複製代碼

會讓你輸入郵箱和密碼，若是沒有帳號，會自行建立。

打包你的代碼以後：

surge public/ # 發佈 public 文件夾下的文件
# 或者
cd public
surge
複製代碼

而後，出現 project 和 domain，若是停留在 project，記得敲回車。出現 domain 以後，這個 domain 是隨機出現的，能夠修改這個 domain，格式必須是 xxx.surge.sh。而後回車、回車、回車。

我第一次使用的時候，覺得是自動化的，徹底沒有提示和說明，而後一直覺得卡住了。進入那個域名也不是本身的網頁，因此，記得回車。 回車以後若是域名有人部署了，會有提示並失敗。

GitHub Pages

GitHub Pages 則須要提交到 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 分支，肯定便可。

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，進入頁面以後，點擊 New OAuth app。

github-oauth-config.png

注意： HomePage URL 能夠設置爲你的部署地址，這個沒有硬性要求。可是，最後的 callback URL 必須設置爲 https:api.netlify.com/auth/done，不然在 CMS 頁面，沒法進行登錄。

設置完成以後，點擊進去，找到 clientID 和 clientScret。

而後在 Netlify 中，你部署的項目的設置界面，找到 Access Control，點擊 Install Provider，而後粘貼 clientID 和 clientScret。

Access Control.png

以後，便可訪問你的 CMS 管理界面。

參考

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程