使用Gatsby.js作为Ghost的前端

使用Gatsby.js作为Ghost的前端

Ghost更新到2.10版本后，支持Gatsyb作为其前端。官方为推广新版本，还特意制作了Gatsby starter。在Netlify部署体验很方便。

1. Fork gatsby-starter-ghost 到自己Github账户。

2. 从 README.md 下载data-stub.json，通过Ghost 后台 实验室导入服务器。

3. 点击README.md 中的

4. 跳转到Netlify账户，没有账号的可以Github一键登录。

5. 登录后，点击右上角，New site from Git

6. 选择自己Github 账户下gatsby-starter-ghost。

7. 继续点击Deploy site

8. 项目自动部署，部署失败没关系，第x步修改即可。

9. 绑定自定义域名，在域名商处修改DNS。

10. 点击左上角Site settings

11. 选择左侧 Build & deploy，在 Build hooks 添加 build hooks ,复制生成的URL

12. 在Ghost 博客后台，在Integrations点击 添加自定义Integrations.

13. 添加webhook，Event选择Site Changed (rebuild)。

14. 把从Netlify复制的URL粘贴到Taget URl。

15. 复制生成的 Content API Key。

16. 修改你Github账户下gatsby-starter-ghost 项目下的.ghost.json,apiUrl 修改为你Ghost博客的域名，contentApiKey修改为刚才后台生成的key,Git项目

    {
      "development": {
        "apiUrl": "https://gatsby.ghost.io",
        "contentApiKey": "9cc5c67c358edfdd81455149d0"
      },
      "production": {
        "apiUrl": "https://gatsby.ghost.io",
        "contentApiKey": "9cc5c67c358edfdd81455149d0"
      }
    }
    

17. Netlify 会根据更改重新自动部署项目，这时候访问一般会成功的。

18. 如果出现下列代码，应该是后台ico\logo\cover没设置，或者其他参数没有设置，设置后，netlify会重新部署，检查是否成功。Getsby需要Ghost所有字段都填好，才能构建部署成功。

     file: /opt/build/repo/src/utils/fragments.js
     ......
    Error running command: Build script returned non-zero exit code: 1