สร้างและปรับแต่งไซต์ Docusaurus (พร้อมฟีเจอร์บล็อก)

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

Docusaurus เป็นหนึ่งในโปรแกรมสร้างไซต์แบบคงที่ และกำลังได้รับความนิยมอย่างรวดเร็วในชุมชนนักพัฒนาซอฟต์แวร์ เบื่อกับระบบการจัดการเนื้อหาที่ซบเซา? พบกับโดคูซอรัส! เครื่องมือสร้างไซต์แบบสแตติกที่ช่วยให้งานสำเร็จลุล่วงโดยไม่ทำให้คุณช้าลง อ่านต่อเพื่อเรียนรู้เพิ่มเติม คลิกเพื่อทวีต

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

โดคูซอรัสคืออะไร?

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

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

เนื่องจาก Docusaurus ให้ความสำคัญกับเนื้อหา จึงเหมาะสำหรับการสร้างไซต์เอกสาร เช่น Wiki นอกจากนี้ยังใช้มาร์กดาวน์ซึ่งเหมาะอย่างยิ่งสำหรับการทำงานร่วมกันและการจัดเก็บในที่เก็บคอมไพล์ ยิ่งไปกว่านั้น มันยังมีฟีเจอร์ที่น่าทึ่งมากมาย เช่น i18n, การค้นหา และธีมแบบกำหนดเอง ซึ่งเราจะพูดถึงในรายละเอียดเพิ่มเติมในภายหลัง

นี่เป็นเพียงคุณสมบัติที่โดดเด่นบางส่วนที่ทำให้ Docusaurus เป็นตัวเลือกที่ดี:

• สร้างโดยใช้ React
• รองรับ MDX v1
• รองรับการฝังส่วนประกอบ React ผ่าน Markdown
• การกำหนดเวอร์ชันเอกสาร
• ความเข้ากันได้กับ Git, Crowdin และตัวจัดการการแปลอื่น ๆ สำหรับการแปลเอกสารและการปรับใช้จำนวนมากหรือทีละรายการ

ใครใช้ Docusaurus?

Docusaurus ถูกสร้างขึ้นโดย Facebook ดังนั้นจึงไม่แปลกใจเลยที่ปัจจุบันมีการใช้งานโดยแบรนด์และบริษัทขนาดใหญ่มากมายทั่วทั้งเว็บ

นี่เป็นเพียงแบรนด์ที่ใหญ่ที่สุดบางส่วนที่ใช้ Docusaurus ในปัจจุบัน (และจะมีขึ้นในเร็วๆ นี้เนื่องจากความนิยมของ Docusaurus ยังคงเติบโต):

• อัลโกเลีย DocSearch
• ล้อเล่น
• ตอบสนองพื้นเมือง
• สุภาเบส

และกำลังเข้าร่วมอันดับมากขึ้นทุกวัน

วิธีการติดตั้ง Docusaurus

Docusaurus ติดตั้งง่ายมากและใช้เวลาเพียงไม่กี่นาที ในบทช่วยสอนนี้ เราจะสร้างไซต์เอกสารพร้อมบล็อก และเราจะปรับแต่งรูปลักษณ์ของเว็บไซต์

และนี่คือส่วนที่เจ๋งที่สุด: เราใช้เวลาน้อยกว่าหนึ่งชั่วโมงในการหมุนทุกอย่าง

มาดำน้ำกันเถอะ!

ความต้องการ

Docusarus ต้องการ Node.js 16.14 หรือใหม่กว่า เป็นไฟล์ SSG แบบแฟลต ซึ่งหมายความว่าคุณไม่จำเป็นต้องใช้ฐานข้อมูลเพิ่มเติม

หากคุณยังไม่มี Node.js 16.14+ คุณจะต้องเริ่มต้นด้วยการติดตั้ง Node.js หรืออัปเกรดเวอร์ชันปัจจุบันของคุณ จากนั้นคุณสามารถไปยังขั้นตอนการติดตั้ง Docusaurus ด้านล่าง

เราจะใช้ตัวอย่างไซต์ Docusaurus จากที่เก็บ GitHub นี้ด้วย คุณสามารถใช้มันหรือติดตั้ง Docusaurus ใหม่ทั้งหมดสำหรับบทช่วยสอนนี้

ขั้นตอนการติดตั้ง

ในการเริ่มต้นกระบวนการติดตั้ง Docusaurus คุณต้องรันคำสั่งต่อไปนี้ก่อน:

 npx [email protected] classic

การดำเนินการนี้จะสร้างโฟลเดอร์สำหรับโปรเจ็กต์ของคุณและวางโครงร่างธีมคลาสสิกไว้ข้างใน ธีมแบบคลาสสิกมีฟีเจอร์ที่กำหนดค่าไว้ล่วงหน้าแล้ว เช่น บล็อก เพจที่กำหนดเอง และเฟรมเวิร์ก CSS

หลังจากการติดตั้ง คุณต้องเรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มเซิร์ฟเวอร์ภายในเครื่อง:

 npm start

หากคุณต้องการสร้างเวอร์ชันที่ปรับให้เหมาะสมซึ่งพร้อมสำหรับการปรับใช้ คุณควรเรียกใช้สิ่งนี้แทน:

 npm run build

โครงสร้าง

เมื่อคุณติดตั้งอินสแตนซ์ Docusaurus แล้ว คุณจะสามารถเปิดไดเร็กทอรีโปรเจ็กต์และดู "โครงกระดูก" ของไซต์ใหม่ของคุณได้อย่างละเอียดยิ่งขึ้น

โครงสร้างไฟล์มีลักษณะดังนี้:

 my-website ├── blog │ ├── 2019-05-28-hola.md │ └── 2020-05-30-welcome.md ├── docs │ ├── doc1.md │ └── mdx.md ├── src │ ├── css │ │ └── custom.css │ └── pages │ ├── styles.module.css │ └── index.js ├── static │ └── img ├── docusaurus.config.js ├── package.json ├── README.md ├── sidebars.js └── yarn.lock

มีรายละเอียดบางประการที่ควรทราบเกี่ยวกับไฟล์และโฟลเดอร์เหล่านี้บางส่วน:

• /blog : มีไฟล์ทั้งหมดที่เกี่ยวข้องกับบล็อกของคุณ
• /docs : มีไฟล์ทั้งหมดที่เกี่ยวข้องกับเอกสารของคุณ คุณสามารถปรับแต่งลำดับได้ในไฟล์ sidebar.js
• /src : มีไฟล์ที่ไม่ใช่เอกสารทั้งหมด เช่น หน้าหรือส่วนประกอบที่กำหนดเอง
• /src/pages : ไฟล์ JSX/TSX/MDX ทั้งหมดจะถูกแปลงเป็นหน้า
• /static : ไฟล์สแตติกที่จะถูกคัดลอกไปยังโฟลเดอร์บิลด์สุดท้าย
• docusaurus.config.js : ไฟล์การกำหนดค่า Docusaurus
• packaged.json : ไซต์ Docusaurus แต่ละแห่งเป็นแอป React ดังนั้นที่นี่คุณจะพบการอ้างอิงและสคริปต์ทั้งหมดที่ใช้สำหรับ React
• sidebar.js : คุณสามารถระบุลำดับของเอกสารในแถบด้านข้างได้ที่นี่

ปรับแต่งการติดตั้ง Docusaurus ของคุณ

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

มาดูตัวเลือกการปรับแต่งบางอย่างที่คุณมีทันทีที่แกะกล่อง

หน้าแรก

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

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

ไฟล์การกำหนดค่า

ต่อไป เราจะเจาะลึกไปที่ไฟล์ docusaurus.config.js ที่สำคัญ และเปลี่ยนแปลงรายละเอียดที่สำคัญบางอย่างสำหรับอินสแตนซ์ของเรา

ชื่อและคำอธิบาย

ในไฟล์การกำหนดค่า คุณจะพบ:

 const config = { title: 'My Site', tagline: 'Dinosaurs are cool', url: 'https://your-docusaurus-site.com', baseUrl: '/',

เพียงเปลี่ยนรายละเอียดเหล่านี้ให้เหมาะกับความต้องการของไซต์ของคุณ จากนั้นบันทึกไฟล์

แถบนำทาง

หากต้องการแก้ไขแถบนำทาง ให้ค้นหารายการ navbar

สำหรับตัวอย่างของเราที่นี่ เราต้องการเพิ่มลิงก์ไปยัง Kinsta เปลี่ยนชื่อรายการ "บทช่วยสอน" เป็น "เอกสารเริ่มต้น" และเพิ่มโลโก้ Kinsta

นี่คือวิธีที่เราจะดำเนินการ:

 navbar: { title: 'Kinsta starters', logo: { alt: 'Kinsta Logo', src: 'img/kinsta-logo-alpha-purple.png', }, items: [ { label: 'Kinsta starters', to: '/docs/intro', }, {to: '/blog', label: 'Blog', position: 'left'}, { href: 'https://github.com/kinsta', label: 'GitHub', position: 'right', }, ], },

ส่วนท้าย

การปรับแต่งส่วนท้ายใน Docusaurus ประกอบด้วยสองส่วน: เนื้อหาส่วนท้ายและลิงก์ส่วนท้าย

เนื้อหาส่วนท้าย

เนื้อหาส่วนท้ายจำนวนมาก (ไม่รวมรายการลิงก์) สามารถวางไว้ในไฟล์ themeConfig.footer ของคุณ นี่เป็นจุดที่เหมาะสำหรับการเพิ่มโลโก้และประกาศเกี่ยวกับลิขสิทธิ์

ต่อไปนี้คือวิธีที่เราแก้ไขการกำหนดค่าส่วนท้ายของเรา:

 module.exports = { themeConfig: { footer: { logo: { alt: 'Kinsta Logo', src: 'img/kinsta-logo.png', href: 'https://kinsta.com', width: 160, height: 51, }, copyright: `Copyright ${new Date().getFullYear()} Kinsta. Built with Docusaurus.`, }, }, };

ลิงค์ส่วนท้าย

การเปลี่ยนลิงก์ส่วนท้ายจะคล้ายกับการเปลี่ยนแถบนำทางด้านบน ค้นหาส่วน footer ใน docusaurus.config.js และแก้ไขจนกว่าจะตรงกับความต้องการของคุณ

นี่คือสิ่งที่เราได้เปลี่ยนส่วน footer ให้มีลักษณะดังนี้:

 footer: { style: 'dark', links: [ { title: 'Docs', items: [ { label: 'Kinsta starters', to: '/docs/intro', }, ], }, { title: 'Talk with us', items: [ { label: 'Discord', href: 'https://discord.gg/vjRPMhFaBA', }, { label: 'Support', href: 'https://kinsta.com/kinsta-support/', }, { label: 'Twitter', href: 'https://twitter.com/kinsta', }, ], }, { title: 'More', items: [ { label: 'Application Hosting', href: 'https://kinsta.com/application-hosting/', }, { label: 'Database Hosting', href: 'https://kinsta.com/database-hosting/', }, { label: 'WordPress Hosting', href: 'https://kinsta.com/wordpress-hosting/', }, { label: 'DevKinsta', href: 'https://kinsta.com/devkinsta/', }, ], }, ], };

สีและ CSS

ค่าที่ตั้งไว้ล่วงหน้าแบบคลาสสิกสำหรับ Docusaurus ใช้เฟรมเวิร์ก Infima CSS ด้วยเหตุนี้ผู้สร้าง Docusaurus จึงสร้างเครื่องมือเว็บที่มีประโยชน์มากเพื่อช่วยคุณเปลี่ยนสีและองค์ประกอบ CSS และการประกาศอื่นๆ

เมื่อคุณป้อนค่ากำหนดของคุณบนหน้าแล้ว เครื่องมือจะสร้างไฟล์ custom.css — พร้อมชุดโทนสีเสริมที่สวยงาม — ในเวลาไม่กี่วินาที จากนั้น คุณสามารถคัดลอกไฟล์ CSS ใหม่นี้ไปยังไดเร็กทอรี /src/css ของโปรเจ็กต์เพื่อใช้อ้างอิง

เอกสาร

เอกสารทั้งหมดบนเว็บไซต์ใหม่ของคุณจะถูกจัดเก็บไว้ในโฟลเดอร์ /docs แน่นอน คุณสามารถเปลี่ยนชื่อโฟลเดอร์ใน docusaurus.config.js

เพียงสร้างไฟล์มาร์กดาวน์ในตัวแก้ไขข้อความหรือ HTML แล้ววางลงในโฟลเดอร์นั้น แต่ละไฟล์ควรมีลักษณะดังนี้:

 --- id: the-id title: Title --- # Rest of the document

Docusaurus สร้าง URL สำหรับบทความในโฟลเดอร์ย่อยนั้นตาม ID: yourdomain.com/docs/{id}

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

สมมติว่าเราสร้างโฟลเดอร์เอกสารใหม่ที่ชื่อว่า “Starters” หากเราต้องรีเฟรชหน้าแรกและคลิกลิงก์ "Starters" ใหม่ที่เพิ่มโดยอัตโนมัติในแถบด้านข้าง เราจะพบข้อผิดพลาด เนื่องจากยังไม่มีหน้าดัชนีในโฟลเดอร์ใหม่ของเรา

วิธีแก้ไขที่ง่ายที่สุดคือสร้างไฟล์ _category_.json ที่จะสร้างดัชนีของเพจทั้งหมดที่จัดเก็บไว้ในโฟลเดอร์นี้ คุณต้องเพิ่มรหัสต่อไปนี้:

 { "label": "Starters", "position": 2, "link": { "type": "generated-index", "description": "All Kinsta Starters" }, };

อย่างที่คุณเห็น แถบด้านข้างจะสร้างใหม่เพื่อให้ตรงกับโครงสร้างของไฟล์ของคุณ นั่นเป็นเพราะไฟล์ sidebar.js มี tutorialSidebar : [{type: 'autogenerated', dirName: '.'}],

หากคุณต้องการดูแลสิ่งนี้ด้วยตัวเอง คุณสามารถเปลี่ยนเป็นสิ่งนี้:

 tutorialSidebar: [ 'intro', 'hello', { type: 'category', label: 'Tutorial', items: ['tutorial-basics/create-a-document'], }, ],

บล็อก

Docusaurus มีโมดูลบล็อกที่ลื่นไหล การมีบล็อกไว้ข้างเว็บไซต์หลักจะมีประโยชน์มากในการแจ้งฐานผู้ใช้ของคุณเกี่ยวกับการเปลี่ยนแปลงที่เกิดขึ้นในโครงการของคุณ หรือเพื่อเรียกใช้บันทึกโครงการต่อไปในรูปแบบของบันทึกการเปลี่ยนแปลง

แต่ละโพสต์ประกอบด้วยส่วนสำคัญดังนี้:

 --- slug: docusaurus-starter title: Docusaurus Starter authors: palmiak tags: [starters, docusaurus] ---

…และแน่นอนว่าเนื้อหานั้น นอกจากนี้ยังมีแท็ก <!--truncate--> ที่มีประโยชน์มาก ซึ่งช่วยจำกัดการสรุปโพสต์ที่แสดงในรายการโพสต์ทั้งหมด

การสร้างไฟล์ authors.yml เพื่อเป็นเครดิตก็เป็นความคิดที่ดีเช่นกัน ไฟล์มีลักษณะดังนี้:

 palmiak: name: Maciek Palmowski title: DevRel url: https://github.com/palmiak image_url: https://github.com/palmiak.png

ด้วยไฟล์นี้ คุณจะมีข้อมูลทั้งหมดของผู้เขียนในที่เดียวเพื่อให้อ้างอิงได้ง่าย

วิธีปรับใช้เว็บไซต์ Docusaurus ของคุณที่ Kinsta

นอกเหนือจากเว็บไซต์ WordPress แอปพลิเคชันแบบสแตนด์อโลน และฐานข้อมูลแล้ว Kinsta สามารถโฮสต์เว็บไซต์แบบคงที่ได้

ซึ่งหมายความว่าเหมาะสำหรับไซต์ Docusaurs ของคุณ — และสำหรับการจัดการโครงการเว็บทั้งหมดของคุณ — โดยตรงจากแดชบอร์ด MyKinsta ของคุณ

เมื่อแอปพลิเคชันของคุณได้รับการปรับใช้แล้ว คุณจะสามารถตรวจสอบการวิเคราะห์อย่างต่อเนื่องของแอปพลิเคชันของคุณ ทั้งแบบสดและแบบย้อนหลัง พร้อมการวัดผล ได้แก่:

• การใช้แบนด์วิธ
• เวลาในการสร้าง
• เวลาทำงาน
• การใช้งานซีพียู
• การใช้ความจำ

ตั้งแต่ต้นจนจบ ขั้นตอนการปรับใช้ผ่าน MyKinsta ใช้เวลาเพียงไม่กี่นาที

มาเริ่มกันเลย!

ข้อกำหนดเบื้องต้น: การกำหนดค่าโครงการ Docusaurus ของคุณ

ในการโฮสต์โครงการ Docusaurus ของคุณบนแพลตฟอร์มการโฮสต์แอปพลิเคชันของ Kinsta คุณจะต้อง:

1. รวมฟิลด์ชื่อในไฟล์ package.json ของคุณ (อาจเป็นอะไรก็ได้และจะไม่ส่งผลต่อการปรับใช้ของคุณ)
2. รวมสคริปต์บิลด์ในไฟล์ package.json ของคุณ (โครงการ Docusaurus ของคุณควรมีสิ่งนี้อยู่แล้ว)
3. ติดตั้งแพ็คเกจเซิร์ฟเวอร์ npm และตั้งค่าสคริปต์เริ่มต้นเพื่อให้บริการบิลด์

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

ปรับใช้โครงการ Docusaurus ของคุณ

ทำตามขั้นตอนง่ายๆ เหล่านี้เพื่อเชื่อมต่อกับบัญชี GitHub และเปิดไซต์ Docusaurus ของคุณ:

1. ลงชื่อเข้าใช้บัญชี MyKinsta ของคุณและไปที่แท็บ แอปพลิเคชัน จากเมนูด้านซ้ายมือ
2. คลิกที่ปุ่ม เพิ่มบริการ สีน้ำเงินและเลือก แอปพลิเคชัน จากเมนูแบบเลื่อนลง

   

3. หากคุณยังไม่ได้เชื่อมต่อกับบัญชี GitHub ผ่าน MyKinsta คุณจะเห็นโมดอลที่กระตุ้นให้คุณทำเช่นนั้น คลิกปุ่ม ดำเนินการต่อด้วย GitHub เพื่อดำเนินการต่อ

   

4. หน้าต่างใหม่จะเปิดขึ้นโดยขออนุญาตจากคุณเพื่ออนุญาตให้ Kinsta เข้าถึงและจัดการทรัพยากร GitHub ของคุณ ตรวจสอบว่าคุณลงชื่อเข้าใช้บัญชี GitHub ที่ถูกต้อง จากนั้นคลิกที่ปุ่ม อนุญาต Kinsta สีเขียวใกล้กับด้านล่าง

   

5. ตอนนี้คุณมาถึงวิซาร์ดการรวม GitHub แล้ว นี่เป็นขั้นตอนสุดท้ายก่อนที่คุณจะปรับใช้ไซต์ของคุณ พิจารณาฟิลด์ที่แสดงอย่างระมัดระวังและกรอกข้อมูลตามการกำหนดค่า GitHub และข้อกำหนดของโครงการของคุณ หากคุณมี Dockerfile ในที่เก็บของคุณ คุณสามารถใช้สิ่งนี้เพื่อตั้งค่าคอนเทนเนอร์อิมเมจ มิฉะนั้น Kinsta จะตั้งค่าอิมเมจคอนเทนเนอร์ให้คุณโดยอัตโนมัติ โปรดทราบว่าคุณอาจต้องแก้ไขสิทธิ์ GitHub ก่อนจึงจะสามารถดำเนินการต่อได้ โดยเฉพาะอย่างยิ่งหากนี่เป็นการปรับใช้ครั้งแรกผ่าน Kinsta

   

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

   

6. หลังจากที่คุณเลือกและยืนยันตัวเลือกของคุณแล้ว คุณจะเห็นรายละเอียดการปรับใช้ของคุณ รวมถึงตัวเลือกใน Change settings หรือ Redeploy

   

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

   

หากคุณมาถึงขั้นนี้โดยไม่มีข้อผิดพลาด ขอแสดงความยินดีด้วย — คุณเพิ่งปรับใช้ไซต์ Docusaurus ของคุณผ่าน Kinsta ได้สำเร็จ! แอปพลิเคชันของคุณ (เช่น เว็บไซต์แบบสแตติก) จะพร้อมใช้งานทันทีที่คุณดำเนินการตามวิซาร์ด คุณสามารถดูได้ที่ URL ของแอปพลิเคชันของคุณ ซึ่งโดยทั่วไปคือ https:// your-docusaurus-site .kinsta.app

นี่คือรูปลักษณ์แรกของเราที่ไซต์ตัวอย่างของเราบน Kinsta:

สรุป

ด้วยคุณสมบัติที่ทรงพลังอย่างน่าประหลาดใจ การออกแบบที่เป็นมิตร การนำทางที่ใช้งานง่าย และการมุ่งเน้นที่เนื้อหา จึงไม่ยากที่จะเข้าใจว่าทำไม Docusaurus จึงถือเป็นเครื่องมือที่ยอดเยี่ยมสำหรับนักพัฒนาที่ต้องการปรับใช้และบำรุงรักษาไซต์เอกสารแบบคงที่ที่มีความคล่องตัวและมีการจัดระเบียบอย่างดี และ/หรือ บล็อก เปลี่ยนเกมการพัฒนาเว็บของคุณ! บอกลา CMS ที่เทอะทะและสวัสดีกับ Docusaurus ซึ่งเป็นเครื่องมือสร้างเว็บไซต์แบบสแตติกง่ายๆ ที่จะเปลี่ยนแปลงเกมของผู้พัฒนา ตรวจสอบได้ที่นี่ ️ Click to Tweet

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

คุณได้สร้างอะไรกับ Docusaurus หรือไม่? แบ่งปันโครงการและประสบการณ์ของคุณกับเราในส่วนความคิดเห็นด้านล่าง