开发环境配置

以 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

  • 下载 git for windows

  • 打开 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.jsonpackage-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 中配置。