วิธีสร้างไซต์คงที่อย่างรวดเร็วด้วย Hugo

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

วันนี้ Hugo สามารถสร้างเว็บไซต์ส่วนใหญ่ได้ภายในไม่กี่วินาที (<1 ms ต่อหน้า) นั่นอธิบายได้ว่าทำไม Hugo ถึงเรียกตัวเองว่าเป็น “กรอบงานที่เร็วที่สุดในโลกสำหรับการสร้างเว็บไซต์”

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

ฮิวโก้คืออะไร? และทำไมจึงเป็นที่นิยม?

Steve Francia พัฒนาเครื่องกำเนิดไซต์แบบคงที่ Hugo ในปี 2013 และ Bjrn Erik Pedersen เข้ารับตำแหน่งเป็นหัวหน้านักพัฒนาโครงการในปี 2015 Hugo เป็นโครงการโอเพ่นซอร์ส ซึ่งหมายความว่าทุกคนสามารถดูและปรับปรุงโค้ดได้

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

ในปี พ.ศ. 2564 มีเครื่องกำเนิดไฟฟ้าสถิตย์หลายสิบเครื่อง ตัวสร้างไซต์แบบคงที่ทุกตัวมีความน่าสนใจ Jekyll เป็นที่นิยมในหมู่นักพัฒนา Ruby และถึงแม้ว่ามันจะไม่เร็วเท่าตัวเลือกอื่นๆ แต่ก็เป็นหนึ่งในเครื่องมือสร้างเว็บไซต์แบบสแตติกเครื่องแรกที่มีการยอมรับอย่างกว้างขวาง Gatsby เป็น SSG ยอดนิยมอีกตัวหนึ่งซึ่งเหมาะสำหรับการพัฒนาไซต์ที่ปรับใช้ได้แบบสแตติกซึ่งมีการทำงานแบบไดนามิก

ด้วย SSG จำนวนมากที่มีอยู่ อะไรที่ทำให้ Hugo โดดเด่น?

ฮิวโก้เร็ว

ในแง่ของประสิทธิภาพการทำงานดิบ Hugo เป็นเครื่องสร้างไซต์คงที่ที่ดีที่สุดในโลก เมื่อเปรียบเทียบกับ Jekyll แล้ว Hugo ได้รับการพิสูจน์แล้วว่าเร็วขึ้น 35x โดย Forestry ในทำนองเดียวกัน Hugo สามารถแสดงไซต์ 10,000 หน้าใน 10 วินาที ซึ่งเป็นงานที่ Gatsby ใช้เวลามากกว่าครึ่งชั่วโมงจึงจะเสร็จ Hugo ไม่เพียงแต่เป็น SSG ที่เร็วที่สุดในแง่ของเวลาในการสร้าง แต่ยังติดตั้งได้อย่างรวดเร็วอีกด้วย

Hugo จัดส่งเป็นไฟล์สั่งการในตัวเอง ซึ่งแตกต่างจาก Jekyll, Gatsby และ SSG อื่นๆ ที่ต้องการการติดตั้งการพึ่งพาด้วยตัวจัดการแพ็คเกจ ซึ่งหมายความว่าคุณสามารถดาวน์โหลดและใช้งาน Hugo ได้ทันทีโดยไม่ต้องกังวลเรื่องการพึ่งพาซอฟต์แวร์

การสร้างเทมเพลตทำได้ง่ายใน Hugo

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

 <h1>{{ .Title }}</h1>

เมื่อถึงเวลาสร้าง Hugo จะดึงชื่อภายในไฟล์เนื้อหาโดยอัตโนมัติ และแทรกชื่อระหว่างแท็ก <h1> ทั้งสองแท็ก Hugo มีตัวแปรเทมเพลตในตัวที่หลากหลาย และคุณยังสามารถเขียนฟังก์ชันที่กำหนดเองเพื่อประมวลผลข้อมูล ณ เวลาที่สร้างได้ สำหรับการสร้างเทมเพลต Hugo ใช้ไลบรารี html/template และ text/template ในตัวของ Go ซึ่งช่วยลดการขยายตัวของแอปพลิเคชันเนื่องจาก Hugo ไม่จำเป็นต้องติดตั้งไลบรารีของบุคคลที่สามสำหรับการสร้างเทมเพลต

ต่อไปนี้คือตัวอย่างเทมเพลตหน้าแรกของ index.html จากธีม Ananke ยอดนิยม อย่างที่คุณเห็น มันคล้ายกับไฟล์ HTML มาตรฐานที่มีโค้ดเทมเพลตเพิ่มเติม:

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

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

Hugo จัดส่งเป็นไฟล์ปฏิบัติการที่คอมไพล์แล้ว ซึ่งหมายความว่าคุณไม่จำเป็นต้องดาวน์โหลดและจัดการการพึ่งพาจำนวนมากเพื่อเริ่มต้น ใช้ได้กับ macOS, Windows และ Linux

วิธีการติดตั้ง Hugo บน macOS และ Linux

วิธีการติดตั้งที่แนะนำสำหรับ macOS และ Linux ต้องใช้ Homebrew ซึ่งเป็นตัวจัดการแพ็คเกจสำหรับการติดตั้งและอัปเดตแอปพลิเคชัน หากคุณยังไม่ได้ติดตั้ง Homebrew คุณสามารถติดตั้งได้โดยเรียกใช้คำสั่งด้านล่างใน Terminal:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

หลังจากติดตั้ง Homebrew แล้ว ให้รันคำสั่งด้านล่างเพื่อติดตั้ง Hugo:

 brew install hugo

วิธีการติดตั้ง Hugo บน Windows

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

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

 choco install hugo-extended -confirm

 scoop install hugo-extended

วิธีการตรวจสอบว่าติดตั้ง Hugo อย่างถูกต้อง

เพื่อตรวจสอบว่า Hugo ได้รับการติดตั้งอย่างถูกต้อง ให้รันคำสั่งต่อไปนี้:

 hugo version

คำสั่ง Terminal นี้ควรแสดงข้อมูลเกี่ยวกับ Hugo เวอร์ชันที่ติดตั้งอยู่ในปัจจุบัน ดังนี้:

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

คำสั่งและการกำหนดค่า Hugo

ก่อนที่เราจะดำดิ่งสู่การสร้างไซต์คงที่ด้วย Hugo มาทำความคุ้นเคยกับคำสั่ง CLI และพารามิเตอร์ไฟล์การกำหนดค่าต่างๆ กันก่อน

คำสั่ง Hugo CLI

• hugo check – ดำเนินการตรวจสอบยืนยันต่างๆ
• hugo config – แสดงการกำหนดค่าสำหรับไซต์ Hugo
• hugo convert – แปลงเนื้อหาเป็นรูปแบบต่างๆ
• hugo deploy – ปรับใช้ไซต์ของคุณกับผู้ให้บริการคลาวด์
• hugo env – แสดงเวอร์ชัน Hugo และข้อมูลสภาพแวดล้อม
• hugo gen – ให้การเข้าถึงเครื่องกำเนิดไฟฟ้าต่างๆ
• วิธี hugo help – แสดงข้อมูลเกี่ยวกับคำสั่ง
• hugo import – ให้คุณนำเข้าไซต์จากตำแหน่งอื่น
• hugo list – แสดงรายการประเภทเนื้อหาต่างๆ
• hugo mod - ให้การเข้าถึงตัวช่วยโมดูลต่างๆ
• hugo new – ให้คุณสร้างเนื้อหาใหม่สำหรับเว็บไซต์ของคุณ
• hugo server – เริ่มเซิร์ฟเวอร์การพัฒนาในพื้นที่
• hugo version ฮิวโก้ – แสดงเวอร์ชันฮิวโก้ปัจจุบัน

Hugo CLI ยังมีแฟล็กที่หลากหลายเพื่อระบุตัวเลือกเพิ่มเติมสำหรับบางคำสั่ง หากต้องการดูรายการธง Hugo ทั้งหมด (มีจำนวนมาก) เราขอแนะนำให้ใช้คำสั่งวิธีใช้ของ hugo help เพื่อแสดงรายการธงที่มีอยู่ทั้งหมด

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

ไฟล์กำหนดค่าของ Hugo รองรับสามรูปแบบ: YAML, TOML และ JSON ในทำนองเดียวกัน ไฟล์การกำหนดค่า Hugo คือ config.yml , config.toml หรือ config.json และคุณสามารถค้นหาได้ในไดเรกทอรีรากของโปรเจ็กต์ Hugo

ไฟล์การกำหนดค่า Hugo ทั่วไปในรูปแบบ YAML มีลักษณะดังนี้:

 DefaultContentLanguage: en theme: - kinsta-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Kinsta Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"

หากคุณเคยใช้ WordPress หรือ CMS อื่นมาก่อน ตัวเลือกการกำหนดค่าบางอย่างอาจดูคุ้นเคยสำหรับคุณ ตัวอย่างเช่น kinsta-static-site คือชื่อของธีมของไซต์ Kinsta Static Site คือชื่อเมตาของ SEO และ paginate (จำนวนโพสต์ต่อหน้า) คือ 5

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

วิธีสร้างเว็บไซต์ Hugo

ตอนนี้เราได้อธิบายวิธีการติดตั้งและใช้งาน Hugo CLI และพื้นฐานของไฟล์การกำหนดค่า Hugo แล้ว มาสร้างเว็บไซต์ Hugo ใหม่กัน

ในการสร้างไซต์ Hugo ให้ใช้คำสั่งด้านล่าง (คุณสามารถเปลี่ยน my-hugo-site เป็นอย่างอื่นได้หากต้องการ):

 hugo new site my-hugo-site

ถัดไป ไปที่โฟลเดอร์ของไซต์ และคุณจะเห็นไฟล์และโฟลเดอร์ต่อไปนี้: ไฟล์ config.toml โฟลเดอร์ archetypes โฟลเดอร์ เนื้อหา โฟลเดอร์ โครงร่าง โฟลเดอร์ ธีม โฟลเดอร์ ข้อมูล และโฟลเดอร์ส แตติก มาดูกันอย่างรวดเร็วว่าแต่ละไฟล์และโฟลเดอร์เหล่านี้คืออะไร

ไฟล์ config.toml ของ Hugo

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

โฟลเดอร์ต้นแบบของ Hugo

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

ตัวอย่างเช่น หากคุณมีประเภทเนื้อหาพอดแคสต์สำหรับแสดงตอนของพ็อดคาสท์ คุณสามารถสร้างแม่แบบใหม่ใน archetypes/podcast.md ด้วยเนื้อหาด้านล่าง:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

ด้วยต้นแบบพอดคาสต์นี้ คุณสามารถใช้คำสั่งด้านล่างเพื่อสร้างโพสต์ใหม่:

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

ตอนนี้ หากคุณเปิดโพสต์ที่สร้างขึ้นใหม่ คุณจะเห็นสิ่งนี้:

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

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

โฟลเดอร์เนื้อหาของ Hugo

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

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

โฟลเดอร์เค้าโครงของ Hugo

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

คล้ายกับธีม WordPress ที่ใช้ PHP สำหรับการสร้างเทมเพลต เทมเพลต Hugo ประกอบด้วย HTML พื้นฐานพร้อมเทมเพลตไดนามิกเพิ่มเติมที่ขับเคลื่อนโดย html/template และไลบรารี text/template ในตัวของ Golang ไฟล์เทมเพลต HTML ต่างๆ ที่จำเป็นสำหรับการสร้างมาร์กอัป HTML ของไซต์จะอยู่ในโฟลเดอร์ เล ย์เอาต์

โฟลเดอร์ธีมของ Hugo

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

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

Hugo Data Folder

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

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

Hugo Static Folder

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

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

วิธีเพิ่มธีมให้กับ Hugo Site

การดาวน์โหลดและติดตั้งธีมที่สร้างไว้ล่วงหน้าเป็นวิธีที่ดีในการเริ่มต้นใช้งาน Hugo ธีม Hugo มาในรูปทรงและขนาดต่างๆ และหลายธีมมีให้บริการฟรีบนที่เก็บธีม Hugo อย่างเป็นทางการ ไปข้างหน้าและติดตั้งธีม Hyde ยอดนิยมบนไซต์ Hugo ของเรา

ขั้นแรก ให้ไปที่โฟลเดอร์ธีมของโปรเจ็กต์ใน Terminal:

 cd <hugo-project-directory>/themes/

ต่อไป ใช้ Git เพื่อโคลนธีม Hyde ลงในไดเร็กทอรี ธีม ของโปรเจ็กต์ของคุณ

 git clone https://github.com/spf13/hyde.git

ถัดไป เพิ่มบรรทัดต่อไปนี้ในไฟล์ config.toml ของคุณเพื่อเปิดใช้งานธีม Hyde:

 theme = "hyde"

ณ จุดนี้ ธีม Hyde ได้รับการติดตั้งและกำหนดค่า ขั้นตอนต่อไปคือการเริ่มต้นเว็บเซิร์ฟเวอร์การพัฒนาในตัวของ Hugo เพื่อดูไซต์ในเว็บเบราว์เซอร์ของคุณ

วิธีดูตัวอย่างเว็บไซต์ Hugo

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

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

 hugo server -D

Hugo จะสร้างหน้าเว็บไซต์ของคุณและทำให้ใช้งานได้ที่ http://localhost:1313/ :

หากคุณเยี่ยมชม URL ในเว็บเบราว์เซอร์ของคุณ คุณควรเห็นไซต์ Hugo ของคุณด้วยธีม Hyde:

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

วิธีเพิ่มเนื้อหาใน Hugo Site

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

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

ส่วนเนื้อหาใน Hugo

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

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

วิธีเพิ่มโพสต์ใน Hugo

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

มาสร้างเลเยอร์องค์กรอีกชั้นในโฟลเดอร์ โพสต์ โดยสร้างโฟลเดอร์ 2021 ณ จุดนี้ไดเร็กทอรี เนื้อหา ของคุณควรมีลักษณะดังนี้:

ตอนนี้ขอสร้างโพสต์แรกของเรา ดังที่เราได้กล่าวไว้ก่อนหน้านี้ Hugo รองรับทั้งไฟล์ Markdown และ HTML สำหรับเนื้อหา โดยทั่วไป ควรใช้ไฟล์ Markdown เนื่องจากเขียน จัดรูปแบบ และอ่านง่ายกว่า

ในโฟลเดอร์ เนื้อหา/โพสต์/2021 ให้สร้างไฟล์ใหม่ที่ลงท้ายด้วย . .md (นามสกุลไฟล์ Markdown) คุณสามารถตั้งชื่อไฟล์อะไรก็ได้ที่คุณต้องการ แต่ไวยากรณ์ที่แนะนำสำหรับการตั้งชื่อไฟล์เนื้อหา Hugo คือ YYYY-MM-DD-a-sample-post.md

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

 hugo new posts/2021/2021-08-30-a-sample-post.md

สังเกตว่าโฟลเดอร์ เนื้อหา หายไปจากเส้นทางด้านบนอย่างไร เนื่องจาก Hugo ถือว่าไฟล์เนื้อหาทั้งหมดจะเข้าสู่โฟลเดอร์ เนื้อหา โดยค่าเริ่มต้น

หากคุณเปิดไฟล์เนื้อหาที่สร้างขึ้นใหม่ คุณควรเห็นข้อมูลเมตาสองสามบรรทัดที่ด้านบนของเอกสารที่มีลักษณะดังนี้:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

ข้อมูลเมตานี้ ซึ่งจัดรูปแบบใน YAML เรียกว่า "ส่วนหน้า" ส่วนหน้าที่สร้างโดยอัตโนมัติคือประโยชน์ที่สำคัญอย่างหนึ่งของการใช้ Hugo CLI สิ่งสำคัญอันดับแรกคือการจัดเก็บข้อมูลเฉพาะสำหรับโพสต์ (ชื่อโพสต์ ข้อมูล สถานะแบบร่าง แท็ก หมวดหมู่ ฯลฯ) รูปแบบเริ่มต้นสำหรับส่วนหน้าสามารถกำหนดค่าตามแต่ละส่วนได้โดยใช้ต้นแบบ

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

เมื่อคุณบันทึกไฟล์เนื้อหาแล้ว คุณจะเห็น Hugo สร้างเว็บไซต์ของคุณใหม่ใน Terminal ในภาพหน้าจอด้านล่าง คุณจะเห็นว่า Hugo สร้างเว็บไซต์ใหม่ทั้งหมดในเวลา 22 มิลลิวินาที!

หากคุณเยี่ยมชมไซต์ Hugo ในเว็บเบราว์เซอร์ คุณจะเห็นโพสต์ใหม่

วิธีเพิ่มหน้าใน Hugo

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

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

 hugo new pages/about.md

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

ตอนนี้ มาเพิ่มข้อความในหน้า "เกี่ยวกับ" กัน:

ณ จุดนี้ คุณควรเห็นหน้าเกี่ยวกับในเว็บเบราว์เซอร์ของคุณ:

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

วิธีเปลี่ยนชื่อเว็บไซต์และคำอธิบาย

วิธีการที่แน่นอนในการเปลี่ยนชื่อไซต์และคำอธิบายขึ้นอยู่กับการกำหนดค่าไซต์และ/หรือธีมที่ใช้งานอยู่ ในกรณีของธีม Hyde สามารถเปลี่ยนชื่อไซต์และคำอธิบายได้ในไฟล์การกำหนดค่า Hugo ( config.toml )

เราทราบสิ่งนี้เนื่องจากโค้ดธีมต่อไปนี้ที่แสดงแถบด้านข้าง:

 <aside class="sidebar"> <div class="container sidebar-sticky"> <div class="sidebar-about"> <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <p class="lead"> {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}} </p> </div> <nav> <ul class="sidebar-nav"> <li><a href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Menus.main -}} <li><a href="{{.URL}}"> {{ .Name }} </a></li> {{- end }} </ul> </nav> <p>{{ with .Site.Params.copyright }}{{.}}{{ else }} {{ now.Format "2006"}}. All rights reserved. {{end}}</p> </div> </aside>

สองส่วนที่จะเน้นคือ:

 {{ .Site.Title }}

และ…

 {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

แฮนด์บาร์ {{ }} เป็นส่วนหนึ่งของเอ็นจิ้นการสร้างเทมเพลตของ Hugo และอนุญาตให้สร้างข้อมูลแบบไดนามิกในหน้าที่แสดง ตัวอย่างเช่น {{ .Site.Title }} สั่งให้ Hugo ตรวจสอบไฟล์ config.toml และดึงค่าที่แมปกับคีย์ Title

เนื่องจากการกำหนดค่าเริ่มต้นของ Hugo ใช้ My New Hugo Site เป็นชื่อไซต์ นั่นคือสิ่งที่แถบด้านข้างแสดง หากเราเปลี่ยนชื่อไซต์ใน config.toml เป็นอย่างอื่น การเปลี่ยนแปลงจะมีผลกับส่วนหน้าด้วย

ไปข้างหน้าและเปลี่ยนพารามิเตอร์หัวเรื่องใน config.toml จาก My New Hugo Site เป็น Hugo Site ของ Kinsta

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

 {{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

เนื่องจากเราไม่มีการกำหนดค่าคำอธิบายในไฟล์ config.toml ค่าเริ่มต้น Hugo จะแสดงเป็น "โอเพ่นซอร์สที่หรูหราและธีมสำหรับมือถือเป็นอันดับแรกสำหรับ Hugo ที่สร้างโดย @mdo เดิมทีสร้างมาเพื่อ Jekyll”

ตอนนี้เรามาอัปเดตไฟล์ config.toml ของเราจาก:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

ถึง:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde" [params] description = "Kinsta is a premium managed WordPress hosting company."

ตามที่คาดไว้ การเปลี่ยนแปลงจะปรากฏในส่วนหน้าเช่นกัน:

วิธีลบหน้าออกจากฟีดโพสต์

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

ฟังก์ชัน range ของ Hugo จะวนซ้ำชุดของรายการที่กำหนดไว้แล้วจึงดำเนินการ บางอย่าง กับข้อมูล โดยค่าเริ่มต้น เทมเพลต index.html ของธีม Hyde จะอยู่ในช่วง .Site.RegularPages และกรองข้อมูล เช่น ลิงก์ถาวร ชื่อโพสต์ และสรุปโพสต์ก่อนแสดงผล HTML

เนื่องจาก . .Site.RegularPages รวมหน้าปกติทั้งหมดใน Hugo รวมทั้งโพสต์และหน้าเพจ หน้า "เกี่ยวกับ" จะแสดงขึ้น ด้วยการเปลี่ยนรายการ range เป็น .Site.RegularPages "Section" "posts" เราสามารถสั่งให้ Hugo กรองเฉพาะหน้าปกติในส่วน โพสต์ – ไฟล์เนื้อหาในโฟลเดอร์ โพสต์ ที่เราสร้างไว้ก่อนหน้านี้

มาทำการเปลี่ยนแปลงกันเถอะโดยแก้ไขเทมเพลตจากสิ่งนี้:

 {{ define "main" -}} <div class="posts"> {{- range .Site.RegularPages -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

สำหรับสิ่งนี้:

 {{ define "main" -}} <div class="posts"> {{- range where .Site.RegularPages "Section" "posts" -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

หลังจากทำการเปลี่ยนแปลงนี้ หน้าแรกจะแสดงเฉพาะโพสต์ดังนี้:

วิธีใช้บางส่วนใน Hugo

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

ตัวอย่างเช่น เป็นเรื่องปกติที่จะเห็นส่วนของหน้าต่างๆ (ส่วนหัว ส่วนท้าย ฯลฯ) ในไฟล์บางส่วนที่แยกจากกัน ซึ่งจากนั้นจะเรียกภายในไฟล์เทมเพลต baseof.html ของธีม

ภายในไฟล์ baseof.html ในธีม Ananke คุณสามารถดูตัวอย่างบางส่วนในบรรทัดที่ 18 – {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

ในกรณีนี้ {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} สั่งให้ Hugo แทนที่เนื้อหาของ Line 18 ด้วย site-style.html ในโฟลเดอร์ /layouts/partials ถ้าเราไปที่ /partials/site-style.html เราจะเห็นรหัสต่อไปนี้:

 {{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }} <link rel="stylesheet" href="{{ .RelPermalink }}" > {{ end }} {{ range site.Params.custom_css }} {{ with partialCached "func/style/GetResource" . . }}{{ else }} <link rel="stylesheet" href="{{ relURL (.) }}"> {{ end }} {{ end }}

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

วิธีใช้รหัสย่อใน Hugo

รหัสย่อของ Hugo นั้นคล้ายกับบางส่วนที่อนุญาตให้ใช้รหัสซ้ำในหน้าต่างๆ ได้ รหัสย่อคือไฟล์ HTML ที่อยู่ในโฟลเดอร์ /layouts/shortcodes ข้อแตกต่างหลักคือ ใช้บางส่วนกับเทมเพลต HTML ในขณะที่รหัสย่อใช้กับหน้าเนื้อหา Markdown

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

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

ด้วยการใช้รหัสย่อ Hugo ในไฟล์เนื้อหาของคุณ คุณจะไม่ต้องกังวลกับการอัปเดตการอ้างอิงปีอีกต่อไป!

เริ่มต้นด้วยการสร้างรหัสย่อใน /layouts/shortcodes/current_year.html ด้วยเนื้อหาด้านล่าง:

 {{ now.Format "2006" }}

รหัสย่อสามารถฝังลงในโพสต์ด้วยไวยากรณ์นี้ – {{< shortcode_name >}} ในกรณีของเรา เราสามารถเรียก current_year.html ด้วย {{< shortcode_name >}} ดังนี้:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true --- This post was created in the year {{< current_year >}}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu. Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

หากคุณดูโพสต์ในเว็บเบราว์เซอร์ คุณจะเห็นปีปัจจุบันในบรรทัดแรกของโพสต์ดังนี้:

วิธีเพิ่มรูปภาพในโพสต์ใน Hugo

ไม่เหมือนกับ WordPress และระบบจัดการเนื้อหาที่ครบครันอื่น ๆ Hugo ไม่มีระบบลากแล้ววางสำหรับจัดการรูปภาพ ดังนั้น การออกแบบระบบการจัดการภาพจึงถูกถ่ายโอนไปยังผู้ใช้ปลายทาง

แม้ว่า Hugo จะไม่มีวิธีจัดการรูปภาพที่เป็นมาตรฐาน แต่วิธีหนึ่งที่ได้รับความนิยมก็คือการจัดเก็บรูปภาพในโฟลเดอร์ /static และอ้างอิงในโพสต์และเพจโดยใช้รหัสย่อ มาดูวิธีการจัดระเบียบรูปภาพขั้นพื้นฐานใน Hugo กันดีกว่า

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

เริ่มต้นด้วยการสร้างโฟลเดอร์ อัพโหลด ใน /static ภายในโฟลเดอร์ อัปโหลด ให้สร้างโฟลเดอร์ชื่อ 2021 เพื่อเก็บรูปภาพทั้งหมดที่อัปโหลดในปี 2021

ต่อไป มาเพิ่มสองภาพ ( blue1.jpg และ blue2.jpg ) ลงในโฟลเดอร์ 2021

ใน HTML รูปภาพจะแสดงโดยใช้แท็ก <img> ตัวอย่างเช่น เพื่อแสดง blue1.jpg เราสามารถใช้ HTML ด้านล่าง:

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

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

ในการสร้างเทมเพลตชอร์ตโค้ด ให้สร้างไฟล์ใหม่ที่ /layouts/shortcodes/img.html โดยมีเนื้อหาด้านล่าง:

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

ถัดไป เพิ่มรหัสย่อด้านล่างในโพสต์บล็อก:

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

ในเทมเพลต {{ .Get "src" }} และ {{ .Get "alt" }} สั่งให้ Hugo ดึงเนื้อหาของพารามิเตอร์ src< และ alt< เมื่อเรียกใช้รหัสย่อ

ตอนนี้ หากคุณโหลดโพสต์บล็อกซ้ำ คุณจะเห็นภาพดังนี้:

วิธีทำให้ Hugo Site ใช้งานได้

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

เนื่องจาก Hugo เป็นเครื่องมือสร้างไซต์แบบสแตติก คุณจึงสามารถปรับใช้ HTML, CSS และ JS ที่สร้างได้ทุกที่ด้วยเว็บเซิร์ฟเวอร์ เนื่องจากข้อกำหนดทางเทคนิคสำหรับการให้บริการไซต์แบบคงที่นั้นต่ำมาก คุณจึงสามารถโฮสต์ได้ฟรีจากผู้ให้บริการที่หลากหลาย เช่น Netlify, Vercel, Cloudflare Pages และอื่นๆ

ก่อนหน้านี้ เราใช้เซิร์ฟเวอร์ฮิว hugo server -D เพื่อหมุนเซิร์ฟเวอร์การพัฒนาในพื้นที่เพื่อดูตัวอย่างการเปลี่ยนแปลงในไซต์ของเราแบบเรียลไทม์ ในการสร้างไซต์ทั้งหมด เราสามารถใช้คำสั่ง hugo ในไดเร็กทอรีรากของโครงการของเรา หลังจากสร้างไซต์เสร็จแล้ว คุณควรเห็นโฟลเดอร์ สาธารณะ ใหม่ในไดเร็กทอรีโครงการของคุณ ภายในโฟลเดอร์นี้ คุณจะพบไฟล์ทั้งหมดที่ต้องอัปโหลดไปยังเซิร์ฟเวอร์หรือบริการจัดเก็บข้อมูลบนคลาวด์ เช่น Amazon S3

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

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

วิธีอัปโหลด Hugo Project ของคุณไปยัง GitHub

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

โดยค่าเริ่มต้น (บน macOS) แอป GitHub จะสร้างที่เก็บใหม่ใน /Users/username/Documents/GitHub เนื่องจากเราตั้งชื่อที่เก็บของเรา my-hugo-site ที่ เก็บของเราจึงสามารถพบได้ที่ /Users/brianli/Documents/GitHub/my-hugo-site

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

หากคุณกลับไปที่แอป GitHub คุณจะเห็นรายการไฟล์ที่เปลี่ยนแปลง ในการอัปโหลดที่เก็บไปยัง GitHub ให้เพิ่มข้อมูลสรุป คลิก Commit to main และคลิก Publish Repository ที่มุมบนขวา

โดยค่าเริ่มต้น จะเลือกตัวเลือก "เก็บรหัสนี้เป็นส่วนตัว" If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

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

นี่คือไซต์ Hugo ของเราบน Netlify อย่างที่คุณเห็น มันเหมือนกับไซต์ในสภาพแวดล้อมท้องถิ่นของเรา:

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

เนื่องจากเราได้เชื่อมโยง Netlify กับ GitHub แล้ว การคอมมิตใหม่ให้กับโครงการ Hugo GitHub repo จะทริกเกอร์การปรับใช้ใหม่บน Netlify โดยอัตโนมัติ!

สรุป

Hugo เป็นหนึ่งในเครื่องสร้างเว็บไซต์แบบคงที่ที่ได้รับความนิยมมากที่สุดในโลก และด้วยเหตุผลที่ดี ไม่เพียงแค่มีการประมวลผลบิลด์ที่เร็วมากเท่านั้น แต่ยังมาพร้อมกับความสามารถในการสร้างเทมเพลตอันทรงพลังที่รองรับบางส่วนและรหัสย่อ

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

คุณคิดอย่างไรกับ Hugo และเครื่องกำเนิดไซต์แบบคงที่อื่นๆ โปรดแจ้งให้เราทราบในความคิดเห็นด้านล่าง!