共计 2261 个字符，预计需要花费 6 分钟才能阅读完成。
SEO
做什么
设置 document head 内容，比如 title, favicon, description
添加 meta-tags，比如 openGragh, Twitter Card
怎么做
方式一：创建依赖 helmet 的 SEO 组件，在 page 中引用组件，通过 props 自定义 meta
方式二：自定义 html.js，修改 head 内容管理全局 meta
在当前项目中，使用方式一管理全局和自定义 meta
Tips
修改 favicon
需要引用 favicon 文件覆盖默认设置
import favicon from “../../static/favicon.ico”;
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s · ${data.site.siteMetadata.title}`}
link={[
{
rel: `shortcut icon`,
href: `${favicon}`,
type: `image/x-icon`
}
]}
/>
i18n
做什么
为基础内容添加多语言支持
怎么做
方式一：React-intl + Context API
借助 Context API 实现语言切换。Context Provider 提供 lang 和 toggleLanguage 属性，Context Consumer 接收并使用 Provider 提供的属性 (可将 Consumer 封装为高阶组件)
React-intl 提供语言格式化
方式二：React-i18next + gatsby-plugin-i18next
react-i18next 提供已封装好的高阶组件
gatsby-plugin-i18next 做初始化处理
方式一在 Layout 内包裹 Provider，在 page 中无法使用高阶函数调用 Intl 对象
代码规范
Gatsby 默认使用 Prettier 做代码格式化，webpack 中携带 eslint-loader，可通过 gatsby-plugin-eslint 插件自定义设置。若想用 eslint 代替 Prettier 做格式化功能，可按照官方文档走 https://www.gatsbyjs.org/docs…
当前项目配置
editorconfig 协助开发工具做简单格式化，覆盖开发工具默认格式设置，如缩进格式，缩进占位等
prettier 格式化代码，统一代码风格和样式，代替 eslint –fix 的作用。搭配 IDE 插件使用
eslint 检查代码规范
https://juejin.im/entry/5b10b…
样式管理
官方提供的几种方案
CSS Modules：CSS 文件作为模块导入组件，赋值给一个对象，组件中使用对象属性应用样式。简单介绍
Typography.js：通过 JS 生成不同主题的排版格式 – DEMO
CSS-in-JS Glamor：通过组件上的 css 属性定义样式，与组件紧密耦合
import React from “react”
const Container = ({children}) => (
<div css={{margin: `3rem auto`, maxWidth: 600}}>{children}</div>
)
CSS-in-JS Styled Components
import React from “react”
import styled from “styled-components”
const Container = styled.div`
margin: 3rem auto;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
`
export default () => (
<Container>
<h1>About Styled Components</h1>
</Container>
)
全局样式，以传统 css 文件形式存在，在组件中引入或者在 gatsby-browser.js 中引入
试着玩一玩 CSS-in-JS Glamor、CSS Modules
GraphQL 数据查询
GraphQL 允许开发者使用数据结构声明查询对应结构的数据，查询语法支持限制、排序、筛选、格式化
部署
用 gitpage 的方式已经有点老了，不如试试看 Netlify。
Netlify：持续集成工具，从远程仓库自动部署静态站点，支持自定义域名，HTTPS，全局 CDN.
Gatsby 集成很方便
Plugins 列表
gatsby-plugin-root-import 设置 webpack 解析根目录，来支持使用绝对路径导入模块
gatsby-plugin-react-helmet 支持 React Helmet，React Helmet 是用来控制 document head 的组件，可在任意位置使用
gatsby-plugin-manifest 添加 manifest 文件，https://www.gatsbyjs.org/docs…
gatsby-plugin-i18next 支持 react-i18next
工具推荐
favicon 生成 https://www.favicon-generator…
图标 https://www.flaticon.com/ – 优质的免费图标
TODO
i18n 目前无法在 page 层使用 intl 对象, 考虑 i18next 替代
DOING
blog 迁移到站点内部
DONE
项目仓库：https://github.com/curlywater… 线上效果：https://curlywater.netlify.com
