开发环境配置
以 Window10 为例
1. 安装 npm
在 Windows 系统中安装 node.js：
下载安装 Windows 版 node.js。安装完成后，默认的安装路径为 C:/Program Files/nodesjs 目录。
按 Win+R 在运行窗口输入 cmd，点确定打开 CMD命令提示符界面，在CMD窗口中输入 node -v，显示出安装的版本号表示安装成功。
如果提示无效命令，选中“计算机”->右键->“属性”->“高级系统设置”->“环境变量”->“系统变量”，找到 PATH变量并双击，在后面添加;C:/Program Files/nodesjs 。记得在前面加上分号，与前面的路径分隔。点“确定”按钮保存配置 重新在CMD窗口中输入 node -v。显示出安装的版本号，安装成功。
在 CMD 窗口中输入 npm -v，显示出安装的版本号，安装成功。
2. 安装 Git 或 Gitdesktop
-
打开 CMD 或 Git Bash ，配置 Github 账号密码。
$ git config --global user.name "Github" $ git config --global user.email "github@github.com"
3. 每次重要操作记得备份
本地部署 Gatsbyjs
全局安装命令行接口 Gatsby CLI
$ npm install -g gatsby-cli
创建存放文件的文件夹
导航到指定文件夹
$ cd c:/users
选择 Gatsby 官网或 Github 上的 stater 创建一个新站点
$ gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-blog
# 这里使用了gatsby官方提供的一个blog模板
导航到 gatsby-site
$ cd c:/users/gatsby-site
本地配置
启动本地开发服务器
$ gatsby develop
- 执行 gatsby develop ，此时 Gatsby 会自动启动热更新后台服务器，地址为: localhost:8000
- 自己可以尝试修改 src/pages 目录下的文件，保存后，会马上热更新到浏览器的页面上。
创建生产版本
$ gatsby build
此时 Gatsby 会在 public 目录下构建生产环境用的优化过的静态网站所需的一切静态资源、静态页面与 js 代码。如果要发布到自己的网站空间上，可以直接把此目录下面所有东西(除.map为后续的文件名的文件)丢过去自己的空间。
- 项目中不允许在componentDidMount()之外出现window对象
- 若想要引入外部的 jss文件，可使使用 react-helmet 插件。react-helmet 插件：管理对文档头所有的更改，纯输入输出 html 标记
import Helmet from 'react-helmet'
<Helmet>
<meta charSet="utf-8" />
<title>demo</title>
<html lang="en" />
<script type="text/javascript" src="https://baidu.com"></script>
</Helmet>
启动一个本地的 html 服务器测试构建的站点
$ gatsby serve
此时Gatsby会启动静态网页服务器供你测试刚才“gatsby build”生成的静态网页
使用插件（以 disqus 为例）
在Gatsby 插件库中找到你需要的disqus插件 导航到 项目目录
cd c:/users/gatsby-site
安装插件，安装成功后通过 GitHub desktop 可以看到 package.json 和package-lock.json中 添加了 disqus的版本等信息。
npm install -S gatsby-plugin-disqus
在 gatsby-config.js 配置你的 Disqus shortname，
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-disqus`,
options: {
shortname: `your-disqus-shortname`
}
},
]
}
如果已经有使用其他插件，只需插入
{
resolve: `gatsby-plugin-disqus`,
options: {
shortname: `your-disqus-shortname`
}
},
在 templates post 对应位置插入如下代码
import { graphql, Link } from 'gatsby';
{/* 引用disqus */}
import { Disqus, CommentCount } from 'gatsby-plugin-disqus';
....
</PostFullFooter>
{/* 在合适位子引用disqus */}
<Disqus config={disqusConfig} />
</article>
</div>
</main>
用Git bash把本地项目版本上传至github
导航至gatsby-site
cd c:/users/gatsby-site
删除旧的.git 文件夹并将本地目录初始化为Git存储库
rm -rf .git && git init
将文件添加到新的本地存储库中，为第一次提交准备文件**
git add .
提交您在本地存储库中暂存的文件
git commit -m 'First commit'
在 Github 创建 Repositories，在 GitHub 存储库的“快速设置”页面的顶部，单击剪贴板图标以复制远程存储库URL，然后添加将在其中推送本地存储库的远程存储库的URL。
git remote add origin https://github.com/yougithub/gatsby-site.git
验证 URL：
git remote -v
**现在，将本地存储库中的更改推送到 GitHub **
git push -u origin master
后续本地代码修改配置，建议使用 Github Desktop 进行管理，会更直观高效。
从Github 到Netlify
用Github账号登录Netlify
选择 New Site From Git，授权 Netlify 使用 Github
选择 对应的 Repository
配置
- Branch to deploy： master
- Build command：gatsby build
- Publish directory：public/
**点击 deploy site，等待 Netlify 自动部署完成. **
后续配置
- 设置自定义域名，启用 SSL。建议使用 Netlify DNS，只需要在域名商处修改dns。A 记录和came netlify 会自动完成。
- 启用Identity ，修改 Registration preferences 为 Invite only
- 如果要使用 Netlify CMS 启用 Git Gateway
- 如果 Gatsby 插件如 Algolia 等要使用密钥，可以在 Environment variables 配置。
- 要引用 js 代码等，可以在 Post processing 中配置。
