ภาพรวมของเครื่องกำเนิดไซต์คงที่ยอดนิยม

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

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

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

ภาพรวมของเฟรมเวิร์กเพจสแตติกยอดนิยม

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

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

• เจคิล
  • เขียนเป็นภาษารูบี้
  • รองรับ Liquid template engine นอกกรอบ;
• คนกลาง
  • เขียนเป็นภาษารูบี้
  • รองรับเทมเพลตเอนจิน ERB และ Haml แบบสำเร็จรูป
• Hugo
  • เขียนใน Go,
  • รองรับ Go template engine นอกกรอบ;
• เฮกโซ
  • เขียนด้วยจาวาสคริปต์
  • รองรับ EJS และ Pug นอกกรอบ

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

การตั้งค่าตัวสร้างไซต์แบบคงที่

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

เอกสาร Jekyll

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

เอกสารฮิวโก้

เอกสาร Hexo

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

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

เจคิล

jekyll new my_website

คนกลาง

middleman init my_website

Hugo

hugo new my_website

เฮกโซ

hexo init my_website

การกำหนดค่า

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

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

การย้ายไปยังเครื่องกำเนิดไฟฟ้าสถิตย์

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

สำหรับ Jekyll คุณสามารถใช้ปลั๊กอิน Jekyll Exporter สำหรับ Middleman คุณสามารถใช้เครื่องมือบรรทัดคำสั่งที่เรียกว่า 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

hugo new posts/my_article.md

เฮกโซ

hexo new post my_article

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

This is a text with <a class="my-class" href="#">a link</a>

Front Matter

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

ตัวอย่างเช่น นี่คือวิธีที่คุณสามารถเพิ่มแท็กให้กับบทความของคุณ

 tags: - web - dev - featured

เทมเพลตในตัวสร้างเพจแบบคงที่

ตัวสร้างเพจแบบคงที่ใช้ภาษาเทมเพลตเพื่อประมวลผลเทมเพลต ในการแทรกข้อมูลลงในเทมเพลต คุณต้องใช้แท็ก ตัวอย่างเช่น หากต้องการแสดงชื่อหน้าใน Jekyll คุณสามารถเขียนว่า:

{{ page.title }}

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

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

คนกลาง:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

ฮิวโก้:

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

เฮกโซ:

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

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

การใช้ตัวแปร

ตัวสร้างเพจแบบคงที่จัดเตรียมตัวแปรส่วนกลางที่พร้อมใช้งานสำหรับส่งในเทมเพลต ตัวแปรประเภทต่างๆ เก็บข้อมูลต่างกัน ตัวอย่างเช่น ไซต์ตัวแปรส่วนกลางใน 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 โดยค่าเริ่มต้น คนกลางและ Hugo ใช้ไดเรกทอรีข้อมูล และ Hexo ใช้ source/_data directory

ในการส่งออกข้อมูล คุณสามารถใช้รหัสต่อไปนี้:

เจคิล

 {%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

คนกลาง

 <% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

Hugo

 {{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

เฮกโซ

 <% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

ผู้ช่วย

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

{{ page.title | upcase }}

คนกลางมีไวยากรณ์ที่คล้ายกัน:

<%= current_page.data.title.upcase %>

Hugo ใช้คำสั่งต่อไปนี้:

{{ .Title | upper }}

Hexo มีไวยากรณ์ต่างกัน แต่ผลลัพธ์ก็เหมือนกัน

<%= page.title.toUpperCase() %>

เครื่องมือสร้างเพจแบบคงที่จัดการกับสินทรัพย์อย่างไร

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

SASS

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

ES6

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

รูปภาพ

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

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

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

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

รหัสย่อใน Markdown

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

{{< figure src="/lint/to/image.jpg" title="My image" >}}

รหัสย่อ Youtube ของ Hexo:

{% youtube video_id %}

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

CMS

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

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

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

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

ห่อ

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

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

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

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