一个最新搭建并且将一直保持更新的基于 gatsby 的静态博客。

• zido 的个人博客

• react/redux/单页面

• google/百度搜索统计

• seo 优化

• 美观大方

• typescript/sass

• 自带辅助工具，用于生成博文

• travis 自动集成，自动部署博客

本博客推荐使用 github-pages 等静态服务部署（教程见下文）。当然你也可以使用任何服务器部署

无论如何都需要注意如下几点：

• 不论使用何种方式部署项目，都需要使用根目录(/)暴露页面地址。也即是类似https://zido.site/这样的地址访问首页，不能使用任何前缀，目前不支持。如果使用 github-pages 部署，不使用自定义域名的情况下，项目名一定要是${用户名}.github.io，这是 github-pages 服务的规则。这之后才能使用http://${用户名}.github.io进行访问。具体细节请查看 github-pages 说明

• 本项目为单人博客，暂时不可用作团队/多人博客(无多作者配置)。

• 在编写工作配置时请务必确保当前分支不在master上

克隆仓库：执行命令git clone --depth 1 https://github.com/zidoshare/curly-succotash.git。

也可以直接 fork 本仓库，执行命令:git clone https://github.com/zidoshare/curly-succotash.git

cd culry-succotash

npm install 或者 yarn安装依赖

执行 npm run start 或者 yarn start。访问 http://localhost:8000。即可看到示例，如果没有任何问题，那么本地的样子应该与Demo保持一致。

配置文件位置主要有两个，分别是：gatsby-config.js和data/data.json。分别用于配置网站元信息和作者信息

gatsby-config.js: 作出如下配置即可

const config = {
  siteMetadata: {
    // 博客名
    title: `zido的个人博客`,
    short_name: `zido的个人博客`,
    start_url: `/`,
    icon: `data/avatar.jpg`,
    //博客简介
    description: `前后端全栈分享，java/js/golang`,
    //网站url地址，如果不是自定义域名而是采用github-pages等静态地址，请使用`${用户名}.github.io`
    siteUrl: `https://www.zido.site`,
  },
  analytics: {
    google: {
      trackingId: 'UA-120357572-1', //不想接入google统计请求空
    },
    baidu: {
      siteId: '4b78d088162a5bab97170b43a565bb06', //不想接入百度统计请求空
    },
  },
}

登陆 google 统计网站 https://analytics.google.com。点击 管理->账号->用户->翻到最下面即可知道自己的 google 统计 id。

登陆百度统计网站 tongji.baidu.com。点击 管理->网站列表->自有网站->获取代码。看到几行如下的代码：

<script>
  var _hmt = _hmt || []
  ;(function() {
    var hm = document.createElement('script')
    hm.src = 'https://hm.baidu.com/hm.js?4b78d088162a5bab97170b43a565bb06'
    var s = document.getElementsByTagName('script')[0]
    s.parentNode.insertBefore(hm, s)
  })()
</script>

其中的4b78d088162a5bab97170b43a565bb06就是你的百度统计 id。

data/data.json: 作出如下配置即可

{
  "author": {
    "name": "作者名",
    "avatar": "作者头像路径（图片务必放在data目录下）"
  },
  "speech": ["页头滚动文字", "使用数组格式", "任意长度"],
  "gitment": {
    "owner": "github用户名",
    "repo": "github用户仓库",
    "oauth": {
      "client_id": "github oauth认证id",
      "client_secret": "github oauth认证密钥"
    },
    "crossServer": "认证跨域服务器（如果不了解，请不要更改。默认服务器如过失效，请查阅本仓库，一般会及时补上最新的）"
  },
  "menu": [
    {
      "path": "/about",
      "name": "关于我"
    },
    {
      "path": "http://github.com/zidoshare",
      "name": "github"
    }
  ]
}

gitment 字段用于配置文章评论，会出现在所有 markdown 文档页面下。如：博文，通过markdown文章自定义的页面

menu 为附加菜单,如果是内部连接，请务必以/开头，否则一律视为外部链接

进入并登陆 github，用户->settings->developer settings（传送门直达）。点击new Oauth App,添加相关资料。 本人填写如下：

Application name: zido's blog
Homepage URL: https://www.zido.site
Application description: blog build by gatsby 2.0
Authorization callback URL: https://www.zido.site

点击保存即可看到相关字段，填写到配置中即可

github oauth 需要跨域连接，但静态页面无法配置跨域，所以需要一个中间服务器进行跨域代理。而原本的 gitment 项目不再维护，原作者的跨域服务器 https 证书过期，有热心 githuber 提供了自己搭建的跨域中转地址。详情见此 issues。看到有人搭建了，本着懒人策略就懒得搭建了，但是为了后续可能出现的影响使用的问题，fork 了原 gitment 项目，在设置中添加了 crossServer 字段让用户能够选择不同的跨域服务器。

如果有人觉得不错，也可以直接使用，npm install --save z-gitment安装即可，项目地址。

不是自定义域名并在各个代码托管服务中使用 gh-pages 服务（例如 github,coding,码云等）搭建本博客的请务必删除 static/CNAME 文件。

进入 github 仓库，settings -> 首页下翻找到Github pages项，设置Source 为master branch

修改 statc/CNAME 文件中的地址为你的 url 地址。

你可以删除三篇示例文章

执行 yarn generate 或者 npm run generate，生成文章模板，会提示填写文章名等信息，按照提示填写即可。

文章生成完毕后，打开生成的 markdown 文件。

你必须修改 image 字段，可以选择删除，这样会使用默认的data/headers/下面的图片，你可以添加更多的图片进去（命名无要求），从而让你的博客有更多的图片自动选择，请注意，在你每一次构建之后，文章对应的图片都会被修改（因为是随机的）。

草稿文章将会被隐藏，对应字段是draft。悄悄告诉你，通过某个彩蛋可以找到这些文章

原创文章会被标注原创标示，请谨慎使用，对应字段是origin。

之后，删除默认内容，即可开始你的创作

你只需要在data目录下的blog文件夹之外的任意路径，创建 markdown 文件即可，参考data/about.md。按照路径进行 url 映射，例如data/about.md映射到/about,data/about/a.md->/about/a,其中，如果文件命名为index.md，则使用上层路径，根目录不要使用 index.md命名。

使用这种方式的markdown文件本质与博文没有区别，但是博客内部逻辑会将其与博文分开，单独构建为页面。你依然可以像文章一样设置tag，image等信息。只会显示，不会参与博文相关逻辑。

注意，使用此方式，你需要了解typescript/react等知识

如果只是简单的静态页面。直接在src/pages创建tsx文件即可，与正常react页面开发无太大区别。

如果需要数据交互，请参考gatsby官方文档

请务必确保当前分支不在master上

请务必确认travis配置文件是否正确编写

项目默认使用build分支作为构建分支,此分支专门用于在dev分支上编写完相关博文或配置时，提交给build分支，以让travis进行自动集成。

自动集成博客流程：

dev分支编写项目->提交到dev分支，做为存档
 |
 |
 提交到build分支->travis捕捉到提交->自动构建并部署到master分支。

当然你可以显式的修改travis配置文件，以让它能够适应你的部署方式。

进入travis官方网站。注册并登陆。进入账户设置页面。同步你的博客项目（打开开关），点击settings。 找到Environment Variables项。添加环境参数如下（值为我的配置示例）：

GH_REF  （仓库地址）：github.com/zidoshare/zidoshare.github.io
 
GH_TOKEN （github token）: ••••••••••••••••
 
P_BRANCH  (github静态服务分支，推荐为master， 你也可以设置为gh-pages。那么上面的关于gh-pages的设置也需要修改为gh-pages)：master
 
U_EMAIL (个人邮箱):wuhongxu1208@gmail.com
 
U_NAME  (用户名):zidoshare

关于token获取：

登陆并进入github,进入settings->Developer settins->Personal access tokens（传送门）,点击generate new token。输入密码，至于权限设置，看个人，避免麻烦，可以把除delete_repo的选项全部勾上，设置名字，生成，便能够得到token。复制下来，填写到上面的GH_TOKEN的值中即可。

通过以上步骤就完成了travis自动集成。

修改完配置之后，提交代码到build分支即可。

以下为一般情况下的提交命令：

git add .
git commit -m "update project"
git push
git push origin dev:build

你可以在travis中将

  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" build:${P_BRANCH}
branches:
  only:
    - build

修改为：

  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" dev:${P_BRANCH}
branches:
  only:
    - dev

这样设置之后，就无需git push origin dev:build命令。便能够直接集成

提交之后喝杯咖啡，等待travis自动构建完成。

不推荐自动构建集成。所以也就不提供完整的步骤，只做简单说明：运行npm run build等待构建,public/为构建出来的包,将public提交到静态服务分支即可。