การเปลี่ยนจาก WordPress เป็น Hugo

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

ในช่วงเวลาเดียวกัน ฉันเริ่มอ่านมากขึ้นเรื่อยๆ เกี่ยวกับตัวสร้างไซต์แบบคงที่และ JAMstack (บทความนี้โดย Chris Ferdinandi ทำให้ฉันเชื่อ) ด้วยโปรเจ็กต์ส่วนบุคคล คุณสามารถละเลยปัญหาที่หลากหลายได้ แต่ในฐานะมืออาชีพ คุณต้องแน่ใจว่าคุณผลิตผลงานที่มีคุณภาพดีที่สุดเท่าที่จะเป็นไปได้ ประสิทธิภาพ ความปลอดภัย และการเข้าถึงเป็นสิ่งแรกที่ต้องคำนึงถึง คุณสามารถเพิ่มประสิทธิภาพ WordPress ให้ค่อนข้างเร็วได้อย่างแน่นอน แต่เร็วกว่าไซต์สแตติกบน CDN ที่ไม่จำเป็นต้องสืบค้นฐานข้อมูลหรือสร้างหน้าของคุณทุกครั้ง? ไม่ง่ายเลย

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

Hugo สร้างขึ้นใน Go ซึ่งเป็นภาษาที่ค่อนข้างเร็วและใช้งานง่ายเมื่อคุณคุ้นเคยกับไวยากรณ์ ซึ่งฉันจะอธิบาย ทั้งหมดนี้รวบรวมไว้ในเครื่อง ดังนั้นคุณจึงสามารถดูตัวอย่างไซต์ของคุณได้จากบนคอมพิวเตอร์ของคุณ โปรเจ็กต์จะถูกบันทึกลงในที่เก็บส่วนตัว นอกจากนี้ ฉันจะแนะนำวิธีการโฮสต์บน Netlify และบันทึกรูปภาพของคุณบน Git LFS (Large File Storage) สุดท้ายนี้ เราจะมาดูกันว่าเราจะตั้งค่าระบบจัดการเนื้อหาเพื่อเพิ่มบทความและรูปภาพได้อย่างไร (คล้ายกับแบ็กเอนด์ของ WordPress) ด้วย Netlify CMS

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

คุณจะต้องคุ้นเคยกับ HTML, CSS, JS, Git และเทอร์มินัลคำสั่ง การมีแนวคิดเกี่ยวกับภาษาเทมเพลต เช่น Liquid อาจมีประโยชน์เช่นกัน แต่เราจะตรวจสอบเทมเพลตของ Hugo เพื่อช่วยคุณเริ่มต้น อย่างไรก็ตาม ฉันจะให้รายละเอียดมากที่สุด!

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

1. การส่งออกเนื้อหาจาก WordPress
2. การเตรียมการออกแบบบล็อกของคุณ
3. การตั้งค่าที่เก็บใหม่
4. การเปิดใช้งาน Git LFS (ไม่บังคับ)
5. การสร้างเว็บไซต์บน Netlify
6. การเตรียมพร้อมสำหรับ Netlify Large Media (ทางเลือก)
7. การตั้งค่า Hugo บนคอมพิวเตอร์ของคุณ
8. การสร้างธีมที่กำหนดเองของคุณ
9. หมายเหตุเกี่ยวกับไวยากรณ์ Hugo
10. เนื้อหาและข้อมูล
11. การปรับใช้บน Netlify
12. การตั้งค่าโดเมนที่กำหนดเอง
13. การแก้ไขเนื้อหาบน Netlify CMS

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

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

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

บทช่วยสอนนี้จะใช้เครื่องมือบรรทัดคำสั่งบางอย่าง เช่น npm และ Git หากคุณยังไม่มี ให้ติดตั้งบนเครื่องของคุณ:

• ติดตั้ง Git
• ติดตั้ง Node.js และ npm (Node.js รวม npm)
• ติดตั้ง Homebrew (แนะนำสำหรับผู้ใช้ macOS/Linux)

ด้วยการติดตั้งเหล่านี้ มาเริ่มกันเลย!

1. การส่งออกเนื้อหาจาก WordPress

ก่อนอื่น เราจะต้องส่งออกเนื้อหาของคุณจาก WordPress: โพสต์ เพจ และการอัปโหลด มีเครื่องมือบางอย่างที่ Hugo กล่าวถึง แต่โดยส่วนตัวแล้ว มีเพียงหนึ่งเครื่องมือเท่านั้นที่ใช้งานได้: blog2md อันนี้ใช้งานได้โดยเรียกใช้ไฟล์ JavaScript ด้วย Node.js ในเทอร์มินัลคำสั่งของคุณ ใช้ไฟล์ XML ที่ส่งออกโดย WordPress และส่งออกไฟล์ Markdown ด้วยโครงสร้างที่ถูกต้อง แปลง HTML เป็น Markdown และเพิ่มสิ่งที่เรียกว่า Front Matter ซึ่งเป็นวิธีการจัดรูปแบบข้อมูลเมตาที่จุดเริ่มต้นของแต่ละไฟล์

ไปที่ผู้ดูแลระบบ WordPress ของคุณและเปิดเมนูเครื่องมือ ส่งออกเมนูย่อย คุณสามารถส่งออกสิ่งที่คุณต้องการได้จากที่นั่น ฉันจะอ้างถึงไฟล์ที่ส่งออกเป็น YOUR-WP-EXPORT.xml

คุณสามารถเลือกข้อมูลที่คุณต้องการส่งออกจากบล็อก WordPress ของคุณได้

ภายในโฟลเดอร์ WP2Hugo ของเรา ฉันแนะนำให้สร้างโฟลเดอร์ใหม่ชื่อ blog2md ซึ่งคุณจะวางไฟล์จากเครื่องมือ blog2md รวมถึงการส่งออก XML จาก WordPress ( YOUR-WP-EXPORT.xml ) นอกจากนี้ให้สร้างโฟลเดอร์ใหม่ในนั้นโดย out ว่าโพสต์ Markdown ของคุณจะไปที่ใด จากนั้นเปิดเทอร์มินัลคำสั่งของคุณ และนำทางด้วยคำสั่ง cd ไปยังโฟลเดอร์ "blog2md" ที่สร้างขึ้นใหม่ (หรือพิมพ์ cd ด้วยช่องว่างแล้วลากโฟลเดอร์ไปที่เทอร์มินัล)

ตอนนี้คุณสามารถเรียกใช้คำสั่งต่อไปนี้เพื่อรับโพสต์ของคุณ:

 npm install node index.js w YOUR-WP-EXPORT.xml out

ดูใน /WP2Hugo/blog2md/out เพื่อตรวจสอบว่าโพสต์ทั้งหมดของคุณ (และหน้าที่เป็นไปได้) อยู่ที่นั่นหรือไม่ หากเป็นเช่นนั้น คุณอาจสังเกตเห็นว่ามีบางอย่างเกี่ยวกับความคิดเห็นในเอกสารประกอบ: ฉันมีบล็อกที่ปราศจากความคิดเห็น ดังนั้นฉันจึงไม่ต้องดำเนินการใดๆ แต่ Hugo เสนอทางเลือกมากมายสำหรับความคิดเห็น หากคุณมีความคิดเห็นใดๆ เกี่ยวกับ WordPress คุณสามารถส่งออกเพื่อนำไปใช้ใหม่ในภายหลังด้วยบริการพิเศษอย่าง Disqus

หากคุณคุ้นเคยกับ JS เพียงพอแล้ว คุณสามารถปรับแต่งไฟล์ index.js เพื่อเปลี่ยนวิธีที่ไฟล์โพสต์จะออกมาโดยแก้ไขฟังก์ชัน wordpressImport คุณอาจต้องการถ่ายภาพเด่น ลบลิงก์ถาวร เปลี่ยนรูปแบบวันที่ หรือกำหนดประเภท (ถ้าคุณมีโพสต์และเพจ) คุณจะต้องปรับให้เข้ากับความต้องการของคุณ แต่รู้ว่าลูป ( posts.forEach(function(post){ ... }) ) ทำงานผ่านโพสต์ทั้งหมดจากการส่งออก ดังนั้นคุณสามารถตรวจสอบเนื้อหา XML ของ แต่ละโพสต์ในลูปนั้นและปรับแต่ง Front Matter ของคุณ

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

เมื่อคุณมีไฟล์ Markdown ที่ส่งออกแล้ว เนื้อหาของคุณก็พร้อม ขั้นตอนต่อไปคือการทำให้ธีม WordPress ของคุณพร้อมใช้งานใน Hugo

2. เตรียมการออกแบบบล็อกของคุณ

บล็อกของฉันมีเลย์เอาต์ทั่วไปที่มีส่วนหัว แถบนำทาง เนื้อหาและแถบด้านข้าง และส่วนท้าย ซึ่งตั้งค่าได้ค่อนข้างง่าย แทนที่จะคัดลอกบางส่วนของธีม WordPress ของฉัน ฉันสร้างใหม่ทั้งหมดตั้งแต่เริ่มต้นเพื่อให้แน่ใจว่าไม่มีสไตล์ที่ไม่จำเป็นหรือมาร์กอัปที่ไร้ประโยชน์ นี่เป็นเวลาที่ดีในการใช้เทคนิค CSS ใหม่ ( pssst… Grid ยอดเยี่ยมมาก! ) และตั้งค่ากลยุทธ์การตั้งชื่อที่สอดคล้องกันมากขึ้น (เช่น คำแนะนำของ CSS Wizardry) คุณสามารถทำสิ่งที่ต้องการได้ แต่จำไว้ว่าเรากำลังพยายามเพิ่มประสิทธิภาพบล็อกของเรา ดังนั้นคุณควรตรวจสอบสิ่งที่คุณมีและตัดสินใจว่ายังควรเก็บไว้หรือไม่

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

เมื่อฉันพูดง่าย ฉันหมายถึงง่ายจริงๆ

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

3. การตั้งค่าที่เก็บใหม่

ตอนนี้มันหมดหนทางแล้ว เราต้องตั้งค่าพื้นที่เก็บข้อมูล ฉันจะถือว่าคุณจะต้องสร้างที่เก็บใหม่สำหรับสิ่งนี้ ซึ่งจะเป็นโอกาสที่ดีในการใช้ Git LFS (Large File System) เหตุผลที่ฉันแนะนำให้ทำเช่นนี้ตอนนี้ก็คือการนำ Git LFS ไปใช้เมื่อคุณมีรูปภาพเป็นร้อยๆ รูปอยู่แล้วนั้นไม่ราบรื่นนัก ฉันทำไปแล้ว แต่มันเป็นเรื่องน่าปวดหัวที่คุณอยากจะหลีกเลี่ยง สิ่งนี้จะให้ประโยชน์อื่นๆ กับ Netlify ด้วย

ในขณะที่ฉันจะทำทั้งหมดนี้ผ่าน Bitbucket และ Git GUI ที่เป็นกรรมสิทธิ์ของพวกเขา Sourcetree คุณสามารถทำสิ่งนี้ได้ด้วย GitHub และ GitLab และเครื่องมือเดสก์ท็อปของพวกเขาเอง คุณสามารถทำได้โดยตรงในเทอร์มินัลคำสั่ง แต่ฉันชอบที่จะทำให้กระบวนการเป็นอัตโนมัติและลดความซับซ้อนให้มากที่สุด ลดความเสี่ยงที่จะเกิดข้อผิดพลาดที่งี่เง่า

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

ฉันขอแนะนำให้สร้างสาขา dev (หรือ stage ) เพื่อให้สาขาหลักของคุณใช้สำหรับการปรับใช้จริงอย่างเคร่งครัด นอกจากนี้ยังจำกัดการสร้างใหม่เมื่อคุณทำกับชุดการเปลี่ยนแปลงที่อาจเกิดขึ้นเสร็จแล้วเท่านั้น การสร้างสาขาสามารถทำได้ในเครื่องหรือบนเว็บเพจระยะไกลของที่เก็บของคุณ

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

4. เปิดใช้งาน Git LFS (ไม่บังคับ)

Git Large File System เป็นคุณลักษณะ Git ที่ช่วยให้คุณสามารถบันทึกไฟล์ขนาดใหญ่ได้อย่างมีประสิทธิภาพมากขึ้น เช่น เอกสาร Photoshop ไฟล์ ZIP และรูปภาพในกรณีของเรา เนื่องจากรูปภาพอาจต้องมีการกำหนดเวอร์ชันแต่ไม่ใช่โค้ดที่แน่นอน จึงควรจัดเก็บให้แตกต่างจากไฟล์ข้อความปกติ วิธีการทำงานคือการจัดเก็บรูปภาพบนเซิร์ฟเวอร์ระยะไกล และไฟล์ในที่เก็บของคุณจะเป็นไฟล์ข้อความที่มีตัวชี้ไปยังทรัพยากรระยะไกลนั้น

อนิจจา ไม่ใช่ตัวเลือกที่คุณเพียงแค่คลิกเพื่อเปิดใช้งาน คุณต้องตั้งค่าที่เก็บของคุณเพื่อเปิดใช้งาน LFS และต้องมีการทำงานบางอย่างในเครื่อง เมื่อติดตั้ง Git แล้ว คุณจะต้องติดตั้งส่วนขยาย Git-LFS:

 git lfs install

หากเช่นฉัน คำสั่งนั้นไม่ได้ผลสำหรับคุณ ให้ลองใช้ทางเลือก Homebrew (สำหรับ macOS หรือ Linux):

 brew install git-lfs

เมื่อเสร็จแล้ว คุณจะต้องระบุไฟล์ที่จะติดตามในที่เก็บของคุณ ฉันจะโฮสต์รูปภาพทั้งหมดที่ฉันอัปโหลดในโฟลเดอร์ /upload ของ WordPress ในโฟลเดอร์ที่มีชื่อเหมือนกันในการตั้งค่า Hugo ของฉัน ยกเว้นว่าโฟลเดอร์นี้จะอยู่ในโฟลเดอร์ /static (ซึ่งจะแก้ไขเป็นรูทเมื่อคอมไพล์แล้ว) ตัดสินใจเกี่ยวกับโครงสร้างโฟลเดอร์ของคุณและติดตามไฟล์ของคุณภายใน:

 git lfs track "static/uploads/*"

การดำเนินการนี้จะติดตามไฟล์ใดๆ ภายในโฟลเดอร์ /static/uploads คุณยังสามารถใช้สิ่งต่อไปนี้:

 git lfs track "*.jpg"

สิ่งนี้จะติดตามไฟล์ JPG ใด ๆ และทั้งหมดในที่เก็บของคุณ คุณสามารถผสมและจับคู่เพื่อติดตาม JPG ในบางโฟลเดอร์เท่านั้น

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

ทีนี้มาดูที่ Netlify

5. การสร้างไซต์บน Netlify

ณ จุดนี้ พื้นที่เก็บข้อมูลของคุณได้รับการตั้งค่า ดังนั้นคุณสามารถสร้างบัญชีบน Netlify ได้ คุณสามารถเข้าสู่ระบบด้วยบัญชี GitHub, GitLab หรือ Bitbucket ได้หากต้องการ เมื่ออยู่บนแดชบอร์ด ให้คลิกปุ่ม "ไซต์ใหม่จาก Git" ที่มุมบนขวา และสร้างไซต์ Netlify ใหม่ของคุณ

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

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

สำหรับตอนนี้ ในการตั้งค่าไซต์ คลิก "เปลี่ยนชื่อไซต์" และตั้งชื่อไซต์ของคุณตามที่คุณต้องการ ฉันจะใช้ chris-smashing-hugo-blog ตอนนี้เราจะสามารถเข้าถึงไซต์ได้ผ่านทาง chris-smashing-hugo-blog.netlify.com : หน้า 404 ที่สวยงาม!

6. การเตรียมพร้อมสำหรับ Netlify Large Media (ไม่บังคับ)

หากคุณตั้งค่า Git LFS และวางแผนที่จะใช้ Netlify คุณจะต้องทำตามขั้นตอนเหล่านี้ ซับซ้อนกว่าเล็กน้อยแต่คุ้มค่าแน่นอน: ช่วยให้คุณสามารถตั้งค่าสตริงการสืบค้นบน URL รูปภาพที่จะแปลงโดยอัตโนมัติ

สมมติว่าคุณมีลิงก์ไปยัง portrait.jpg ซึ่งเป็นภาพที่มีขนาด 900×1600 พิกเซล ด้วย Netlify Large Media คุณสามารถเรียกไฟล์ portrait.jpg?nf_resize=fit&w=420 ซึ่งจะปรับขนาดตามสัดส่วน หากคุณกำหนดทั้ง w และ h และตั้งค่า nf_resize nf_resize=smartcrop มันจะปรับขนาดโดยการครอบตัดเพื่อโฟกัสที่จุดสนใจของภาพ ฉันพบว่าวิธีนี้เป็นวิธีที่ดีในการมีภาพขนาดย่อเช่นเดียวกับที่สร้างโดย WordPress โดยไม่จำเป็นต้องใช้ไฟล์หลายไฟล์สำหรับรูปภาพในที่เก็บของฉัน

หากฟังดูน่าสนใจ มาตั้งค่ากันเถอะ!

ขั้นตอนแรกคือการติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Netlify ผ่าน npm:

 npm install netlify-cli -g

หากใช้งานได้ การรันคำสั่ง netlify จะส่งผลให้มีข้อมูลเกี่ยวกับเครื่องมือ

จากนั้น คุณจะต้องแน่ใจว่าคุณอยู่ในโฟลเดอร์ที่เก็บในเครื่องของคุณ (ที่ฉันตั้งชื่อว่า “hugorepo” ไว้ก่อนหน้านี้) และดำเนินการ:

 netlify login

อนุญาตโทเค็น ต่อไป เราจะต้องติดตั้งปลั๊กอิน Netlify Large Media วิ่ง:

 netlify plugins:install netlify-lm-plugin netlify lm:install

ควรมีบรรทัดคำสั่งแสดงที่ส่วนท้ายของข้อความผลลัพธ์ที่คุณต้องคัดลอก (ซึ่งควรมีลักษณะ /Users/YOURNAME/.netlify/helper/path.bash.inc บน Mac) — เรียกใช้ โปรดทราบว่า Keychain อาจถามรหัสผ่านผู้ดูแลระบบเครื่องของคุณบน macOS

ขั้นตอนต่อไปคือการเชื่อมโยง Netlify:

 netlify link

คุณสามารถระบุชื่อเว็บไซต์ของคุณได้ที่นี่ (ฉันระบุชื่อ chris-smashing-hugo-blog ฉันให้ไว้ก่อนหน้านี้) ด้วยสิ่งนี้ คุณเพียงแค่ต้องตั้งค่าฟีเจอร์สื่อขนาดใหญ่โดยดำเนินการดังต่อไปนี้:

 netlify lm:setup

ยอมรับการเปลี่ยนแปลงใหม่เหล่านี้กับที่เก็บในเครื่องของคุณ และส่งไปยังสาขาการพัฒนาระยะไกล ฉันมีข้อผิดพลาดเล็กน้อยกับ Sourcetree และ Keychain ตามบรรทัดของ git "credential-netlify" is not a git command หากเป็นกรณีของคุณ ให้ลองใช้คำสั่งเหล่านี้ด้วยตนเอง:

 git add -A git commit -m "Set up Netlify Large media" git push

หากไม่ได้ผล คุณอาจต้องติดตั้ง Netlify credential Helper นี่คือวิธีการดำเนินการกับ Homebrew:

 brew tap netlify/git-credential-netlify brew install git-credential-netlify

ลองส่งคอมมิตของคุณตอนนี้ (ด้วย GUI หรือเทอร์มินัลคำสั่ง): มันน่าจะใช้ได้!

หมายเหตุ : หากคุณเปลี่ยนรหัสผ่าน Netlify ให้เรียกใช้ netlify logout และ netlify login อีกครั้ง

คุณอาจถามว่า: “ทั้งหมดนี้ และเรายังไม่ได้เริ่มต้น Hugo build ของเราเลยหรือ” ใช่ ฉันรู้ มันต้องใช้เวลาซักพัก แต่การเตรียมการทั้งหมดสำหรับการเปลี่ยนแปลงเสร็จสิ้นแล้ว ตอนนี้เราสามารถตั้งค่าบล็อก Hugo ได้แล้ว!

7. การตั้งค่า Hugo บนคอมพิวเตอร์ของคุณ

ก่อนอื่นคุณต้องติดตั้ง Hugo บนคอมพิวเตอร์ของคุณด้วยตัวเลือกที่มีให้ ฉันจะใช้ Homebrew แต่ผู้ใช้ Windows สามารถใช้ Scoop หรือ Chocolatey หรือดาวน์โหลดแพ็คเกจได้โดยตรง

 brew install hugo

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

 hugo new site your_temporary_folder

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

 hugo new site . --force

ตอนนี้คุณมีไซต์ Hugo ซึ่งคุณสามารถหมุนด้วยคำสั่งนี้:

 hugo server

คุณจะได้รับตัวอย่างในเครื่องบน localhost น่าเศร้าที่คุณไม่มีเนื้อหาและไม่มีธีมของคุณเอง ไม่ต้องกังวล เราจะทำการตั้งค่านั้นในไม่ช้า!

ก่อนอื่นมาดูไฟล์การกำหนดค่า ( config.toml ในกรณีของฉัน): มาตั้งชื่อบล็อกและ URL ฐาน (ต้องตรงกับ URL บนแดชบอร์ด Netlify ของคุณ):

 title = "Chris' Smashing Hugo Blog" baseURL = "https://chris-smashing-hugo-blog.netlify.com"

ลิงก์นี้จะถูกเขียนทับในขณะที่คุณพัฒนาในเครื่อง ดังนั้นคุณไม่ควรพบข้อผิดพลาด 404

ให้ Hugo บทความที่ส่งออกของเราในรูปแบบ Markdown พวกเขาควรจะอยู่ในโฟลเดอร์ /WP2Hugo/blog2md/out จากขั้นตอนแรก ในโฟลเดอร์ Hugo (หรือที่รู้จักในชื่อไดเร็กทอรีที่เก็บในเครื่อง) ให้เข้าถึงโฟลเดอร์ content และสร้างโฟลเดอร์ย่อยชื่อ posts วางไฟล์ Markdown ไว้ที่นั่น แล้วมาตั้งค่าธีมกัน

8. การสร้างธีมที่กำหนดเองของคุณ

สำหรับขั้นตอนนี้ ฉันแนะนำให้ดาวน์โหลด Saitoสำเร็จรูป ซึ่งเป็นธีมที่มีบางส่วนทั้งหมดที่คุณต้องใช้ในการเริ่มต้น (และไม่มีสไตล์) ซึ่งเป็นจุดเริ่มต้นที่มีประโยชน์มาก คุณสามารถดูคอลเลกชันของธีมสำเร็จรูปสำหรับ Hugo ได้หากต้องการข้ามขั้นตอนนี้ มันขึ้นอยู่กับคุณ!

จากโฟลเดอร์ที่เก็บในเครื่อง ให้โคลนธีมเป็น themes/saito :

 git submodule add https://github.com/hakuoku/saito-boilerplate.git themes/saito

คุณสามารถเปลี่ยนชื่อโฟลเดอร์นี้เป็นอะไรก็ได้ที่คุณต้องการ เช่น cool-theme คุณจะต้องแจ้งการกำหนดค่า Hugo ของคุณว่าต้องการใช้ธีมใดโดยแก้ไขไฟล์ config.toml/yaml/json แก้ไขค่าของธีมเป็น saito หรือ cool-theme หรือชื่อโฟลเดอร์ของธีมของคุณ การแสดงตัวอย่างของคุณควรจะแสดงชื่อบล็อกของคุณพร้อมกับบรรทัดลิขสิทธิ์ มันเริ่มต้นใช่มั้ย?

เปิดไฟล์ layout/partials/home.html ของธีมแล้วแก้ไขเพื่อแสดงเนื้อหาของคุณ โดยจำกัดเพียงห้ารายการแรกที่เป็นประเภท posts (ภายในโฟลเดอร์ content/posts/ ) โดยมี range , first และ where :

 <div class="container"> {{ range first 5 (where .Paginator.Pages "Type" "posts") }} <article class="post post--{{ .Params.class }}"> <h2 class="post__title">{{ .Title }}</h2> <section class="post__content"> {{ .Content }} </section> </article> {{ end }} </div>

ขณะนี้เนื้อหาของคุณสามารถมองเห็นได้ด้วยวิธีพื้นฐานที่สุด ได้เวลาทำให้เป็นของคุณแล้ว มาดำน้ำกันเถอะ!

เทมเพลตกับ Hugo

คุณสามารถอ่านเทมเพลต Introduction to Hugo ก่อนได้หากต้องการ แต่ฉันจะพยายามอธิบายข้อมูลสำคัญบางประการที่จะช่วยให้คุณเข้าใจพื้นฐาน

การดำเนินการทั้งหมดใน Hugo ถูกกำหนดไว้ภายในตัวคั่น: วงเล็บปีกกาคู่ (เช่น {{ .Title }} ) ซึ่งน่าจะคุ้นเคยหากคุณเคยทำเทมเพลตมาก่อน หากคุณยังไม่มี ให้คิดว่ามันเป็นวิธีดำเนินการหรือเพิ่มค่าที่จุดใดจุดหนึ่งในมาร์กอัปของคุณ สำหรับบล็อก จะลงท้ายด้วยแท็ก {{ end }} สำหรับการดำเนินการทั้งหมดยกเว้นรหัสย่อ

ธีมมีโฟลเดอร์ layout ย์เอาต์ซึ่งมีชิ้นส่วนของเลย์เอาต์ โฟลเดอร์ _default จะเป็นจุดเริ่มต้นของ Hugo โดย baseof.html คือ ( คุณเดามัน! ) ฐานของเลย์เอาต์ของคุณ มันจะเรียกแต่ละองค์ประกอบที่เรียกว่า “บางส่วน” (เพิ่มเติมเกี่ยวกับสิ่งนี้ในเอกสารประกอบของ Hugo เกี่ยวกับแม่แบบบางส่วน) คล้ายกับวิธีที่คุณจะใช้ include ใน PHP ซึ่งคุณอาจเคยเห็นในธีม WordPress ของคุณแล้ว Partials สามารถเรียก partials อื่น ๆ ได้ - อย่าทำให้มันวนเป็นอนันต์

คุณสามารถเรียกบางส่วนด้วย {{ partial "file.html" . }} {{ partial "file.html" . }} ไวยากรณ์ partial ส่วนค่อนข้างตรงไปตรงมา แต่อีกสองส่วนอาจต้องอธิบาย คุณอาจต้องเขียน partials/file.html แต่เนื่องจากโฟลเดอร์ partials ทั้งหมดต้องอยู่ในโฟลเดอร์ partials” Hugo จึงสามารถค้นหาโฟลเดอร์นั้นได้ แน่นอน คุณสามารถสร้างโฟลเดอร์ย่อยภายในโฟลเดอร์ "บางส่วน" ได้หากต้องการจัดระเบียบเพิ่มเติม

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

ไฟล์ baseof.html ของคุณเป็นเชลล์ที่เรียกส่วนต่างๆ ทั้งหมดที่จำเป็นในการแสดงรูปแบบบล็อกของคุณ ควรมี HTML น้อยที่สุดและบางส่วนจำนวนมาก:

 <!DOCTYPE html> <html lang="{{ .Site.LanguageCode }}"> <head> <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title> {{ partial "head.html" . }} </head> <body> {{ partial "header.html" . }} {{ partial "nav.html" . }} <main> {{ block "main" . }}{{ end }} </main> <aside> {{ partial "sidebar.html" . }} </aside> {{ partial "footer.html" . }} </body> </html>

{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }} บรรทัดนั้นแตกต่างกันเพราะเป็นบล็อกที่กำหนดด้วยเทมเพลตตามเนื้อหาของหน้าปัจจุบัน (หน้าแรก หน้าโพสต์เดี่ยว ฯลฯ) ด้วย {{ define "main" }}

สไตล์ชีต

ในธีมของคุณ ให้สร้างโฟลเดอร์ชื่อ assets ซึ่งเราจะวางโฟลเดอร์ css มันจะมีไฟล์ SCSS ของเราหรือไฟล์ CSS ที่น่าเชื่อถือ ตอนนี้ ควรมีไฟล์ css.html ในโฟลเดอร์ partials (ซึ่งถูกเรียกโดย head.html ) ในการแปลง Sass/SCSS เป็น CSS และลดขนาดสไตล์ชีต เราจะใช้ชุดของฟังก์ชันนี้ (โดยใช้ไวยากรณ์ Hugo Pipes แทนที่จะตัดฟังก์ชันรอบๆ เข้าด้วยกัน):

 {{ $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}

เป็นโบนัส - เนื่องจากฉันพยายามหาคำตอบตรง ๆ - หากคุณต้องการใช้ Autoprefixer Hugo ก็ใช้ PostCSS ด้วย คุณสามารถเพิ่มฟังก์ชันไปป์พิเศษระหว่าง toCSS และ minify เล็กสุดในบรรทัดแรกได้ เช่น:

 {{ $style := resources.Get "css/style.scss" | toCSS | postCSS | minify | fingerprint }}

สร้างไฟล์ “postcss.config.js” ที่รูทของบล็อก Hugo ของคุณและส่งต่อตัวเลือกต่างๆ เช่น:

 module.exports = { plugins: { autoprefixer: { browsers: [ "> 1%", "last 2 versions" ] } }, }

และเปรี้ยง! จาก Sass เป็นคำนำหน้า ย่อ CSS ฟังก์ชันไปป์ "ลายนิ้วมือ" คือการทำให้แน่ใจว่าชื่อไฟล์ไม่ซ้ำกัน เช่น style.c66e6096bdc14c2d3a737cff95b85ad89c99b9d1.min.css หากคุณเปลี่ยนสไตล์ชีต ลายนิ้วมือจะเปลี่ยนไป ดังนั้นชื่อไฟล์จึงแตกต่างกัน และด้วยเหตุนี้ คุณจะได้รับโซลูชันป้องกันแคชที่มีประสิทธิภาพ

9. หมายเหตุเกี่ยวกับไวยากรณ์ Hugo

ฉันต้องการให้แน่ใจว่าคุณเข้าใจ "จุด" ซึ่งเป็นวิธีที่ Hugo กำหนดขอบเขตตัวแปร (หรือในคำพูดของฉันเอง ให้การอ้างอิงตามบริบท) ที่คุณจะใช้ในเทมเพลตของคุณ

จุดและขอบเขต

Dot เป็นเหมือนตัวแปรระดับบนสุดที่คุณสามารถใช้ในเทมเพลตหรือรหัสย่อใดก็ได้ แต่ค่าของจุดนั้นถูกกำหนดขอบเขตตามบริบท ค่าของ Dot ในเทมเพลตระดับบนสุด เช่น baseof.html นั้นแตกต่างจากค่าภายในบล็อกลูปหรือ with บล็อก

สมมติว่านี่อยู่ในเทมเพลตของเราใน head.html บางส่วน:

 {{ with .Site.Title }} {{ จบ }}

แม้ว่าเราจะใช้งานสิ่งนี้ในขอบเขตหลัก ค่าของ Dot จะเปลี่ยนแปลงตามบริบท ซึ่งก็คือ .Site.Title ในกรณีนี้ ดังนั้น หากต้องการพิมพ์ค่า คุณเพียงแค่เขียน . แทนที่จะพิมพ์ชื่อตัวแปรซ้ำอีกครั้ง สิ่งนี้ทำให้ฉันสับสนในตอนแรก แต่คุณคุ้นเคยกับมันอย่างรวดเร็ว และช่วยลดความซ้ำซ้อนเนื่องจากคุณตั้งชื่อตัวแปรเพียงครั้งเดียว หากบางอย่างใช้ไม่ได้ผล มักเป็นเพราะคุณกำลังพยายามเรียกตัวแปรระดับบนสุดภายในบล็อกที่มีขอบเขต

คุณใช้ขอบเขตระดับบนสุดภายในบล็อกที่มีขอบเขตอย่างไร สมมติว่าคุณต้องการตรวจสอบค่าหนึ่งแต่ใช้อีกค่าหนึ่ง คุณสามารถใช้ $ ซึ่งจะเป็นขอบเขตระดับบนสุดเสมอ:

 {{ with .Site.Params.InfoEnglish }}{{ $.Site.Params.DescriptionEnglish }}{{ end }}

ภายในเงื่อนไขของเรา ขอบเขตคือ .Site.Params.InfoEnglish แต่เรายังคงสามารถเข้าถึงค่าภายนอกได้ด้วย $ ซึ่งโดยสัญชาตญาณการใช้ .Site.Params.DescriptionEnglish จะไม่ทำงาน เนื่องจากจะพยายามแก้ไขเป็น .Site.Params.InfoEnglish.Site.Params.DescriptionEnglish เกิดข้อผิดพลาด

ตัวแปรที่กำหนดเอง

คุณสามารถกำหนดตัวแปรได้โดยใช้ไวยากรณ์ต่อไปนี้:

 {{ $customvar := "custom value" }}

ชื่อตัวแปรต้องขึ้นต้นด้วย $ และตัวดำเนินการกำหนดค่าต้องเป็น := หากเพิ่งถูกกำหนดเป็นครั้งแรก = ไม่เช่นนั้น:

 {{ $customvar = "updated value" }}

ปัญหาที่คุณอาจพบคือสิ่งนี้จะไม่เกิดขึ้นนอกขอบเขต ซึ่งนำฉันไปสู่ประเด็นต่อไป

เกา

ฟังก์ชัน Scratch ช่วยให้คุณสามารถกำหนดค่าที่มีอยู่ในบริบททั้งหมด สมมติว่าคุณมีรายชื่อภาพยนตร์ในไฟล์ movies.json :

 [ { "name": "The Room", "rating": 4 }, { "name": "Back to the Future", "rating": 10 }, { "name": "The Artist", "rating": 7 } ]

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

 {{ .Scratch.Set "favouriteMovie" "None" }}{{ /* Optional, just to get you to see the difference syntax based on the scope */ }} {{ range .Site.Data.movies }} {{ if ge .rating 10 }} {{ /* We must use .Scratch prefixed with a $, because the scope is .Site.Data.movies, at the current index of the loop */ }} {{ $.Scratch.Set "favouriteMovie" .name }} {{ end }} {{ end }} [...] My favourite movie is {{ .Scratch.Get "favouriteMovie" }} <!-- Expected output => My favourite movie is Back to the Future -->

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

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

เงื่อนไข

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

 {{ if eq .Site.LanguageCode "en-us" }}Welcome!{{ end }}

มีหลายฟังก์ชันเหล่านี้:

• eq ตรวจสอบความเท่าเทียมกัน
• ne ตรวจสอบความไม่เท่าเทียมกัน
• gt ตรวจสอบมากกว่า
• ge ตรวจสอบมากกว่าหรือเท่ากับ
• lt ตรวจสอบน้อยกว่า
• le ตรวจสอบน้อยกว่าหรือเท่ากับ

หมายเหตุ : คุณสามารถเรียนรู้ทั้งหมดเกี่ยวกับฟังก์ชันที่ Hugo นำเสนอได้ในการอ้างอิงด่วนของ Hugo Functions

ช่องว่าง

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

สมมุติว่าเรามีสมมุติฐานบางส่วน:

 {{ if eq .Site.LanguageCode "en-us" }} <p>Welcome to my blog!</p> {{ end }} <img src="/uploads/portrait.jpg" alt="Blog Author">

หากรหัสภาษาของไซต์ไม่ใช่ en-us นี่จะเป็นเอาต์พุต HTML (สังเกตบรรทัดว่างสามบรรทัดก่อนแท็กรูปภาพ):

 <img src="/uploads/portrait.jpg" alt="Blog Author">

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

ดังนั้น หากเทมเพลตของคุณมีสิ่งต่อไปนี้:

 {{- if eq .Site.LanguageCode "en-us" -}} <p>Welcome to my blog!</p> {{- end -}} <img src="/uploads/portrait.jpg" alt="Blog Author">

…จากนั้นมาร์กอัปจะทำให้เกิดสิ่งนี้ (โดยไม่มีบรรทัดว่าง):

 <img src="/uploads/portrait.jpg" alt="Blog Author">

ซึ่งจะเป็นประโยชน์สำหรับสถานการณ์อื่นๆ เช่น องค์ประกอบที่มี display: inline-block ที่ไม่ควรมีช่องว่างระหว่างองค์ประกอบเหล่านี้ ในทางกลับกัน หากคุณต้องการให้แน่ใจว่าแต่ละองค์ประกอบอยู่ในบรรทัดของตัวเองในมาร์กอัป (เช่น ในลูป {{ range }} ) คุณจะต้องวางยัติภังค์อย่างระมัดระวังเพื่อหลีกเลี่ยงการตัดแต่งช่องว่าง "โลภ"

ตัวอย่างข้างต้นจะแสดงผลต่อไปนี้หากรหัสภาษาของเว็บไซต์ตรงกับ “ en-us ” (ไม่มีการขึ้นบรรทัดใหม่ระหว่างแท็ก p และ img ):

 <p>Welcome to my blog!</p><img src="/uploads/portrait.jpg" alt="Blog Author">

10. เนื้อหาและข้อมูล

เนื้อหาของคุณถูกจัดเก็บเป็นไฟล์ Markdown แต่คุณสามารถใช้ HTML ได้เช่นกัน Hugo จะแสดงผลอย่างถูกต้องเมื่อสร้างไซต์ของคุณ

หน้าแรกของคุณจะเรียก _default/list.html ซึ่งอาจมีลักษณะดังนี้:

 {{ define "main" }} {{ partial "list.html" . }} {{ end }}

บล็อกหลักเรียก list.html บางส่วนด้วยบริบทของ . หรือที่เรียกว่าระดับบนสุด list.html บางส่วนอาจมีลักษณะดังนี้:

 {{ define "main" }} <ol class="articles"> {{ range .Paginator.Pages }} <li> <article> <a href="{{ .URL }}"> <h2>{{ .Title }}</h2> <img src="{{ .Params.featuredimage }}" alt=""> <time datetime="{{ .Date.Format "2006-01-02" }}"> {{ .Date.Format "January 2 2006" }} </time> </a> </article> </li> {{ end }} </ol> {{ partial "pagination.html" . }} {{ end }}

ตอนนี้เรามีรายการบทความพื้นฐานซึ่งคุณสามารถจัดรูปแบบได้ตามที่คุณต้องการ! จำนวนบทความต่อหน้าถูกกำหนดในไฟล์การกำหนดค่า โดยมี paginate = 5 (ใน TOML)

คุณอาจสับสนอย่างสิ้นเชิงในขณะที่ฉันใช้การจัดรูปแบบวันที่ใน Hugo ทุกครั้งที่ระบุหน่วยการเรียนรู้เป็นตัวเลข (เดือนแรก วันที่สอง ชั่วโมงที่สาม ฯลฯ) ทำให้ฉันเข้าใจมากขึ้นเมื่อฉันเห็นคำอธิบายด้วยภาพด้านล่างซึ่งเอกสารภาษา Go มีให้ ซึ่งค่อนข้างแปลก แต่ก็ฉลาดเหมือนกันนะ!

 Jan 2 15:04:05 2006 MST => 1 2 3 4 5 6 -7

ตอนนี้เหลือเพียงแสดงโพสต์ของคุณในหน้าเดียว คุณสามารถแก้ไข post.html บางส่วนเพื่อปรับแต่งการจัดวางบทความของคุณ:

 <article> <header> <h1>{{ .Title }}</h1> <p> Posted on <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006. 1. 2" }}</time> </p> </header> <section> {{ .Content }} </section> </article>

และนั่นคือวิธีที่คุณแสดงเนื้อหาของคุณ!

หากคุณต้องการปรับแต่ง URL ให้อัปเดตไฟล์การกำหนดค่าของคุณโดยเพิ่มตัวเลือก [permalinks] (TOML) ซึ่งในกรณีนี้จะทำให้ URL ดูเหมือน my-blog.com/post-slug/ :

 [permalinks] posts = ":filename/"

หากคุณต้องการสร้างฟีด RSS สำหรับเนื้อหาของคุณ (เพราะ RSS นั้นยอดเยี่ยม) ให้เพิ่มสิ่งต่อไปนี้ในไฟล์การกำหนดค่าไซต์ของคุณ (เทมเพลตเริ่มต้นของ Saito จะแสดงแท็กที่เหมาะสมใน head.html หากตรวจพบตัวเลือกเหล่านี้):

 rssLimit = 10 [outputFormats] [outputFormats.RSS] mediatype = "application/rss" baseName = "feed"

แต่ถ้าคุณมีเนื้อหาบางอย่างนอกโพสต์ล่ะ นั่นคือที่มาของเทมเพลตข้อมูล: คุณสามารถสร้างไฟล์ JSON และดึงข้อมูลเพื่อสร้างเมนูหรือองค์ประกอบในแถบด้านข้างของคุณ YAML และ TOML ก็เป็นตัวเลือกเช่นกัน แต่อ่านได้น้อยกว่าด้วยข้อมูลที่ซับซ้อน (เช่น วัตถุที่ซ้อนกัน) แน่นอน คุณสามารถตั้งค่านี้ในไฟล์การกำหนดค่าของไซต์ของคุณได้ แต่สำหรับฉัน การนำทางนั้นง่ายกว่าเล็กน้อยและให้อภัยน้อยลง

มาสร้างรายการ "ไซต์เจ๋ง ๆ" ที่คุณอาจต้องการแสดงในแถบด้านข้างของคุณ โดยมีลิงก์และป้ายกำกับสำหรับแต่ละไซต์เป็นอาร์เรย์ใน JSON:

 { "coolsites": [ { "link": "https://smashingmagazine.com", "label": "Smashing Magazine" }, { "link": "https://gohugo.io/", "label": "Hugo" }, { "link": "https://netlify.com", "label": "Netlify" } ] }

คุณสามารถบันทึกไฟล์นี้ในรูทที่เก็บของคุณ หรือรูทธีมของคุณ ภายในโฟลเดอร์ data เช่น /data/coolsites.json จากนั้น ในบางส่วนของ sidebar.html คุณสามารถวนซ้ำด้วย range โดยใช้ .Site.Data.coolsites :

 <h3>Cool Sites:</h3> <ul> {{ range .Site.Data.coolsites.coolsites }} <li><a href="{{ .link }}">{{ .label }}</a></li> {{ end }} </ul>

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

ความคิดขั้นสุดท้ายเกี่ยวกับข้อมูลและอื่นๆ: สิ่งที่คุณใส่ในโฟลเดอร์ Hugo /static ของคุณจะพร้อมใช้งานบนรูท ( / ) บน live build เช่นเดียวกับโฟลเดอร์ธีม

11. การปรับใช้บน Netlify

คุณทำเสร็จแล้วหรือบางทีคุณแค่ต้องการดูว่า Netlify ใช้เวทมนตร์แบบไหน? ฟังดูดีสำหรับฉัน ตราบใดที่เซิร์ฟเวอร์ Hugo ในพื้นที่ของคุณไม่ส่งคืนข้อผิดพลาด

ยอมรับการเปลี่ยนแปลงของคุณและส่งไปยังสาขาการพัฒนาระยะไกลของคุณ ( dev ) ตรงไปที่ Netlify ถัดไปและเข้าถึงการตั้งค่าเว็บไซต์ของคุณ คุณจะเห็นตัวเลือกสำหรับ “สร้างและปรับใช้” เราจะต้องเปลี่ยนแปลงบางสิ่งที่นี่

1. ขั้นแรก ในส่วน "การตั้งค่าบิลด์" ตรวจสอบให้แน่ใจว่า "คำสั่งบิลด์" ถูกตั้งค่าเป็นฮิว hugo และ "ไดเรกทอรีเผยแพร่" ถูกตั้งค่าเป็น public (ค่าเริ่มต้นที่แนะนำให้คุณเก็บไว้ในไฟล์กำหนดค่า Hugo);
2. ถัดไป ในส่วน "บริบทการปรับใช้" ให้ตั้งค่า "สาขาการผลิต" เป็นสาขาหลักในที่เก็บของคุณ ฉันยังแนะนำให้คุณตั้งค่า "การปรับใช้สาขา" เป็น "ปรับใช้เฉพาะสาขาการผลิต"
3. สุดท้าย ในส่วน "ตัวแปรสภาพแวดล้อม" แก้ไขตัวแปรแล้วคลิก "ตัวแปรใหม่" เราจะตั้งค่าสภาพแวดล้อม Hugo เป็น 0.53 ด้วยคู่ต่อไปนี้: ตั้งค่าคีย์เป็น HUGO_VERSION และค่าเป็น 0.53

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

กลับไปที่แดชบอร์ด Netlify "การปรับใช้จริง" ของไซต์ควรมีกิจกรรมใหม่ หากทุกอย่างถูกต้อง การดำเนินการนี้ควรดำเนินการและแก้ไขเป็นป้ายกำกับ "เผยแพร่แล้ว" การคลิกรายการปรับใช้จะเปิดภาพรวมพร้อมบันทึกการดำเนินการ ด้านบน คุณจะเห็น “ดูตัวอย่างการใช้งาน” ไปคลิกเลย - คุณสมควรได้รับมัน มันยังมีชีวิตอยู่!

12. การตั้งค่าโดเมนที่กำหนดเอง

การมี URL เป็น my-super-site.netlify.com นั้นไม่เหมาะกับคุณ และคุณเป็นเจ้าของ my-super-site.com แล้วหรือยัง ฉันเข้าใจแล้ว มาเปลี่ยนกันเถอะ!

ตรงไปที่ผู้รับจดทะเบียนโดเมนของคุณและไปที่การตั้งค่า DNS ของโดเมนของคุณ ที่นี่ คุณจะต้องสร้างรายการใหม่: คุณสามารถตั้งค่าระเบียน ALIAS/CNAME ที่ชี้ไปที่ my-super-site.netlify.com หรือตั้งค่าระเบียน A ที่ชี้โดเมนของคุณไปที่ตัวโหลดบาลานซ์ของ Netlify ซึ่งก็คือ 104.198.14.52 ในขณะที่เขียน

คุณสามารถค้นหาข้อมูลล่าสุดได้ในเอกสารประกอบของ Netlify ในโดเมนที่กำหนดเอง IP ของตัวโหลดบาลานซ์จะอยู่ในส่วนการตั้งค่า DNS ภายใต้ “การกำหนดค่า DNS ด้วยตนเองสำหรับโดเมนรูทและ www ที่กำหนดเอง”

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

คุณยังสามารถจัดการโดเมนของคุณผ่านแดชบอร์ดของคุณได้ในแท็บโดเมน อินเทอร์เฟซรู้สึกสับสนน้อยลงในหน้านี้ แต่บางทีอาจช่วยให้การตั้งค่า DNS ของคุณมีความหมายมากขึ้นเช่นเดียวกับที่ฉันทำ

หมายเหตุ : Netlify สามารถจัดการทุกอย่างให้คุณได้ หากคุณต้องการซื้อโดเมนผ่านพวกเขา ง่ายกว่าแต่มีค่าใช้จ่ายเพิ่มเติม

หลังจากที่คุณตั้งค่าโดเมนที่กำหนดเองแล้ว ใน "การตั้งค่าโดเมน" ให้เลื่อนลงไปที่ส่วน "HTTPS" และเปิดใช้งานใบรับรอง SSL/TLS อาจใช้เวลาสักครู่ แต่จะให้ใบรับรองฟรีแก่คุณ: ขณะนี้โดเมนของคุณทำงานบน HTTPS

13. การแก้ไขเนื้อหาบน Netlify CMS

หากคุณต้องการแก้ไขบทความ อัปโหลดภาพ และเปลี่ยนการตั้งค่าบล็อกของคุณ เช่นเดียวกับที่ทำในอินเทอร์เฟซส่วนหลังของ WordPress คุณสามารถใช้ Netlify CMS ซึ่งมีบทช่วยสอนที่ดี เป็นไฟล์เดียวที่จะจัดการทุกอย่างให้กับคุณ (และเป็นไฟล์ที่ไม่เชื่อเรื่องพระเจ้า: จะทำงานร่วมกับ Jekyll, Eleventy และอื่นๆ)

คุณเพียงแค่ต้องอัปโหลดสองไฟล์ในโฟลเดอร์:

• CMS (ไฟล์ HTML ไฟล์เดียว);
• ไฟล์ปรับแต่ง (ไฟล์ YAML)

หลังจะเก็บการตั้งค่าทั้งหมดของไซต์ของคุณโดยเฉพาะ

ไปที่โฟลเดอร์รูทของ Hugo /static และสร้างโฟลเดอร์ใหม่ซึ่งคุณจะเข้าถึงได้ผ่าน my-super-site.com/FOLDER_NAME (ฉันจะโทรหา admin ของฉัน) ภายในโฟลเดอร์ admin นี้ ให้สร้างไฟล์ index.html โดยคัดลอกมาร์กอัปที่ Netlify CMS ให้มา:

 <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <!-- Include the script that builds the page and powers Netlify CMS --> <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> </body> </html>

ไฟล์อื่นที่คุณต้องสร้างคือไฟล์การกำหนดค่า: config.yml ซึ่งจะช่วยให้คุณสามารถกำหนดการตั้งค่าไซต์ของคุณ (ชื่อ, URL ฯลฯ) เพื่อให้คุณสามารถกำหนดสิ่งที่ด้านหน้าของโพสต์ควรมี ตลอดจนวิธีการแก้ไขไฟล์ข้อมูลของคุณ (ถ้ามี) การตั้งค่าค่อนข้างซับซ้อนกว่าเล็กน้อย แต่นั่นไม่ได้หมายความว่ามันไม่ง่าย

หากคุณใช้ GitHub หรือ GitLab ให้เริ่ม ไฟล์ config.yml ด้วย:

 backend: name: git-gateway branch: dev # Branch to update (optional; defaults to master)

หากคุณใช้ Bitbucket จะแตกต่างออกไปเล็กน้อย:

 backend: name: bitbucket repo: your-username/your-hugorepo branch: dev # Branch to update (optional; defaults to master)

สำหรับการอัปโหลดของเรา เราจะต้องบอก CMS ว่าจะจัดเก็บไว้ที่ใด:

 media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads

เมื่อคุณสร้างโพสต์ใหม่ CMS จะสร้างกระสุนสำหรับชื่อไฟล์ซึ่งคุณสามารถปรับแต่งได้ด้วยสามตัวเลือก:

slug: encoding: "ascii" # You can also use "unicode" for non-Latin clean_accents: true # Removes diacritics from characters like e or a sanitize_replacement: "-" # Replace unsafe characters with this string

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

 collections: - name: "articles" # Used in routes, eg, /admin/collections/blog label: "Articles" # Used in the Netlify CMS user interface folder: "content/posts" # The path to the folder where the posts are stored, usually content/posts for Hugo create: true # Allow users to create new documents in this collection slug: "{{slug}}" # Filename template, eg, post-title.md fields: # The fields for each document, usually in front matter - {label: "Title", name: "title", widget: "string", required: true} - {label: "Draft", name: "draft", widget: "boolean", default: true } - {label: "Type", name: "type", widget: "hidden", default: "post" } - {label: "Publish Date", name: "date", widget: "date", format: "YYYY-MM-DD"} - {label: "Featured Image", name: "featuredimage", widget: "image"} - {label: "Author", name: "author", widget: "string"} - {label: "Body", name: "body", widget: "markdown"} - name: 'coolsites' label: 'Cool Sites' file: 'data/coolsites.json' description: 'Website to check out' fields: - name: coolsites label: Sites label_singular: 'Site' widget: list fields: - { label: 'Site URL', name: 'link', widget: 'string', hint: 'https://…' } - { label: 'Site Name', name: 'label', widget: 'string' }

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

การตรวจสอบสิทธิ์

สิ่งสุดท้ายที่เราต้องทำคือทำให้แน่ใจว่ามีเพียงผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงแบ็กเอนด์ได้! การใช้การรับรองความถูกต้องของผู้ให้บริการ Git เป็นวิธีที่ง่ายในการดำเนินการนี้

ตรงไปที่ไซต์ Netlify ของคุณแล้วคลิกแท็บ "การตั้งค่า" จากนั้นไปที่ "Access control" ซึ่งเป็นลิงค์สุดท้ายในเมนูทางด้านซ้าย ที่นี่ คุณสามารถกำหนดค่า OAuth ให้ทำงานผ่าน GitHub, GitLab หรือ Bitbucket โดยระบุคีย์และค่าลับที่กำหนดไว้สำหรับบัญชีผู้ใช้ของคุณ (ไม่ใช่ในที่เก็บ) คุณจะต้องใช้ผู้ให้บริการ Git เดียวกันกับที่จัดเก็บ repo ของคุณ

GitHub

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

• ชื่อ เช่น "Netlify CMS สำหรับซูเปอร์บล็อกของฉัน";
• URL ของหน้าแรก, ลิงก์ไปยังไซต์ Netlify ของคุณ;
• คำอธิบายถ้าคุณรู้สึกชอบ;
• URL เรียกกลับของแอปพลิเคชัน ซึ่งต้องเป็น “ https://api.netlify.com/auth/done ”

บันทึก และคุณจะเห็นรหัสไคลเอ็นต์และข้อมูลลับไคลเอ็นต์ของคุณ มอบให้กับการควบคุมการเข้าถึงของ Netlify

GitLab

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

• ชื่อ เช่น "Netlify CMS สำหรับซูเปอร์บล็อกของฉัน";
• URI การเปลี่ยนเส้นทางซึ่งต้องเป็น “ https://api.netlify.com/auth/done ”;
• ขอบเขตที่ควรตรวจสอบคือ
  • api
  • read_user
  • read_repository
  • write_repository
  • read_registry

การบันทึกแอปพลิเคชันจะให้ ID แอปพลิเคชันและข้อมูลลับแก่คุณ ซึ่งขณะนี้คุณสามารถเข้าสู่การควบคุมการเข้าถึงของ Netlify ได้

Bitbucket

ตรงไปที่การตั้งค่าบัญชีผู้ใช้ของคุณ (คลิกอวาตาร์ของคุณ จากนั้นคลิก "การตั้งค่า Bitbucket") ภายใต้ "การจัดการการเข้าถึง" คลิก "OAth" ในส่วน "ผู้บริโภค OAuth" คลิก "เพิ่มผู้บริโภค" คุณสามารถปล่อยให้สิ่งต่าง ๆ ส่วนใหญ่เป็นค่าเริ่มต้น ยกเว้นสิ่งเหล่านี้:

• ชื่อ เช่น "Netlify CMS สำหรับซูเปอร์บล็อกของฉัน";
• URL โทรกลับ ซึ่งต้องเป็น “ https://api.netlify.com/auth/done ”;
• สิทธิ์ที่ควรตรวจสอบคือ:
  • บัญชี: อีเมล อ่าน เขียน
  • Repositories: อ่าน เขียน Admin
  • ดึงคำขอ: อ่าน เขียน
  • เว็บฮุค: อ่านเขียน

หลังจากบันทึกแล้ว คุณจะสามารถเข้าถึงคีย์และข้อมูลลับของคุณ ซึ่งคุณสามารถให้กลับมาที่ Access Control ของ Netlify ได้

หลังจากให้โทเค็นแล้ว ให้ไปที่ Netlify และค้นหาการตั้งค่าไซต์ ไปที่ "ข้อมูลประจำตัว" และเปิดใช้งานคุณสมบัติ คุณสามารถเพิ่มผู้ให้บริการภายนอกได้แล้ว: เลือกผู้ให้บริการ Git ของคุณและคลิกที่ “เปิดใช้งาน”

ในกรณีที่คุณต้องการรายละเอียดเพิ่มเติม Netlify CMS มีคู่มือการตรวจสอบสิทธิ์ที่คุณสามารถอ่านได้

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

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

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

การอ่านที่แนะนำ : Static Site Generator ที่ตรวจสอบแล้ว: Jekyll, Middleman, Roots, Hugo

บทสรุป

ขี่อะไร! ในบทช่วยสอนนี้ คุณได้เรียนรู้วิธีส่งออกโพสต์ WordPress ของคุณไปยังไฟล์ Markdown, สร้างที่เก็บใหม่, ตั้งค่า Git LFS, โฮสต์เว็บไซต์บน Netlify, สร้างไซต์ Hugo, สร้างธีมของคุณเอง และแก้ไขเนื้อหาด้วย Netlify CMS . ก็ไม่เลวนะ!

อะไรต่อไป? คุณสามารถทดลองกับการตั้งค่า Hugo ของคุณและอ่านเพิ่มเติมเกี่ยวกับเครื่องมือต่างๆ ที่ Hugo นำเสนอ — มีอีกมากมายที่ฉันไม่ได้กล่าวถึงเพื่อความกระชับ

สำรวจ! มีความสุข! บล็อก!

แหล่งข้อมูลเพิ่มเติม

• เอกสารฮิวโก้
  • การติดตั้ง
  • เริ่มต้นอย่างรวดเร็ว
  • การกำหนดค่า
  • แม่แบบ
  • อนุกรมวิธาน
  • รหัสย่อ
  • Hugo บน Netlify
• เอกสาร Netlify
  • โดเมนที่กำหนดเอง
  • DNS ที่มีการจัดการ
  • netlify.toml Deploy Scripts
• เอกสาร Netlify CMS
  • วิดเจ็ต
• Git LFS