使用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 中的部署到Netlify

  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
    
  19. 在国内体验官方DEMO真的很快,尽管CDN地址在日本或新加坡。

Published:January 11, 2019

Updated:January 13, 2019