一個入門模板,用於使用 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 許可證發布。