使用Gatsby.js作为Ghost的前端

生活 Mar 09, 2020
1

使用Gatsby.js作为Ghost的前端

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

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

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

点击README.md 中的

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

登录后,点击右上角,New site from Git

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

继续点击Deploy site

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

绑定自定义域名,在域名商处修改DNS。

点击左上角Site settings

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

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

添加webhook,Event选择Site Changed (rebuild)。

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

复制生成的 Content API Key。

修改你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"
  }
}

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

如果出现下列代码,应该是后台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

在国内体验官方DEMO真的很快,尽管CDN地址在日本或新加

席一舟

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

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.