一个入门模板,用于使用 Ghost(在本例中为无头 CMS)和 Gatsby 构建闪电般快速的网站,使用优秀的 Simply Ghost 主题。从 Handlebars 主题重写为 React/Gatsby。
演示: https://gatsby-ghost-simply.netlify.app/
custom_template
字段!)custom_template
字段!)custom_template
字段!)custom_template
字段!) # With Gatsby CLI
gatsby new gatsby-starter-ghost https://github.com/anarion80/gatsby-ghost-simply.git
# From Source
git clone https://github.com/anarion80/gatsby-ghost-simply.git
cd gatsby-ghost-simply
然后安装依赖项
yarn
启动开发服务器。您现在有一个 Gatsby 网站,从 Headless Ghost 中提取内容。您不需要在 Ghost 实例中安装原始的 Simply Ghost 主题,也不需要在那里设置任何额外的路由。
gatsby develop
默认情况下,启动器将从位于 https://gatsby.ghost.io 的默认 Ghost 安装中填充内容。
要使用您自己的安装,您需要使用您的凭据编辑.ghost.json
配置文件。将apiUrl
值更改为您的 Ghost 站点的 URL。对于 Ghost(Pro) 客户,这是以.ghost.io
结尾的 Ghost URL,对于使用 Ghost 自托管版本的用户,它与用于访问您的网站的 URL 相同。
接下来,将contentApiKey
值更新为与 Ghost 站点关联的密钥。可以通过在 Ghost Admin 中创建集成来提供密钥。导航到集成并单击“添加新集成”。适当地命名集成并单击“创建”。
{
"apiUrl" : " https://gatsby.ghost.io " ,
"contentApiKey" : " 9cc5c67c358edfdd81455149d0 "
}
最后,在siteConfig.js
中配置您所需的 URL,以便正确生成链接(例如规范链接)。您还应该更新菜单、社交共享和搜索所需的其他值。
{
menuDropdown : [
{
label : `About` ,
url : `/about` ,
} ,
.
.
.
] ,
followSocialMedia : [
{
service : `youtube` ,
title : `YOUR_TITLE` ,
url : `YOUR_URL` ,
} ,
.
.
.
] ,
searchSettings : {
key : `YOUR_GHOST_API_KEY` ,
url : `YOUR_GHOST_URL` ,
/* This is optional */
options : {
keys : [ `title` , `plaintext` ] ,
limit : 10 ,
} ,
/* This is optional to perform filtering of the ghost api */
api : {
resource : `posts` ,
parameters : {
limit : `all` ,
fields : [ `title` , `slug` , `plaintext` ] ,
filter : `` ,
include : `` ,
order : `` ,
formats : `` ,
} ,
} ,
} ,
}
要使用自定义帖子模板,请向帖子添加特定的内部标签(即#custom-post-wide
、 #custom-kusi-doc
等)。
演示和存储库是“最大版本”,包含所有可能类型的主页变体、帖子模板、作品集、文档等。根据需要调整/删除。
Starter 包含三个专门用于使用 Netlify 进行部署的配置文件。用于构建设置的netlify.toml
文件、为所有路由设置默认安全标头的/static/_headers
文件以及用于设置 Netlify 自定义域重定向的/static/_redirects
。
要部署到您的 Netlify 帐户,请点击下面的按钮。
内容 API 密钥通常不被视为敏感信息,它们的存在是为了在滥用时可以更改;所以大多数人直接将其提交到他们的.ghost.json
配置文件中。如果您希望将此信息保留在存储库之外,您可以删除此配置并为生产构建设置 Netlify ENV 变量。
部署后,您可以设置 Ghost + Netlify 集成,以使用 Ghost 中的部署挂钩来触发 Netlify 重建。这样,只要 Ghost 中的数据发生变化,您的站点就会在 Netlify 上重建。
您可以通过在 Ghost 设置中启用Make this site private
”标志来禁用默认的 Ghost Handlebars 主题前端。这会在 Ghost 安装之前启用密码保护并设置<meta name="robots" content="noindex" />
以便您的 Gatsby 前端成为 SEO 的真实来源。
# Run a production build, locally
gatsby build
# Serve a production build, locally
gatsby serve
Gatsby develop
使用.ghost.json
中的development
配置 - 而 Gatsby build
使用production
配置。
版权所有 (c) 2021 anarion80 - 根据 GPLv3 许可证发布。