เทมเพลตเริ่มต้นสำหรับสร้างเว็บไซต์ที่รวดเร็วปานสายฟ้าด้วย Ghost (เช่น CMS ที่ไม่มีหัวในกรณีนี้) และ Gatsby โดยใช้ธีม Simply Ghost ที่ยอดเยี่ยม เขียนใหม่จากธีมแฮนด์บาร์เป็น 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 ที่ดึงเนื้อหาจาก Ghost ที่ไม่มีหัว คุณไม่จำเป็นต้องติดตั้งธีม Simply Ghost ดั้งเดิมในอินสแตนซ์ Ghost ของคุณ หรือไม่ได้ตั้งค่าเส้นทางเพิ่มเติมใดๆ ไว้ที่นั่น
gatsby develop
ตามค่าเริ่มต้น โปรแกรมเริ่มต้นจะเติมเนื้อหาจากการติดตั้ง Ghost เริ่มต้นซึ่งอยู่ที่ https://gatsby.ghost.io
หากต้องการใช้การติดตั้งของคุณเอง คุณจะต้องแก้ไขไฟล์กำหนดค่า .ghost.json
ด้วยข้อมูลประจำตัวของคุณ เปลี่ยนค่า apiUrl
เป็น URL ของไซต์ Ghost ของคุณ สำหรับลูกค้า Ghost(Pro) นี่คือ Ghost URL ที่ลงท้ายด้วย .ghost.io
และสำหรับผู้ที่ใช้ Ghost เวอร์ชันที่โฮสต์เอง จะเป็น URL เดียวกับที่ใช้ในการเข้าถึงเว็บไซต์ของคุณ
จากนั้น อัปเดตค่า contentApiKey
เป็นคีย์ที่เกี่ยวข้องกับไซต์ Ghost สามารถระบุคีย์ได้โดยการสร้างการผสานรวมภายใน Ghost Admin ไปที่การบูรณาการและคลิก "เพิ่มการบูรณาการใหม่" ตั้งชื่อการบูรณาการอย่างเหมาะสมแล้วคลิกสร้าง
{
"apiUrl" : " https://gatsby.ghost.io " ,
"contentApiKey" : " 9cc5c67c358edfdd81455149d0 "
}
สุดท้าย กำหนดค่า URL ที่คุณต้องการใน siteConfig.js
เพื่อให้ลิงก์ (เช่น ลิงก์ตามรูปแบบบัญญัติ) ถูกสร้างขึ้นอย่างถูกต้อง คุณควรอัปเดตค่าอื่นๆ ที่จำเป็นสำหรับเมนู การแชร์ทางสังคม และการค้นหา
{
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
ฯลฯ)
การสาธิตและการซื้อคืนเป็น "เวอร์ชันสูงสุด" พร้อมด้วยรูปแบบโฮมเพจ เทมเพลตโพสต์ ผลงาน เอกสาร ฯลฯ ที่เป็นไปได้ทุกประเภท ปรับ/ลบได้ตามต้องการ
ไฟล์เริ่มต้นประกอบด้วยไฟล์กำหนดค่าสามไฟล์สำหรับการปรับใช้กับ Netlify โดยเฉพาะ ไฟล์ netlify.toml
สำหรับการตั้งค่าบิลด์ ไฟล์ /static/_headers
ที่มีส่วนหัวการรักษาความปลอดภัยเริ่มต้นที่ตั้งค่าไว้สำหรับทุกเส้นทาง และ /static/_redirects
เพื่อตั้งค่าการเปลี่ยนเส้นทางโดเมนที่กำหนดเองของ Netlify
หากต้องการปรับใช้กับบัญชี Netlify ของคุณ ให้กดปุ่มด้านล่าง
โดยทั่วไปคีย์ Content API จะไม่ถือว่าเป็นข้อมูลที่ละเอียดอ่อน แต่มีอยู่เพื่อให้สามารถเปลี่ยนแปลงได้ในกรณีที่มีการละเมิด ดังนั้นคนส่วนใหญ่จึงผูกมัดกับไฟล์กำหนดค่า . .ghost.json
โดยตรง หากคุณต้องการเก็บข้อมูลนี้ไว้นอกพื้นที่เก็บข้อมูล คุณสามารถลบการกำหนดค่านี้และตั้งค่าตัวแปร Netlify ENV สำหรับบิลด์ที่ใช้งานจริงแทนได้
เมื่อปรับใช้แล้ว คุณสามารถตั้งค่า Ghost + Netlify Integration เพื่อใช้ตะขอปรับใช้จาก Ghost เพื่อทริกเกอร์ Netlify สร้างใหม่ได้ ด้วยวิธีนี้ เมื่อใดก็ตามที่ข้อมูลใน Ghost มีการเปลี่ยนแปลง เว็บไซต์ของคุณก็จะสร้างขึ้นใหม่บน Netlify
คุณสามารถปิดการใช้งานส่วนหน้าของธีม Ghost Handlebars เริ่มต้นได้โดยเปิดใช้งานการตั้งค่าสถานะ Make this site private
ภายในการตั้งค่า Ghost ของคุณ ซึ่งจะทำให้มีการป้องกันด้วยรหัสผ่านด้านหน้าการติดตั้ง Ghost และตั้งค่า <meta name="robots" content="noindex" />
เพื่อให้ส่วนหน้าของ Gatsby กลายเป็นแหล่งที่มาของความจริงสำหรับ SEO
# Run a production build, locally
gatsby build
# Serve a production build, locally
gatsby serve
Gatsby develop
ใช้การกำหนดค่า development
ใน .ghost.json
- ในขณะที่ Gatsby build
ใช้การกำหนดค่า production
ลิขสิทธิ์ (c) 2021 anarion80 - เผยแพร่ภายใต้ใบอนุญาต GPLv3