Jamstack Build faster, more efficient websites today

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

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

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

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

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

เครื่องมือที่ Hugo ใช้คือตัวสร้างไซต์แบบคงที่ Netlaize เป็นเครื่องมือสร้างและ Github เป็นโฮสติ้งไฟล์ฟรี

01. ดาวน์โหลดเครื่องมือที่จำเป็น

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

02. สร้างไดเร็กทอรีการทำงานและติดตั้ง Hugo

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

03. เริ่มเซิร์ฟเวอร์

เมื่อการอ้างอิงเสร็จสมบูรณ์ให้รัน npm start เซิร์ฟเวอร์การพัฒนากำลังเรียกใช้สำเนาของ Victor Hogo ในเครื่องซึ่งสามารถเข้าถึงได้โดยค่าเริ่มต้น: 3000 – การเปิดลิงก์นั้นควรแสดงหน้าจอต้อนรับหากทุกอย่างสำเร็จ เมื่อทดสอบแล้วให้กด Ctrl + C เพื่อหยุดเซิร์ฟเวอร์

04. เพิ่มหน้าและโพสต์

เปลี่ยนไดเร็กทอรีไปที่โฟลเดอร์ไซต์จากนั้นใช้คำสั่ง Hugo new เพื่อเพิ่ม page-one.md และ post-one.md

นักพัฒนาที่ทำงานใน Windows จำเป็นต้องดาวน์โหลดไฟล์ hugo.exe และเพิ่มวิธีการทำงาน แต่มีเอกสารพร้อมใช้งานบนเว็บไซต์ Hugo

05. เพิ่มเนื้อหาสำหรับเพจและโพสต์

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

เปิดไดเร็กทอรีสำหรับโปรเจ็กต์ในเบราว์เซอร์ไฟล์และไปที่ Jamstack / Site / Content ภายในโฟลเดอร์นี้ ต้องมีไฟล์ page-one.md อยู่แล้ว นอกจากนี้ยังมีโฟลเดอร์ชื่อ Post ซึ่งรวมถึง post-one.md

06. เพิ่มหัวข้อเป็นโมดูลย่อย

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

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

07. กำหนดค่าหัวข้อและเรียกใช้เซิร์ฟเวอร์

คัดลอกเนื้อหาของไซต์ / ธีม / gohugo-theme aanke / exampleSite / config.toml ไปยังโฟลเดอร์ไซต์

ที่ด้านบนของหน้าให้แทนที่ URL พื้นฐานด้วย ‘/’ และลบธีม = ‘../ .. ‘ บรรทัดบันทึกไฟล์คอนฟิกูเรชันเปิดเทอร์มินัลและรันคำสั่ง npm start คุณยังสามารถเปลี่ยนชื่อเว็บไซต์ (หากต้องการ) โดยเปลี่ยนค่าชื่อ

08. ทดสอบในเบราว์เซอร์

เปิด http: // localhost: 3000 / page-one / เพื่อดูธีมที่แสดงการมาร์กดาวน์เพจเป็นเพจที่มีสไตล์ทั้งหมด เมื่อคุณเปิดโฮมเพจโพสต์แรกจะปรากฏขึ้น ซึ่งหมายความว่าตอนนี้ตัวสร้างไซต์คงทำงานได้แล้ว

09. กำหนดค่าเมนู

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

10. พุชไฟล์ไปที่ GitHub

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

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

11. เชื่อมต่อกับ Netlify

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

12. เชื่อมต่อกับ Github

สำหรับการปรับใช้อย่างต่อเนื่องให้คลิกที่ github จากนั้นเลือก repos ที่สร้างไว้แล้วในบทช่วยสอน NetLize ควรตรวจหาตัวเลือกการสร้างที่ดีที่สุดสำหรับโครงการโดยอัตโนมัติ หากทุกอย่างเรียบร้อยดีแล้วควรอ่าน NPM run build

Leave a Comment