使用Netlify+Gatsby+Github 创建超快免费静态网站

生活 Mar 09, 2020
1

开发环境配置

以 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 中配置。

席一舟

四野八荒,苦茶清禅。渔樵江渚,浊酒西风。 螽斯蓝寿,稀禾芡菱。嬉笑怒骂,行藏自由。 策马悬崖,雕弓满月。惊涛拍岸,毕力遐方。 银鞍白马,一剑寒霜。此生谁料,咸是妙明。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.