ตัวสร้างเพจแบบคงที่ทั้งหมดมีงานเดียวและดูเหมือนตรงไปตรงมานั่นคือการสร้างไฟล์ HTML แบบคงที่และเนื้อหาทั้งหมด
มีประโยชน์ที่ชัดเจนมากมายในการให้บริการไฟล์ HTML แบบคงที่เช่นการแคชที่ง่ายขึ้นเวลาในการโหลดเร็วขึ้นและสภาพแวดล้อมโดยรวมที่ปลอดภัยยิ่งขึ้น ตัวสร้างเพจแบบคงที่แต่ละตัวสร้างเอาต์พุต HTML ที่แตกต่างกัน
อย่างไรก็ตามจุดประสงค์ของโพสต์นี้ไม่ใช่การดำน้ำและพูดคุยถึงความซับซ้อนของกลไกของพวกเขา แต่เพื่อเปรียบเทียบคุณลักษณะที่กำหนดกรอบงานแต่ละข้อเสนอและเน้นแง่มุมและคุณลักษณะที่เป็นเอกลักษณ์ของทุกเฟรมเวิร์ก
ในโพสต์นี้เราจะดูกรอบหน้าคงที่ต่อไปนี้: เจคิลล์ , คนกลาง , ฮิวโก้ และ เฮกโซ . สิ่งเหล่านี้ไม่ใช่เครื่องกำเนิดไฟฟ้าเพียงอย่างเดียว แต่เป็นเครื่องกำเนิดไฟฟ้าที่ใช้กันมากที่สุดโดยได้รับการสนับสนุนจากชุมชนขนาดใหญ่และทรัพยากรที่มีประโยชน์มากมาย
มาดูรายละเอียดของแต่ละตัวและเปรียบเทียบคุณสมบัติพื้นฐานของพวกเขา:
บันทึก: เป็นสิ่งที่ควรค่าแก่การชี้ให้เห็นว่าตัวสร้างเพจแบบคงที่แต่ละตัวสามารถปรับแต่งและขยายได้โดยใช้ปลั๊กอินและส่วนขยายซึ่งช่วยให้คุณครอบคลุมความต้องการส่วนใหญ่หรือทั้งหมดได้
ฉันเป็น llc ประเภทไหน
เอกสารสำหรับแต่ละเฟรมเวิร์กเหล่านี้มีเนื้อหาครอบคลุมและไม่มีอะไรที่ดีเยี่ยมและคุณสามารถคว้าได้ที่นี่:
หากคุณเพียงแค่ทำตามคำแนะนำในการติดตั้งคุณควรเตรียมสภาพแวดล้อมการพัฒนาให้พร้อมภายในไม่กี่นาที เมื่อติดตั้งแล้วคุณสามารถเริ่มโปรเจ็กต์ใหม่ได้โดยเรียกใช้คำสั่งจากเทอร์มินัล
ตัวอย่างเช่นนี่คือวิธีที่คุณเริ่มโครงการใหม่ในกรอบต่างๆ:
เจคิลล์
jekyll new my_website
คนกลาง
middleman init my_website
ฮิวโก้
hugo new my_website
เฮกโซ
hexo init my_website
โดยปกติการกำหนดค่าจะถูกเก็บไว้ในไฟล์เดียว ตัวสร้างเว็บไซต์แบบคงที่แต่ละตัวมีข้อมูลจำเพาะ แต่การตั้งค่าหลายอย่างจะเหมือนกันในทั้งสี่
คุณสามารถระบุได้ว่าจะจัดเก็บไฟล์ต้นฉบับไว้ที่ไหนหรือจะส่งออกแหล่งที่มาที่สร้างไว้ที่ไหน การข้ามข้อมูลที่จะไม่ใช้ในกระบวนการสร้างนั้นมีประโยชน์เสมอโดยการตั้งค่าไม่รวมหรือ skip_render
ตัวเลือก คุณยังสามารถใช้ไฟล์กำหนดค่าเพื่อจัดเก็บการตั้งค่าส่วนกลางเช่นชื่อโครงการหรือผู้แต่ง
หากคุณมีไฟล์ โครงการ Wordpress พร้อมใช้งานคุณสามารถย้ายข้อมูลไปยังตัวสร้างเพจแบบคงที่ได้อย่างง่ายดาย
สำหรับ Jekyll คุณทำได้ Jekyll ผู้ส่งออก เสียบเข้าไป. สำหรับคนกลางคุณสามารถใช้เครื่องมือบรรทัดคำสั่งที่เรียกว่า wp2middleman . คุณสามารถใช้ได้ Wordpress ถึง Hugo Exporter สำหรับการโยกย้าย Hugo และสำหรับ Hexo คุณสามารถอ่านไฟล์ คำแนะนำเกี่ยวกับวิธีการย้ายจาก Wordpress ไปยัง Hexo ที่ฉันเขียนเมื่อปีที่แล้ว
หลักการเกือบจะเหมือนกันและค่อนข้างตรงไปตรงมาก่อนอื่นให้ส่งออกเนื้อหาทั้งหมดไปยังรูปแบบที่เหมาะสมจากนั้นรวมไว้ในโฟลเดอร์ที่ถูกต้อง
เครื่องกำเนิดไฟฟ้าเพจคงใช้ Markdown สำหรับเนื้อหาหลัก Markdown มีประสิทธิภาพและสามารถเรียนรู้ได้อย่างรวดเร็ว การเขียนเนื้อหาใน Markdown ให้ความรู้สึกเป็นธรรมชาติเนื่องจากมีไวยากรณ์ที่เรียบง่าย เอกสารดูสะอาดและเป็นระเบียบ
คุณควรวางบทความในโฟลเดอร์ที่ระบุไว้ในไฟล์คอนฟิกูเรชันส่วนกลาง ชื่อบทความควรเป็นไปตามแบบแผนที่กำหนดโดยเครื่องกำเนิดไฟฟ้า
ใน Jekyll คุณควรวางบทความใน _posts
ไดเรกทอรี ชื่อบทความควรมีรูปแบบดังต่อไปนี้: YEAR-MONTH-DAY-title.MARKUP เครื่องกำเนิดไฟฟ้าอื่น ๆ มีกฎที่คล้ายกันและมีคำสั่งสำหรับการสร้างบทความใหม่
คำสั่งสำหรับการสร้างบทความใหม่ใน Middleman, Hugo และ Hexo มีดังนี้
คนกลาง
หลักการของความใกล้ชิดระบุว่า
middleman article my_article
ฮิวโก้
hugo new posts/my_article.md
เฮกโซ
hexo new post my_article
ใน Markdown คุณถูก จำกัด ไว้ที่ชุดไวยากรณ์เฉพาะ โชคดีสำหรับเราเครื่องกำเนิดไฟฟ้าทั้งหมดสามารถประมวลผล HTML แบบดิบได้เช่นกัน ตัวอย่างเช่นหากคุณต้องการเพิ่มจุดยึดด้วยคลาสเฉพาะคุณสามารถเพิ่มได้ตามที่คุณต้องการในไฟล์ HTML ปกติ:
This is a text with a link
.
Front matter คือบล็อกข้อมูลที่อยู่ด้านบนของไฟล์ Markdown คุณสามารถตั้งค่าตัวแปรที่กำหนดเองเพื่อจัดเก็บข้อมูลที่คุณต้องการเพื่อสร้างเนื้อหาที่ดีขึ้น แทนที่จะเขียน HTML ใน Markdown ซึ่งอาจทำให้โครงสร้างเอกสารรกและน่าเกลียดคุณสามารถกำหนดตัวแปรในส่วนหน้าได้
ตัวอย่างเช่นนี่คือวิธีที่คุณสามารถเพิ่มแท็กให้กับบทความของคุณ
tags: - web - dev - featured
ตัวสร้างเพจแบบคงที่ใช้ภาษาเทมเพลตในการประมวลผลเทมเพลต ในการแทรกข้อมูลลงในเทมเพลตคุณต้องใช้แท็ก ตัวอย่างเช่นหากต้องการแสดงชื่อหน้าใน Jekyll คุณสามารถเขียน:
วิธีที่ดีที่สุดในการแยกแยะองค์ประกอบแผนภูมิคือการใช้
{{ page.title }}
มาลองแสดงรายการแท็กจากส่วนหน้าในโพสต์ของเราใน เจคิลล์ คุณต้องตรวจสอบว่ามีตัวแปรหรือไม่ จากนั้นคุณต้องวนซ้ำแท็กและแสดงในรายการที่ไม่เรียงลำดับ
{%- if page.tags -%} {%- for tag in page.tags -%} - {{ tag }}
{%- endfor -%}
{%- endif -%}
คนกลาง:
ฮิวโก้:
{{ if .Params.Tags }} {{ range .Params.Tags }} - {{ . }}
{{ end }}
{{ end }}
เฮกโซ:
บันทึก: เป็นแนวทางปฏิบัติที่ดีในการตรวจสอบว่ามีตัวแปรอยู่หรือไม่เพื่อป้องกันไม่ให้กระบวนการสร้างล้มเหลว สามารถประหยัดเวลาในการดีบักและทดสอบได้หลายชั่วโมง
ตัวสร้างเพจแบบคงที่จัดเตรียมตัวแปรส่วนกลางที่พร้อมใช้งานสำหรับการส่งเทมเพลต ตัวแปรประเภทต่างๆเก็บข้อมูลที่แตกต่างกัน ตัวอย่างเช่นไซต์ตัวแปรส่วนกลางใน Hexo มีข้อมูลเกี่ยวกับโพสต์หน้าหมวดหมู่และแท็กของไซต์
การรู้ตัวแปรที่มีและวิธีใช้สามารถทำให้ชีวิตของนักพัฒนาง่ายขึ้น Hugo ใช้ไลบรารีเทมเพลตของ Go ในการทำเทมเพลต การทำงานกับตัวแปรใน Hugo อาจเป็นปัญหาได้หากคุณไม่คุ้นเคย บริบท หรือ“ จุด” ว่าพวกเขาเรียกมันอย่างไร
คนกลางไม่มีตัวแปรส่วนกลาง อย่างไรก็ตามคุณสามารถเปิดไฟล์ คนกลาง - บล็อก ส่วนขยายที่จะช่วยให้คุณสามารถเข้าถึงตัวแปรบางอย่างเช่นรายการบทความ หากคุณต้องการเพิ่มตัวแปรส่วนกลางคุณสามารถทำได้โดยการแยกข้อมูลลงในไฟล์ข้อมูล
เมื่อคุณต้องการจัดเก็บข้อมูลที่ไม่มีอยู่ในไฟล์ Markdown คุณควรใช้ไฟล์ข้อมูล ตัวอย่างเช่นหากคุณต้องการบันทึกรายการลิงก์ทางสังคมของคุณที่คุณต้องการแสดงในส่วนท้ายของไซต์ของคุณ ตัวสร้างเพจแบบคงที่ทั้งหมดรองรับไฟล์ YAML และ JSON นอกจากนี้ Jekyll ยังรองรับไฟล์ CSV และ Hugo รองรับไฟล์ TOML
มาเก็บลิงก์ทางสังคมเหล่านั้นไว้ในไฟล์ข้อมูลของเรา เนื่องจากเครื่องกำเนิดไฟฟ้าทั้งหมดรองรับรูปแบบ YAML เรามาบันทึกข้อมูลในไฟล์ social.yml กันดังนี้
- name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/
Jekyll เก็บไฟล์ข้อมูลไว้ใน _data
ไดเรกทอรีโดยค่าเริ่มต้น คนกลางและฮิวโก้ใช้ไดเร็กทอรีข้อมูลและ Hexo ใช้ source/_data directory
ในการส่งออกข้อมูลคุณสามารถใช้รหัสต่อไปนี้:
เจคิลล์
{%- if site.data.social -%} {% for social in site.data.social %} - {{ social.name }}
{%- endfor -%}
{%- endif -%}
คนกลาง
ฮิวโก้
{{ if $.Site.Data.social }} {{ range $.Site.Data.social }} - {{ .name }}
{{ end }}
{{ end }}
เฮกโซ
เทมเพลตมักรองรับการกรองข้อมูล ตัวอย่างเช่นหากคุณต้องการทำให้หัวเรื่องเป็นตัวพิมพ์ใหญ่คุณสามารถทำได้ดังนี้:
{ page.title }
คนกลางมีไวยากรณ์ที่คล้ายกัน:
Hugo ใช้คำสั่งต่อไปนี้:
{ upper }
Hexo มีไวยากรณ์ที่แตกต่างกัน แต่ผลลัพธ์ก็เหมือนกัน
การจัดการสินทรัพย์ได้รับการจัดการที่แตกต่างกันไปในตัวสร้างเพจแบบคงที่ Jekyll รวบรวมไฟล์เนื้อหาทุกที่ที่วางไว้ คนกลางจัดการเฉพาะเนื้อหาที่เก็บไว้ในโฟลเดอร์ต้นทาง ตำแหน่งเริ่มต้นสำหรับสินทรัพย์ใน Hugo คือไดเร็กทอรีสินทรัพย์ Hexo แนะนำให้วางสินทรัพย์ในไดเรกทอรีที่มาทั่วโลก
กรอบกระบวนการที่ใช้ในการจัดการงานเกี่ยวกับผลิตภัณฑ์ที่ซับซ้อนในสภาพแวดล้อมที่ซับซ้อนเรียกว่า
Jekyll สนับสนุน Sass นอกกรอบ แต่คุณควรปฏิบัติตาม กฎบางอย่าง . คนกลางยังสนับสนุน Sass นอกกรอบ Hugo รวบรวม Sass ผ่าน Hugo Pipes สำหรับ Sass . Hexo ทำผ่าน เสียบเข้าไป .
หากคุณต้องการใช้คุณสมบัติ JavaScript สมัยใหม่ของ es6 คุณควรติดตั้งปลั๊กอิน อาจมีปลั๊กอินที่คล้ายกันมากกว่าหนึ่งเวอร์ชันดังนั้นคุณอาจต้องการตรวจสอบโค้ดหรือดูปัญหาที่เปิดอยู่หรือข้อตกลงล่าสุดเพื่อค้นหาสิ่งที่ดีที่สุด
โดยค่าเริ่มต้นไม่รองรับการปรับภาพให้เหมาะสม นอกจากนี้เช่นเดียวกับปลั๊กอิน es6 มีปลั๊กอินมากกว่าหนึ่งรายการเพื่อปรับแต่งภาพ ทำการบ้านและพยายามค้นหาปลั๊กอินที่ดีที่สุดสำหรับงาน หรือคุณสามารถใช้โซลูชันของบุคคลที่สาม ในไฟล์ บล็อก ที่สร้างด้วย Hexo ฉันใช้แผน Cloudinary ฟรี ฉันพัฒนาไฟล์ แท็กคลาวด์ และฉันกำลังจัดเตรียมรูปภาพที่ตอบสนองและปรับให้เหมาะสมผ่านการแปลงระบบคลาวด์
จำนวนโดรนที่ขายในปี 2560
ตัวสร้างเพจแบบคงที่มีไลบรารีที่มีศักยภาพซึ่งช่วยให้คุณปรับแต่งเว็บไซต์ของคุณได้ ปลั๊กอินแต่ละตัวมีจุดประสงค์ที่แตกต่างกัน คุณสามารถค้นหาปลั๊กอินที่หลากหลายตั้งแต่ LiveReload เพื่อสภาพแวดล้อมการพัฒนาที่ดีขึ้นไปจนถึงการสร้าง Sitemap หรือ RSS feed
คุณสามารถเขียนปลั๊กอินหรือส่วนขยายใหม่ได้ ก่อนจะตรวจสอบว่ามีปลั๊กอินที่คล้ายกันหรือไม่ ดู รายการปลั๊กอิน Jekyll , นามสกุลคนกลาง และ ปลั๊กอิน Hexo . Hugo ไม่มีปลั๊กอินหรือส่วนขยาย อย่างไรก็ตามมันสนับสนุนรหัสย่อที่กำหนดเอง
Shortcodes คือข้อมูลโค้ดที่คุณสามารถวางไว้ในเอกสาร Markdown ตัวอย่างข้อมูลเหล่านั้นจะส่งออกโค้ด HTML Hugo และ Hexo รองรับรหัสย่อ มีรหัสย่อในตัวเช่นเดียวกับรูปใน Hugo:
{{}}
Hexo รหัสย่อ youtube:
{% youtube video_id %}
หากคุณไม่พบรหัสย่อที่เหมาะสมคุณสามารถสร้างรหัสใหม่ได้ ตัวอย่างเช่น Hexo ไม่รองรับการฝัง CanIUse และฉันได้พัฒนา แท็กใหม่ ที่รองรับการฝัง CanIUse อย่าลืมเผยแพร่ปลั๊กอินของคุณบน npm หรือเว็บไซต์เครื่องมือสร้างอย่างเป็นทางการ ชุมชนจะขอบคุณถ้าคุณทำ
ตัวสร้างหน้าคงที่อาจเป็นค่าใช้จ่ายสำหรับบุคคลที่ไม่ใช่ด้านเทคนิค การเรียนรู้วิธีใช้คำสั่งหรือ Markdown ไม่ใช่เรื่องง่ายสำหรับทุกคน ในกรณีนี้ผู้ใช้จะได้รับประโยชน์จาก ระบบจัดการเนื้อหาสำหรับไซต์ JAMstack . ในรายการนี้คุณจะพบระบบที่ตรงกับความต้องการของคุณมากที่สุด ทราบว่าต้องใช้เวลาพอสมควรในการกำหนดค่า CMS แต่ในระยะยาวคุณและผู้ใช้รายอื่นอาจได้รับประโยชน์จากการเผยแพร่เนื้อหาอย่างมีประสิทธิภาพมากขึ้น
หากคุณไม่ต้องการใช้เวลาในการกำหนดค่าโครงการมากเกินไปคุณจะได้รับประโยชน์จาก เทมเพลต JAMstack . เทมเพลตเหล่านี้บางส่วนได้รับการกำหนดค่าล่วงหน้าด้วย CMS ซึ่งอาจช่วยคุณประหยัดเวลาได้มาก
คุณยังสามารถเรียนรู้มากมายโดยการตรวจสอบโค้ด ลองติดตั้งเทมเพลตเปรียบเทียบกับเทมเพลตอื่น ๆ และเลือกเทมเพลตที่ดีที่สุดสำหรับคุณ
ตัวสร้างหน้าคงที่เป็นวิธีที่รวดเร็วและเชื่อถือได้ในการสร้างเว็บไซต์ คุณยังสามารถสร้างเว็บไซต์ที่ไม่สำคัญและปรับแต่งได้สูงด้วยเครื่องกำเนิดไฟฟ้าในปัจจุบัน
ตัวอย่างเช่น, นิตยสาร Smashing ย้ายไปที่ JAMstack เมื่อปีที่แล้วและพวกเขาสามารถเพิ่มความเร็วไซต์ได้อย่างมาก มีตัวอย่างอื่น ๆ ที่ประสบความสำเร็จของเว็บไซต์แบบคงที่และพวกเขาทั้งหมดใช้หลักการเดียวกันนั่นคือการสร้างทรัพยากรแบบคงที่และส่งมอบผ่านเครือข่ายการจัดส่งเนื้อหาเพื่อการโหลดที่เร็วขึ้นและประสบการณ์ผู้ใช้ที่เหนือกว่า
มีอะไรอีกมากมายที่คุณสามารถทำได้กับเว็บไซต์แบบคงที่ของคุณตั้งแต่การใช้ Wordpress REST API เป็นแบ็กเอนด์ไปจนถึงการใช้ฟังก์ชัน Lambda มีวิธีแก้ปัญหาที่ยอดเยี่ยมสำหรับเว็บไซต์ง่ายๆเช่นการใช้งาน HTTPS นอกกรอบ หรือ การจัดการการส่งแบบฟอร์ม .
ฉันหวังว่าภาพรวมของเฟรมเวิร์กเพจแบบคงที่นี้จะช่วยให้คุณตระหนักถึงศักยภาพของพวกเขาและพิจารณาใช้มันในครั้งต่อไปที่คุณคิดถึงโครงการใหม่
ที่เกี่ยวข้อง: ฝั่งไคลเอ็นต์เทียบกับฝั่งเซิร์ฟเวอร์เทียบกับการแสดงผลล่วงหน้าสำหรับเว็บแอปหน้าเว็บแบบคงที่ประกอบด้วยเนื้อหาคงที่ซึ่งเข้ารหัสด้วย HTML มันส่ง HTML เดียวกันทุกประการให้กับผู้ใช้ทุกคน การไม่มีการสร้างอัตโนมัตินี้ทำให้เพจคงที่เร็วมาก
เว็บเพจแบบไดนามิกอาศัยเซิร์ฟเวอร์ในการสร้างแต่ละเพจแบบไดนามิกเมื่อผู้ใช้ร้องขอเพื่อเข้าถึง สิ่งนี้ช่วยให้หน้าสามารถแสดงเนื้อหาที่แตกต่างกันทุกครั้งที่เข้าชม
ไม่เหมือนกับเว็บเพจแบบคงที่คือไดนามิกเพจอาศัยการเขียนสคริปต์ฝั่งเซิร์ฟเวอร์ สิ่งนี้ช่วยให้มีความยืดหยุ่นมากขึ้นและจัดการเนื้อหาได้ง่ายขึ้น หน้าเว็บแบบคงที่มักจะเร็วขึ้นเชื่อถือได้มากขึ้นและต้องการทรัพยากรน้อยกว่ามาก
ตัวสร้างไซต์แบบคงที่ (บางครั้งเรียกสั้น ๆ ว่า SSG) สร้างเพจ HTML แบบคงที่โดยใช้ไฟล์ซอร์สซึ่งจะช่วยให้สามารถใช้วิธีไฮบริดได้ ตามทฤษฎีแล้วนี่หมายความว่าคุณสามารถเก็บเกี่ยวประโยชน์บางอย่างของเพจแบบคงที่ได้โดยไม่ต้องละทิ้งการใช้งานจริงของ CMS