ลดความซับซ้อนของกองของคุณด้วยเครื่องสร้างไซต์คงที่แบบกำหนดเอง

เผยแพร่แล้ว: 2022-03-10
สรุปอย่างรวดเร็ว ↬ ในการพัฒนาสมัยใหม่ มีเครื่องมือที่ยอดเยี่ยมมากมายสำหรับการพัฒนาเว็บไซต์ แต่บ่อยครั้งเป็นเครื่องมือที่มากกว่าที่จำเป็นสำหรับโครงการที่กำหนด ในบทความนี้ เราจะมาสำรวจวิธีการใช้หน้า HTML ที่เรียบง่ายและทำให้เนื้อหาสามารถแก้ไขได้ใน CMS ที่ไม่มีเฟรมเวิร์กและไม่มี JavaScript ฝั่งไคลเอ็นต์

ด้วยการถือกำเนิดของขบวนการ Jamstack ไซต์ที่ให้บริการแบบสถิตได้กลายเป็นความโกรธแค้นอีกครั้ง นักพัฒนาส่วนใหญ่ที่ให้บริการ HTML แบบคงที่ไม่ได้สร้าง HTML ดั้งเดิม เพื่อให้นักพัฒนาได้รับประสบการณ์ที่ดี เรามักจะหันไปใช้เครื่องมือที่เรียกว่า Static Site Generator (SSG)

เครื่องมือเหล่านี้มาพร้อมกับคุณสมบัติมากมายที่ทำให้การเขียนไซต์สแตติกขนาดใหญ่เป็นที่น่าพอใจ ไม่ว่าพวกเขาจะให้ hooks ง่ายๆ ใน API ของบุคคลที่สามเช่นแหล่งข้อมูลของ Gatsby หรือให้การกำหนดค่าในเชิงลึกเช่นชุดเครื่องมือเทมเพลตขนาดใหญ่ของ 11ty มีบางอย่างสำหรับทุกคนในการสร้างไซต์แบบคงที่

เนื่องจากเครื่องมือเหล่านี้สร้างขึ้นสำหรับกรณีการใช้งานที่หลากหลาย จึงต้องมีฟีเจอร์มากมาย คุณลักษณะเหล่านี้ทำให้พวกเขามีประสิทธิภาพ พวกเขายังทำให้พวกเขาค่อนข้างซับซ้อนและทึบสำหรับนักพัฒนาใหม่ ในบทความนี้ เราจะนำ SSG ไปสู่องค์ประกอบพื้นฐานและสร้างขึ้นมาเอง

ตัวสร้างไซต์แบบคงที่คืออะไร?

แก่นแท้ของมัน โปรแกรมสร้างไซต์แบบสแตติกคือโปรแกรมที่ทำการแปลงเป็นชุดบนกลุ่มของไฟล์เพื่อแปลงเป็นสินทรัพย์แบบคงที่ เช่น HTML ไฟล์ประเภทใดที่สามารถยอมรับได้ การแปลงไฟล์อย่างไร และไฟล์ประเภทใดที่แยกความแตกต่างของ SSG

Jekyll ซึ่งเป็น SSG รุ่นแรกและยังคงได้รับความนิยม ใช้ Ruby เพื่อประมวลผลเทมเพลต Liquid และไฟล์เนื้อหา Markdown เป็น HTML

Gatsby ใช้ React และ JSX เพื่อแปลงส่วนประกอบและเนื้อหาเป็น HTML จากนั้นจะก้าวไปอีกขั้นและสร้างแอปพลิเคชันหน้าเดียวที่สามารถให้บริการแบบคงที่ได้

11ty แสดง HTML จากเครื่องมือสร้างเทมเพลต เช่น Liquid, Handlebars, Nunjucks หรือตัวอักษรเทมเพลต JavaScript

แต่ละแพลตฟอร์มเหล่านี้มีคุณสมบัติเพิ่มเติมเพื่อทำให้ชีวิตของเราง่ายขึ้น พวกเขาจัดเตรียมธีม สร้างไปป์ไลน์ สถาปัตยกรรมปลั๊กอิน และอื่นๆ ด้วยคุณสมบัติเพิ่มเติมแต่ละอย่างจะมีความซับซ้อนมากขึ้น มีความมหัศจรรย์มากขึ้น และการพึ่งพาอาศัยกันมากขึ้น แน่นอนว่าเป็นคุณสมบัติที่สำคัญ แต่ไม่ใช่ทุกโครงการที่ต้องการ

ระหว่าง SSG ที่แตกต่างกันทั้งสามนี้ เราสามารถเห็นธีมทั่วไปอื่น: data + templates = final site ดูเหมือนว่าจะเป็นฟังก์ชันหลักของไซต์สแตติกของตัวสร้าง นี่คือฟังก์ชันที่เราจะใช้ SSG ของเรา

แก่นแท้ของมัน โปรแกรมสร้างไซต์แบบสแตติกคือโปรแกรมที่ทำการแปลงเป็นชุดบนกลุ่มของไฟล์เพื่อแปลงเป็นสินทรัพย์แบบคงที่ เช่น HTML

“

เทคโนโลยี Stack Generator ของ Static Site Generator ใหม่ของเรา: Handlebars, Sanity.io และ Netlify

ในการสร้าง SSG ของเรา เราจำเป็นต้องมีเครื่องมือเทมเพลต แหล่งข้อมูล และโฮสต์ที่สามารถใช้งาน SSG และสร้างไซต์ของเราได้ เครื่องกำเนิดไฟฟ้าจำนวนมากใช้ Markdown เป็นแหล่งข้อมูล แต่ถ้าเราก้าวไปอีกขั้นและเชื่อมต่อ SSG ของเรากับ CMS โดยกำเนิดล่ะ

  • ที่มาของข้อมูล: Sanity.io
  • การดึงข้อมูลและการสร้างเทมเพลต: โหนดและแฮนด์บาร์
  • โฮสต์และการปรับใช้: Netlify

ข้อกำหนดเบื้องต้น

  • ติดตั้ง NodeJS แล้ว
  • บัญชี Sanity.io
  • ความรู้เกี่ยวกับ Git
  • ความรู้พื้นฐานของบรรทัดคำสั่ง
  • ความรู้พื้นฐานเกี่ยวกับการปรับใช้กับบริการต่างๆ เช่น Netlify

หมายเหตุ : หากต้องการติดตาม คุณสามารถค้นหาโค้ดในที่เก็บนี้บน GitHub

เพิ่มเติมหลังกระโดด! อ่านต่อด้านล่าง↓

การตั้งค่าโครงสร้างเอกสารของเราใน HTML

ในการเริ่มต้นโครงสร้างเอกสาร เราจะเขียน HTML ธรรมดา ยังไม่ต้องยุ่งยากเรื่อง

ในโครงสร้างโปรเจ็กต์ของเรา เราต้องสร้างที่สำหรับให้ไฟล์ต้นฉบับของเราใช้งานได้ ในกรณีนี้ เราจะสร้างไดเร็กทอรี src และใส่ index.html ไว้ข้างใน

ใน index.html เราจะร่างเนื้อหาที่เราต้องการ นี้จะค่อนข้างง่ายเกี่ยวกับหน้า

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title of the page!</title> </head> <body> <h1>The personal homepage of Bryan Robinson</h1> <p>Some pagraph and rich text content next</p> <h2>Bryan is on the internet</h2> <ul> <li><a href="linkURL">List of links</a></li> </ul> </body> </html>

ให้สิ่งนี้เป็นเรื่องง่าย เราจะเริ่มต้นด้วย h1 สำหรับเพจของเรา เราจะปฏิบัติตามนั้นด้วยข้อมูลชีวประวัติสองสามย่อหน้า และเราจะยึดหน้านั้นด้วยรายการลิงก์เพื่อดูเพิ่มเติม

แปลง HTML ของเราเป็นเทมเพลตที่ยอมรับข้อมูล

หลังจากที่เรามีโครงสร้างพื้นฐานแล้ว เราต้องตั้งค่ากระบวนการเพื่อรวมสิ่งนี้เข้ากับข้อมูลจำนวนหนึ่ง ในการดำเนินการนี้ เราจะใช้เครื่องมือเทมเพลตของแฮนด์บาร์

ที่แกนหลัก Handlebars ใช้สตริงที่เหมือน HTML แทรกข้อมูลผ่านกฎที่กำหนดไว้ในเอกสาร แล้วส่งออกสตริง HTML ที่คอมไพล์แล้ว

ในการใช้ Handlebars เราจะต้องเริ่มต้น package.json และติดตั้งแพ็คเกจ

รัน npm init -y เพื่อสร้างโครงสร้างของไฟล์ package.json ที่มีเนื้อหาดีฟอลต์ เมื่อได้สิ่งนี้แล้ว เราก็สามารถติดตั้งแฮนด์บาร์ได้

 npm install handlebars

สคริปต์การสร้างของเราจะเป็นสคริปต์โหนด นี่คือสคริปต์ที่เราจะใช้ในพื้นที่เพื่อสร้าง แต่ยังเป็นสิ่งที่ผู้ให้บริการและโฮสต์การปรับใช้ของเราจะใช้เพื่อสร้าง HTML สำหรับไซต์ที่ใช้งานจริง

ในการเริ่มต้นสคริปต์ เราจะสร้างไฟล์ index.js และต้องใช้สองแพ็คเกจที่ด้านบน อันแรกคือแฮนด์บาร์และอันที่สองคือโมดูลเริ่มต้นในโหนดสำหรับการเข้าถึงระบบไฟล์ปัจจุบัน

 const fs = require('fs'); const Handlebars = require('handlebars');

เราจะใช้โมดูล fs เพื่อเข้าถึงซอร์สไฟล์ของเรา เช่นเดียวกับการเขียนไปยังไฟล์การแจกจ่าย ในการเริ่มต้นสร้าง เราจะสร้างฟังก์ชัน main เพื่อให้ไฟล์ทำงานเมื่อมีการเรียกใช้ และฟังก์ชัน buildHTML เพื่อรวมข้อมูลและมาร์กอัปของเรา

 function buildHTML(filename, data) { const source = fs.readFileSync(filename,'utf8').toString(); const template = Handlebars.compile(source); const output = template(data); return output } async function main(src, dist) { const html = buildHTML(src, { "variableData": "This is variable data"}); fs.writeFile(destination, html, function (err) { if (err) return console.log(err); console.log('index.html created'); }); } main('./src/index.html', './dist/index.html');

ฟังก์ชัน main() ยอมรับสองอาร์กิวเมนต์: พาธไปยังเทมเพลต HTML ของเรา และพาธที่เราต้องการให้ไฟล์ที่สร้างขึ้นของเราใช้งานได้ ในฟังก์ชันหลักของเรา เราเรียกใช้ buildHTML บนพาธแหล่งที่มาของเทมเพลตด้วยข้อมูลจำนวนหนึ่ง

ฟังก์ชันบิลด์จะแปลงเอกสารต้นทางเป็นสตริงและส่งผ่านสตริงนั้นไปยังแฮนด์บาร์ Handlebars รวบรวมเทมเพลตโดยใช้สตริงนั้น จากนั้นเราจะส่งข้อมูลของเราไปยังเทมเพลตที่คอมไพล์แล้ว Handlebars จะแสดงสตริง HTML ใหม่แทนที่ตัวแปรหรือตรรกะของเทมเพลตด้วยเอาต์พุตข้อมูล

เราส่งคืนสตริงนั้นในฟังก์ชัน main ของเรา และใช้เมธอด writeFile ที่จัดเตรียมโดยโมดูลระบบไฟล์ของ Node เพื่อเขียนไฟล์ใหม่ในตำแหน่งที่ระบุของเรา หากมีไดเร็กทอรีอยู่

เพื่อป้องกันข้อผิดพลาด ให้เพิ่มไดเร็กทอรี dist ในโครงการของคุณด้วยไฟล์ . .gitkeep อยู่ในนั้น เราไม่ต้องการที่จะคอมมิตไฟล์ที่เราสร้างขึ้น (กระบวนการสร้างของเราจะทำเช่นนี้) แต่เราต้องการให้แน่ใจว่ามีไดเร็กทอรีนี้สำหรับสคริปต์ของเรา

ก่อนที่เราจะสร้าง CMS เพื่อจัดการเพจนี้ มายืนยันว่าใช้งานได้ ในการทดสอบ เราจะแก้ไขเอกสาร HTML เพื่อใช้ข้อมูลที่เราเพิ่งส่งไป เราจะใช้ไวยากรณ์ตัวแปรแฮนด์บาร์เพื่อรวมเนื้อหาข้อมูล variableData

 <h1>{{ variableData }}</h1>

เมื่อ HTML ของเรามีตัวแปรแล้ว เราก็พร้อมที่จะเรียกใช้สคริปต์โหนดของเราแล้ว

 node index.js

เมื่อสคริปต์เสร็จสิ้น เราควรจะมีไฟล์อยู่ที่ /dist/index.html หากเราเปิดอ่านสิ่งนี้ในเบราว์เซอร์ เราจะเห็นว่ามาร์กอัปของเราแสดงผลแล้ว แต่ยังมีสตริง “นี่คือข้อมูลตัวแปร” ด้วยเช่นกัน

การเชื่อมต่อกับ CMS

เรามีวิธีการรวมข้อมูลเข้ากับเทมเพลต ตอนนี้เราต้องการแหล่งข้อมูลสำหรับข้อมูลของเรา วิธีนี้จะทำงานกับแหล่งข้อมูลใดก็ได้ที่มี API สำหรับการสาธิตนี้ เราจะใช้ Sanity.io

Sanity เป็นแหล่งข้อมูลแรกของ API ที่ถือว่าเนื้อหาเป็นข้อมูลที่มีโครงสร้าง พวกเขามีระบบการจัดการเนื้อหาโอเพนซอร์ซเพื่อให้การจัดการและเพิ่มข้อมูลสะดวกยิ่งขึ้นสำหรับทั้งบรรณาธิการและนักพัฒนา CMS คือสิ่งที่มักเรียกกันว่า CMS "หัวขาด" แทนที่จะใช้ระบบการจัดการแบบเดิมที่ข้อมูลของคุณเชื่อมโยงกับงานนำเสนอของคุณอย่างแน่นหนา CMS ที่ไม่มีส่วนหัวจะสร้างชั้นข้อมูลที่สามารถใช้โดยส่วนหน้าหรือบริการใดก็ได้ (และอาจมีหลายรายการในเวลาเดียวกัน)

Sanity เป็นบริการแบบชำระเงิน แต่มีแผน "มาตรฐาน" ที่ให้บริการฟรีและมีคุณสมบัติทั้งหมดที่เราต้องการสำหรับไซต์เช่นนี้

การตั้งค่าสติ

วิธีที่รวดเร็วที่สุดในการเริ่มต้นและดำเนินการกับโครงการ Sanity ใหม่คือการใช้ Sanity CLI เราจะเริ่มต้นด้วยการติดตั้งทั่วโลก

 npm install -g @sanity/cli

CLI ช่วยให้เราเข้าถึงกลุ่มผู้ช่วยสำหรับการจัดการ การปรับใช้ และการสร้าง ในการเริ่มต้นใช้งาน เราจะเรียกใช้ sanity init การดำเนินการนี้จะดำเนินการผ่านแบบสอบถามเพื่อช่วยบูตสแตรปสตูดิโอของเรา (สิ่งที่ Sanity เรียกว่า CMS โอเพ่นซอร์ส)

 Select a Project to Use: Create new project HTML CMS Use the default dataset configuration? Y // this creates a "Production" dataset Project output path: studio // or whatever directory you'd like this to live in Select project template Clean project with no predefined schemas

ขั้นตอนนี้จะสร้างโปรเจ็กต์และชุดข้อมูลใหม่ในบัญชี Sanity ของคุณ สร้าง Studio เวอร์ชันในเครื่อง และเชื่อมโยงข้อมูลและ CMS เข้าด้วยกันเพื่อคุณ ตามค่าเริ่มต้น ไดเร็กทอรี studio จะถูกสร้างขึ้นในรูทของโปรเจ็กต์ของเรา ในโครงการขนาดใหญ่ คุณอาจต้องการตั้งค่านี้เป็นที่เก็บแยกต่างหาก สำหรับโปรเจ็กต์นี้ ไม่เป็นไรที่จะเชื่อมโยงสิ่งนี้ไว้ด้วยกัน

ในการรัน Studio ของเราในเครื่อง เราจะเปลี่ยนไดเร็กทอรีเป็นไดเร็กทอรีของ studio และรัน sanity start สิ่งนี้จะเรียกใช้ Studio ที่ localhost:3333 เมื่อคุณเข้าสู่ระบบ คุณจะเห็นหน้าจอเพื่อแจ้งว่าคุณมี "Empty schema" ด้วยเหตุนี้ ก็ถึงเวลาเพิ่มสคีมาของเรา ซึ่งเป็นวิธีการจัดโครงสร้างและแก้ไขข้อมูลของเรา

การสร้างแผนสุขภาพจิต

วิธีที่คุณสร้างเอกสารและฟิลด์ภายใน Sanity Studio คือการสร้างสคีมาภายในไฟล์ schemas/schema.js

สำหรับไซต์ของเรา เราจะสร้างประเภทสคีมาที่เรียกว่า "เกี่ยวกับรายละเอียด" สคีมาของเราจะไหลจาก HTML ของเรา โดยทั่วไป เราสามารถทำให้หน้าเว็บส่วนใหญ่ของเราเป็นฟิลด์ Rich-Text เพียงช่องเดียว แต่แนวทางปฏิบัติที่ดีที่สุดในการจัดโครงสร้างเนื้อหาของเราให้แยกจากกัน สิ่งนี้ให้ความยืดหยุ่นมากขึ้นในวิธีที่เราอาจต้องการใช้ข้อมูลนี้ในอนาคต

สำหรับหน้าเว็บของเรา เราต้องการชุดข้อมูลที่ประกอบด้วยสิ่งต่อไปนี้:

  • ชื่อ
  • ชื่อเต็ม
  • ชีวประวัติ (พร้อมการแก้ไขข้อความที่หลากหลาย)
  • รายชื่อเว็บไซต์ที่มีชื่อและ URL

เพื่อกำหนดสิ่งนี้ในสคีมาของเรา เราสร้างออบเจ็กต์สำหรับเอกสารของเราและกำหนดฟิลด์ของเอกสาร รายการเนื้อหาของเราที่มีคำอธิบายประกอบพร้อม type ฟิลด์:

  • ชื่อเรื่อง — string
  • ชื่อเต็ม — string
  • ชีวประวัติ - อาร์เรย์ของ "บล็อก"
  • รายการเว็บไซต์ — อาร์เรย์ของอ็อบเจ็กต์ที่มีชื่อและฟิลด์สตริง URL
 types: schemaTypes.concat([ /* Your types here! */ { title: "About Details", name: "about", type: "document", fields: [ { name: 'title', type: 'string' }, { name: 'fullName', title: 'Full Name', type: 'string' }, { name: 'bio', title: 'Biography', name: 'content', type: 'array', of: [ { type: 'block' } ] }, { name: 'externalLinks', title: 'Social media and external links', type: 'array', of: [ { type: 'object', fields: [ { name: 'text', title: 'Link text', type: 'string' }, { name: 'href', title: 'Link url', type: 'string' } ] } ] } ] } ])

เพิ่มสิ่งนี้ลงในประเภทสคีมาของคุณ บันทึก จากนั้น Studio ของคุณจะคอมไพล์ใหม่และนำเสนอเอกสารแรกของคุณ จากที่นี่ เราจะเพิ่มเนื้อหาของเราลงใน CMS โดยการสร้างเอกสารใหม่และกรอกข้อมูล

จัดโครงสร้างเนื้อหาของคุณในแบบที่ใช้ซ้ำได้

ณ จุดนี้ คุณอาจสงสัยว่าทำไมเราถึงมี "ชื่อเต็ม" และ "ชื่อเรื่อง" เนื่องจากเราต้องการให้เนื้อหาของเรามีศักยภาพที่จะนำไปใช้ได้หลากหลาย การรวมฟิลด์ชื่อแทนที่จะรวมเฉพาะชื่อในชื่อเรื่อง เราให้ข้อมูลนั้นมีประโยชน์มากขึ้น จากนั้น เราสามารถใช้ข้อมูลใน CMS นี้เพื่อขับเคลื่อนหน้าประวัติย่อหรือ PDF ฟิลด์ชีวประวัติสามารถใช้โดยทางโปรแกรมในระบบหรือเว็บไซต์อื่น ซึ่งช่วยให้เรามีแหล่งความจริงเพียงแหล่งเดียวสำหรับเนื้อหาส่วนใหญ่นี้ แทนที่จะถูกกำหนดโดยกรณีการใช้งานโดยตรงของเว็บไซต์นี้โดยเฉพาะ

ดึงข้อมูลของเราเข้าสู่โครงการของเรา

เมื่อเราเปิดเผยข้อมูลของเราผ่าน API แล้ว เรามาดึงข้อมูลนี้เข้าในโครงการของเรากัน

ติดตั้งและกำหนดค่าไคลเอ็นต์ Sanity JavaScript

อย่างแรก เราต้องเข้าถึงข้อมูลใน Node.js เราสามารถใช้ไคลเอ็นต์ Sanity JavaScript เพื่อสร้างการเชื่อมต่อนั้นได้

 npm install @sanity/client

การดำเนินการนี้จะดึงและติดตั้ง JavaScript SDK จากที่นี่ เราต้องกำหนดค่าให้ดึงข้อมูลจากโครงการที่เราตั้งค่าไว้ก่อนหน้านี้ ในการทำเช่นนั้น เราจะตั้งค่าสคริปต์ยูทิลิตี้ใน /utils/SanityClient.js เราจัดเตรียม ID โปรเจ็กต์และชื่อชุดข้อมูลของเราให้ SDK และเราพร้อมที่จะใช้ในสคริปต์หลักของเรา

 const sanityClient = require('@sanity/client'); const client = sanityClient({ projectId: '4fs6x5jg', dataset: 'production', useCdn: true }) module.exports = client;

ดึงข้อมูลของเราด้วย GROQ

ย้อนกลับไปที่ไฟล์ index.js เราจะสร้างฟังก์ชันใหม่เพื่อดึงข้อมูลของเรา ในการดำเนินการนี้ เราจะใช้ภาษาคิวรีดั้งเดิมของ Sanity นั่นคือ GROQ แบบโอเพนซอร์ส

เราจะสร้างการสืบค้นข้อมูลในตัวแปรจากนั้นใช้ไคลเอนต์ที่เรากำหนดค่าเพื่อดึงข้อมูลตามการสืบค้น ในกรณีนี้ เราสร้างวัตถุที่มีคุณสมบัติที่เรียกว่า about ในวัตถุนี้ เราต้องการส่งคืนข้อมูลสำหรับเอกสารเฉพาะของเรา ในการทำเช่นนั้น เราสอบถามตามเอกสาร _id ซึ่งสร้างขึ้นโดยอัตโนมัติเมื่อเราสร้างเอกสารของเรา

ในการค้นหา _id ของเอกสาร เราไปที่เอกสารใน Studio และคัดลอกจาก URL หรือย้ายไปที่โหมด "ตรวจสอบ" เพื่อดูข้อมูลทั้งหมดในเอกสาร หากต้องการเข้าสู่ Inspect ให้คลิกเมนู "kabob" ที่ด้านบนขวาหรือใช้ทางลัด Ctrl + Alt + I มุมมองนี้จะแสดงรายการข้อมูลทั้งหมดในเอกสารนี้ รวมทั้ง _id ของเรา Sanity จะคืนค่าอาร์เรย์ของวัตถุเอกสาร ดังนั้นเพื่อความเรียบง่าย เราจะคืนค่ารายการที่ 0th

จากนั้นเราจะส่งแบบสอบถามไปยังวิธีการ fetch ของไคลเอ็นต์ Sanity ของเรา และจะส่งคืนออบเจ็กต์ JSON ของข้อมูลทั้งหมดในเอกสารของเรา ในการสาธิตนี้ การส่งคืนข้อมูลทั้งหมดไม่ใช่เรื่องใหญ่ สำหรับการใช้งานที่ใหญ่กว่า GROQ อนุญาตให้ "การฉายภาพ" ที่เป็นตัวเลือกเพื่อส่งคืนเฉพาะฟิลด์ที่ชัดเจนที่คุณต้องการ

 const client = require('./utils/SanityClient') // at the top of the file // ... async function getSanityData() { const query = `{ "about": *[_id == 'YOUR-ID-HERE'][0] }` let data = await client.fetch(query); }

การแปลงฟิลด์ Rich Text เป็น HTML

ก่อนที่เราจะสามารถส่งคืนข้อมูลได้ เราจำเป็นต้องทำการเปลี่ยนแปลงในช่องข้อความที่มีการจัดรูปแบบของเรา แม้ว่า CMS จำนวนมากใช้โปรแกรมแก้ไข Rich Text ที่ส่งคืน HTML โดยตรง แต่ Sanity ก็ใช้ข้อกำหนดโอเพนซอร์สที่เรียกว่า Portable Text Portable Text ส่งคืนอาร์เรย์ของออบเจ็กต์ (คิดว่า Rich Text เป็นรายการย่อหน้าและบล็อกสื่ออื่นๆ) พร้อมข้อมูลทั้งหมดเกี่ยวกับสไตล์และคุณสมบัติ Rich Text เช่น ลิงก์ เชิงอรรถ และคำอธิบายประกอบอื่นๆ ซึ่งจะช่วยให้ย้ายและใช้งานข้อความในระบบที่ไม่สนับสนุน HTML เช่น ผู้ช่วยเสียงและแอปที่มาพร้อมเครื่อง

สำหรับกรณีการใช้งานของเรา หมายความว่าเราจำเป็นต้องแปลงวัตถุเป็น HTML มีโมดูล NPM ที่สามารถใช้แปลงข้อความพกพาไปใช้งานได้หลากหลาย ในกรณีของเรา เราจะใช้แพ็คเกจที่เรียกว่า block-content-to-html

 npm install @sanity/block-content-to-html

แพ็คเกจนี้จะแสดงมาร์กอัปเริ่มต้นทั้งหมดจากโปรแกรมแก้ไข Rich Text สไตล์แต่ละประเภทสามารถแทนที่เพื่อให้สอดคล้องกับมาร์กอัปที่คุณต้องการสำหรับกรณีการใช้งานของคุณ ในกรณีนี้ เราจะปล่อยให้แพ็คเกจทำงานแทนเรา

 const blocksToHtml = require('@sanity/block-content-to-html'); // Added to the top async function getSanityData() { const query = `{ "about": *[_type == 'about'][0] }` let data = await client.fetch(query); data.about.content = blocksToHtml({ blocks: data.about.content }) return await data }

การใช้เนื้อหาจาก Sanity.io ในแฮนด์บาร์

เมื่อข้อมูลอยู่ในรูปแบบที่เราสามารถใช้ได้ เราจะส่งต่อสิ่งนี้ไปยังฟังก์ชัน buildHTML เป็นอาร์กิวเมนต์ข้อมูล

 async function main(src, dist) { const data = await getSanityData(); const html = buildHTML(src, data) fs.writeFile(dist, html, function (err) { if (err) return console.log(err); console.log('index.html created'); }); }

ตอนนี้ เราสามารถเปลี่ยนแปลง HTML ของเราเพื่อใช้ข้อมูลใหม่ได้ เราจะใช้การเรียกตัวแปรมากขึ้นในเทมเพลตของเราเพื่อดึงข้อมูลส่วนใหญ่ของเรา

ในการแสดงตัวแปร content Rich Text เราจำเป็นต้องเพิ่มวงเล็บปีกกาพิเศษให้กับตัวแปรของเรา สิ่งนี้จะบอก Handlebars ให้แสดงผล HTML แทนที่จะแสดง HTML เป็นสตริง

สำหรับอาร์เรย์ externalLinks ของเรา เราจำเป็นต้องใช้ฟังก์ชันการวนซ้ำในตัวของ Handlebars เพื่อแสดงลิงก์ทั้งหมดที่เราเพิ่มลงใน Studio ของเรา

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ about.title }}</title> </head> <body> <h1>The personal homepage of {{ about.fullName }}</h1> {{{ about.content }}} <h2>Bryan is on the internet</h2> <ul> {{#each about.externalLinks }} <li><a href="{{ this.href }}">{{ this.text }}</a></li> {{/each}} </ul> </body> </html>

การตั้งค่าการทำให้ใช้งานได้

มาไลฟ์นี้กัน เราต้องการสององค์ประกอบในการทำงานนี้ อันดับแรก เราต้องการโฮสต์แบบคงที่ที่จะสร้างไฟล์ให้เรา ต่อไป เราต้องเรียกใช้งานโครงสร้างใหม่ของไซต์ของเราเมื่อเนื้อหามีการเปลี่ยนแปลงใน CMS ของเรา

กำลังปรับใช้กับ Netlify

สำหรับการโฮสต์ เราจะใช้ Netlify Netlify เป็นโฮสต์ไซต์แบบคงที่ ให้บริการสินทรัพย์แบบคงที่ แต่มีคุณสมบัติเพิ่มเติมที่จะทำให้เว็บไซต์ของเราทำงานได้อย่างราบรื่น พวกเขามีโครงสร้างพื้นฐานการปรับใช้ในตัวที่สามารถเรียกใช้สคริปต์โหนด เว็บฮุคเพื่อทริกเกอร์บิลด์ และ CDN ที่กระจายไปทั่วโลกเพื่อให้แน่ใจว่าหน้า HTML ของเราได้รับการบริการอย่างรวดเร็ว

Netlify สามารถดูที่เก็บของเราบน GitHub และสร้างบิลด์ตามคำสั่งที่เราสามารถเพิ่มลงในแดชบอร์ดได้

ขั้นแรก เราจะต้องกดรหัสนี้ไปที่ GitHub จากนั้น ในแดชบอร์ดของ Netlify เราจำเป็นต้องเชื่อมต่อที่เก็บใหม่กับไซต์ใหม่ใน Netlify

เมื่อเชื่อมต่อแล้ว เราต้องบอก Netlify ถึงวิธีสร้างโครงการของเรา ในแดชบอร์ด เราจะไปที่การตั้งค่า > สร้างและปรับใช้ > การตั้งค่าบิลด์ ในพื้นที่นี้ เราจำเป็นต้องเปลี่ยน "คำสั่ง Build" เป็น "node index.js" และ "Publish directory" เป็น "./dist"

เมื่อ Netlify สร้างไซต์ของเรา มันจะเรียกใช้คำสั่งของเรา จากนั้นตรวจสอบโฟลเดอร์ที่เราแสดงรายการสำหรับเนื้อหาและเผยแพร่เนื้อหาภายใน

การตั้งค่า Webhook

เรายังต้องบอกให้ Netlify เผยแพร่เวอร์ชันใหม่เมื่อมีผู้อัปเดตเนื้อหา ในการทำเช่นนั้น เราจะตั้งค่า Webhook เพื่อแจ้ง Netlify ว่าเราต้องการให้ไซต์สร้างใหม่ Webhook คือ URL ที่สามารถเข้าถึงได้โดยทางโปรแกรมโดยบริการอื่น (เช่น Sanity) เพื่อสร้างการดำเนินการในบริการต้นทาง (ในกรณีนี้คือ Netlify)

เราสามารถตั้งค่า "บิลด์เบ็ด" เฉพาะในแดชบอร์ด Netlify ของเราได้ที่การตั้งค่า > บิลด์ & การใช้งาน > บิลด์ฮุก เพิ่มเบ็ด ตั้งชื่อมัน และบันทึก ซึ่งจะให้ URL ที่สามารถใช้ทริกเกอร์บิลด์ใน Netlify จากระยะไกลได้

ต่อไป เราต้องแจ้งให้ Sanity ส่งคำขอไปยัง URL นี้เมื่อคุณเผยแพร่การเปลี่ยนแปลง

เราสามารถใช้ Sanity CLI เพื่อทำสิ่งนี้ให้สำเร็จ ภายในไดเร็กทอรี /studio ของเรา เราสามารถเรียกใช้ sanity hook create เพื่อเชื่อมต่อได้ คำสั่งจะถามชื่อ ชุดข้อมูล และ URL ชื่อสามารถเป็นอะไรก็ได้ที่คุณต้องการ ชุดข้อมูลควรเป็น production สำหรับผลิตภัณฑ์ของเรา และ URL ควรเป็น URL ที่ Netlify ให้มา

ตอนนี้ เมื่อใดก็ตามที่เราเผยแพร่เนื้อหาใน Studio เว็บไซต์ของเราจะได้รับการอัปเดตโดยอัตโนมัติ ไม่จำเป็นต้องมีกรอบงาน

  • รหัสสามารถพบได้ในที่เก็บ GitHub →

ขั้นตอนถัดไป

นี่เป็นตัวอย่างเล็กๆ น้อยๆ ของสิ่งที่คุณสามารถทำได้เมื่อคุณสร้างเครื่องมือของคุณเอง แม้ว่า SSG ที่มีคุณสมบัติครบถ้วนอาจเป็นสิ่งที่คุณต้องการสำหรับโครงการส่วนใหญ่ แต่การสร้าง mini-SSG ของคุณเองสามารถช่วยให้คุณเข้าใจมากขึ้นเกี่ยวกับสิ่งที่เกิดขึ้นในตัวสร้างที่คุณเลือก

  • ไซต์นี้เผยแพร่เพียงหน้าเดียว แต่ด้วยสคริปต์บิลด์ที่เพิ่มขึ้นเล็กน้อย เราอาจเผยแพร่หน้าเว็บได้มากขึ้น มันสามารถเผยแพร่โพสต์บล็อกได้
  • “ประสบการณ์ของนักพัฒนาซอฟต์แวร์” ขาดหายไปเล็กน้อยในที่เก็บ เราสามารถเรียกใช้สคริปต์ Node ของเราในไฟล์ที่บันทึกได้โดยใช้แพ็คเกจเช่น Nodemon หรือเพิ่ม "hot reloading" ด้วยบางอย่างเช่น BrowserSync
  • ข้อมูลที่อยู่ใน Sanity สามารถขับเคลื่อนไซต์และบริการต่างๆ ได้ คุณสามารถสร้างไซต์ประวัติย่อที่ใช้สิ่งนี้และเผยแพร่ PDF แทนหน้าเว็บ
  • คุณสามารถเพิ่ม CSS และทำให้ดูเหมือนไซต์จริงได้