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

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

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

ภาพรวมของกรอบหน้าคงที่ยอดนิยม

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

มาดูรายละเอียดของแต่ละตัวและเปรียบเทียบคุณสมบัติพื้นฐานของพวกเขา:

• เจคิลล์
  • เขียนด้วย Ruby
  • รองรับเอ็นจินแม่แบบเหลวนอกกรอบ;
• คนกลาง
  • เขียนด้วย Ruby
  • รองรับเอ็นจิ้นเทมเพลต ERB และ Haml นอกกรอบ
• ฮิวโก้
  • เขียนใน Go
  • รองรับเครื่องมือเทมเพลต Go นอกกรอบ;
• เฮกโซ
  • เขียนด้วย JavaScript
  • รองรับ EJS และ Pug ออกจากกล่อง

ที่เกี่ยวข้อง: Back End: การใช้ Gatsby.js และ Node.js สำหรับการอัปเดตไซต์แบบคงที่

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

ฉันเป็น llc ประเภทไหน

การตั้งค่า Static Site Generators

เอกสารสำหรับแต่ละเฟรมเวิร์กเหล่านี้มีเนื้อหาครอบคลุมและไม่มีอะไรที่ดีเยี่ยมและคุณสามารถคว้าได้ที่นี่:

เอกสาร Jekyll

เอกสารคนกลาง

เอกสาร Hugo

เอกสาร Hexo

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

ตัวอย่างเช่นนี่คือวิธีที่คุณเริ่มโครงการใหม่ในกรอบต่างๆ:

เจคิลล์

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

เทมเพลตใน Static Page Generators

ตัวสร้างเพจแบบคงที่ใช้ภาษาเทมเพลตในการประมวลผลเทมเพลต ในการแทรกข้อมูลลงในเทมเพลตคุณต้องใช้แท็ก ตัวอย่างเช่นหากต้องการแสดงชื่อหน้าใน 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 มีไวยากรณ์ที่แตกต่างกัน แต่ผลลัพธ์ก็เหมือนกัน

Static Page Generators จัดการกับสินทรัพย์อย่างไร

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

กรอบกระบวนการที่ใช้ในการจัดการงานเกี่ยวกับผลิตภัณฑ์ที่ซับซ้อนในสภาพแวดล้อมที่ซับซ้อนเรียกว่า

SASS

Jekyll สนับสนุน Sass นอกกรอบ แต่คุณควรปฏิบัติตาม กฎบางอย่าง . คนกลางยังสนับสนุน Sass นอกกรอบ Hugo รวบรวม Sass ผ่าน Hugo Pipes สำหรับ Sass . Hexo ทำผ่าน เสียบเข้าไป .

ES6

หากคุณต้องการใช้คุณสมบัติ JavaScript สมัยใหม่ของ es6 คุณควรติดตั้งปลั๊กอิน อาจมีปลั๊กอินที่คล้ายกันมากกว่าหนึ่งเวอร์ชันดังนั้นคุณอาจต้องการตรวจสอบโค้ดหรือดูปัญหาที่เปิดอยู่หรือข้อตกลงล่าสุดเพื่อค้นหาสิ่งที่ดีที่สุด

รูปภาพ

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

จำนวนโดรนที่ขายในปี 2560

ปลั๊กอินส่วนขยาย

ตัวสร้างเพจแบบคงที่มีไลบรารีที่มีศักยภาพซึ่งช่วยให้คุณปรับแต่งเว็บไซต์ของคุณได้ ปลั๊กอินแต่ละตัวมีจุดประสงค์ที่แตกต่างกัน คุณสามารถค้นหาปลั๊กอินที่หลากหลายตั้งแต่ LiveReload เพื่อสภาพแวดล้อมการพัฒนาที่ดีขึ้นไปจนถึงการสร้าง Sitemap หรือ RSS feed

คุณสามารถเขียนปลั๊กอินหรือส่วนขยายใหม่ได้ ก่อนจะตรวจสอบว่ามีปลั๊กอินที่คล้ายกันหรือไม่ ดู รายการปลั๊กอิน Jekyll , นามสกุลคนกลาง และ ปลั๊กอิน Hexo . Hugo ไม่มีปลั๊กอินหรือส่วนขยาย อย่างไรก็ตามมันสนับสนุนรหัสย่อที่กำหนดเอง

รหัสย่อใน Markdown

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

{{}}

Hexo รหัสย่อ youtube:

{% youtube video_id %}

หากคุณไม่พบรหัสย่อที่เหมาะสมคุณสามารถสร้างรหัสใหม่ได้ ตัวอย่างเช่น Hexo ไม่รองรับการฝัง CanIUse และฉันได้พัฒนา แท็กใหม่ ที่รองรับการฝัง CanIUse อย่าลืมเผยแพร่ปลั๊กอินของคุณบน npm หรือเว็บไซต์เครื่องมือสร้างอย่างเป็นทางการ ชุมชนจะขอบคุณถ้าคุณทำ

CMS

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

โบนัส: เทมเพลต JAMstack

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

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

ห่อ

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

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

มีอะไรอีกมากมายที่คุณสามารถทำได้กับเว็บไซต์แบบคงที่ของคุณตั้งแต่การใช้ Wordpress REST API เป็นแบ็กเอนด์ไปจนถึงการใช้ฟังก์ชัน Lambda มีวิธีแก้ปัญหาที่ยอดเยี่ยมสำหรับเว็บไซต์ง่ายๆเช่นการใช้งาน HTTPS นอกกรอบ หรือ การจัดการการส่งแบบฟอร์ม .

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

ที่เกี่ยวข้อง: ฝั่งไคลเอ็นต์เทียบกับฝั่งเซิร์ฟเวอร์เทียบกับการแสดงผลล่วงหน้าสำหรับเว็บแอป

ทำความเข้าใจพื้นฐาน

หน้าเว็บแบบคงที่คืออะไร?

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

หน้าเว็บแบบไดนามิกคืออะไร?

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

อะไรคือความแตกต่างระหว่างเว็บไซต์แบบคงที่และแบบไดนามิก

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

ตัวสร้างไซต์แบบคงที่คืออะไร?

ตัวสร้างไซต์แบบคงที่ (บางครั้งเรียกสั้น ๆ ว่า SSG) สร้างเพจ HTML แบบคงที่โดยใช้ไฟล์ซอร์สซึ่งจะช่วยให้สามารถใช้วิธีไฮบริดได้ ตามทฤษฎีแล้วนี่หมายความว่าคุณสามารถเก็บเกี่ยวประโยชน์บางอย่างของเพจแบบคงที่ได้โดยไม่ต้องละทิ้งการใช้งานจริงของ CMS