วิธีการสร้างบล็อกด้วย Hugo

• บทนำ
• ข้อกำหนดเบื้องต้น
• ขั้นตอนที่ 1: ติดตั้งโปรแกรม Hugo
• ขั้นตอนที่ 2: สร้างเว็บไซต์ของคุณ
• ขั้นตอนที่ 3: ติดตั้งชุดรูปแบบจากที่เก็บ Hugo
• ขั้นตอนที่ 4: ทำการเปลี่ยนแปลงการกำหนดค่าพื้นฐาน
• ขั้นตอนที่ 5: เขียนเนื้อหาของคุณ
• ขั้นตอนที่ 6: ปรับเนื้อหาของคุณด้วยเซิร์ฟเวอร์ Hugo
• ขั้นตอนที่ 7: เผยแพร่ไซต์ของคุณ

บทนำ

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

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

ในบทช่วยสอนนี้ฉันจะแสดงวิธีการติดตั้งและใช้ Hugo เพื่อสร้างบล็อกเว็บไซต์แบบคงที่บนอินสแตนซ์เซิร์ฟเวอร์ Vultr LEMP ที่ใช้ CentOS

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

ลงชื่อเข้าใช้อินสแตนซ์ของคุณในฐานะผู้ใช้ที่ไม่ใช่รูทด้วยสิทธิ์ sudo ดูวิธีการสร้างผู้ใช้ดังกล่าวในบทความนี้

ขั้นตอนที่ 1: ติดตั้งโปรแกรม Hugo

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

sudo yum update -y
sudo yum install git -y
cd ~
wget https://github.com/spf13/hugo/releases/download/v0.15/hugo_0.15_linux_amd64.tar.gz
tar -zxvf hugo_0.15_linux_amd64.tar.gz
sudo mv hugo_0.15_linux_amd64/hugo_0.15_linux_amd64 /usr/local/bin/hugo

ทดสอบการติดตั้งของคุณด้วยคำสั่งต่อไปนี้:

 hugo version

ขั้นตอนที่ 2: สร้างเว็บไซต์ของคุณ

ด้วย Hugo คุณสามารถสร้างเว็บไซต์ของคุณจากภายในโฟลเดอร์ใด ๆ บนเซิร์ฟเวอร์ของคุณ ที่นี่ฉันสร้างเว็บไซต์ในไดเรกทอรีmysite/ภายใต้ไดเรกทอรีบ้านของฉัน

cd ~
hugo new site ~/mysite

เรียกใช้คำสั่งต่อไปนี้เพื่อดูสถาปัตยกรรมของไซต์:

cd mysite
ls -lF

ตามที่คุณเห็นสถาปัตยกรรมปัจจุบันของไซต์มีลักษณะคล้ายกับ:

ต้นแบบ /

config.toml

เนื้อหา/

ข้อมูล/

รูปแบบ /

คงที่/

ด้วยอีกสองไดเรกทอรีที่จะสร้างthemes/และpublic/สถาปัตยกรรมทั้งหมดของเว็บไซต์ Hugo นั้นกะทัดรัด แต่ยังครอบคลุม

content/เป็นผู้ริเริ่มทราบว่าเนื้อหาของคุณควรจะเก็บไว้ในไดเรกทอรี

ขั้นตอนที่ 3: ติดตั้งชุดรูปแบบจากที่เก็บ Hugo

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

cd ~/mysite/
git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

หากคุณเพียงต้องการติดตั้งชุดรูปแบบเดียวไปที่ชุดรูปแบบ Hugo repoเพื่อกำหนดชุดรูปแบบที่คุณชื่นชอบ คัดลอก URL และวางลงในgit cloneคำสั่งด้านล่าง

cd ~/mysite/
mkdir themes
cd themes
git clone https://github.com/jaden/twentyfourteen

ขั้นตอนที่ 4: ทำการเปลี่ยนแปลงการกำหนดค่าพื้นฐาน

ไฟล์ที่มีชื่อconfig.tomlในไดเรกทอรีไซต์ของคุณมีการกำหนดค่าทั่วโลกสำหรับเว็บไซต์ Hugo ของคุณ แก้ไขไฟล์ด้วยโปรแกรมแก้ไขข้อความเพื่อทำการเปลี่ยนแปลงการกำหนดค่าพื้นฐานตามที่แสดงด้านล่าง อย่าลืมเปลี่ยนค่าตามเงื่อนไขเฉพาะของคุณ

baseurl = "http://[YourSiteIP]/"
languageCode = "en-us"
title = "Your Site Name"
theme = "twentyfourteen"

ขั้นตอนที่ 5: เขียนเนื้อหาของคุณ

~/mysite/content/post/ในไดเรกทอรีเว็บไซต์ของคุณใส่คำสั่งต่อไปนี้เพื่อสร้างหน้าเนื้อหาในไดเรกทอรี

cd ~/mysite/
hugo new post/about.md

เปิดไฟล์ในเท็กซ์เอดิเตอร์รูปแบบของไฟล์ควรมีลักษณะดังต่อไปนี้

+++
date = "2015-12-25T03:21:23Z"
draft = true
title = "about"

+++

+++ข้อมูลเมตาเกี่ยวกับหน้าเนื้อหาของคุณอยู่ระหว่างสองบรรทัด ที่นี่คุณสามารถลบบรรทัดdraft = trueและแก้ไขบรรทัดหัวเรื่องตามที่คุณต้องการ

ภายใต้+++บรรทัดที่สองเพิ่มเนื้อหาที่คุณต้องการแสดงบนเว็บเพจ อย่าลืมเขียนเนื้อหาของคุณในภาษา Markdown

## This is an H2 headline

Text goes here.

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

ขั้นตอนที่ 6: ปรับเนื้อหาของคุณด้วยเซิร์ฟเวอร์ Hugo

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

เปิดเทอร์มินัลอื่นกำหนดค่าiptablesกฎเพื่ออนุญาตให้คุณเข้าถึงไซต์ของคุณบนพอร์ตเริ่มต้นของเซิร์ฟเวอร์ 1390 ของ Hugo:

sudo iptables -I INPUT -p tcp --dport 1313 -j ACCEPT

เรียกใช้เซิร์ฟเวอร์ Hugo:

hugo server --bind="[YourServerIP]"

เยี่ยมชมเว็บไซต์ของคุณจากเบราว์เซอร์:

http://[YourServerIP]:1313

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

หลังจากแก้ไขเสร็จแล้วให้กดCtrl+Cเพื่อหยุดเซิร์ฟเวอร์ Hugo

ขั้นตอนที่ 7: เผยแพร่ไซต์ของคุณ

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

cd ~/mysite
hugo

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

hugo --destination=public2

เนื่องจากเว็บเซิร์ฟเวอร์ Nginx ทำงานอยู่บนเซิร์ฟเวอร์สิ่งที่คุณต้องทำคือคัดลอกเนื้อหาของ~/mysite/public/ไดเรกทอรีหรือไดเรกทอรีปลายทางที่กำหนดเองอื่น ๆ ไปยังเว็บไดเรกทอรีของ/usr/share/nginx/html/คุณ

ลบไฟล์ต้นฉบับ:

cd /usr/share/nginx/html/
sudo rm -rf background.jpg index.php logo.png

คัดลอกไฟล์ไซต์คงที่ไปยังสารบบเว็บ:

cd ~/mysite/public
sudo cp -R ~/mysite/public/. /usr/share/nginx/html/

แค่นั้นแหละ. ตอนนี้คุณสามารถเยี่ยมชมไซต์คงที่ที่เร็วสุดจากเบราว์เซอร์ของคุณ: http://[YourServerIP].

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