Jekyll สำหรับนักพัฒนา Wordpress

เผยแพร่แล้ว: 2022-03-10
สรุปอย่างรวดเร็ว ↬ Jekyll กำลังได้รับความนิยมในฐานะทางเลือกที่เบากว่า WordPress มักถูกมองว่าเป็นเครื่องมือที่นักพัฒนาใช้ในการสร้างบล็อกส่วนตัวของตน นั่นเป็นเพียงส่วนเล็กๆ ของภูเขาน้ำแข็ง — สามารถทำได้มากกว่านั้นมาก! ในบทความนี้ เราจะสวมบทบาทเป็นนักพัฒนาเว็บที่สร้างเว็บไซต์ให้กับสำนักงานกฎหมายที่สมมติขึ้น WordPress เป็นตัวเลือกที่ชัดเจนสำหรับเว็บไซต์เช่นนี้ แต่เป็นเครื่องมือเดียวที่เราควรพิจารณาหรือไม่ มาดูวิธีการสร้างเว็บไซต์ที่แตกต่างไปจากเดิมอย่างสิ้นเชิงโดยใช้ Jekyll

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

Jekyll สำหรับนักพัฒนา Wordpress

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

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

Jekyll คืออะไร?

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

ทำไมต้องเจคิล?

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

ข้อดีของ Jekyll

  • ความซับซ้อนน้อยลง
    เว็บไซต์ Jekyll เป็นเว็บไซต์แบบคงที่ที่มีภาษาเทมเพลต มีส่วนประกอบในการสร้างและบำรุงรักษาน้อยลง บนเซิร์ฟเวอร์ เราต้องการเว็บเซิร์ฟเวอร์ที่สามารถให้บริการไฟล์เท่านั้น
  • ความเร็ว
    เมื่อผู้เยี่ยมชมดูหน้าเว็บบนไซต์ Jekyll เซิร์ฟเวอร์จะส่งคืนไฟล์ที่มีอยู่ โดยไม่มีการประมวลผล เพิ่มเติม ซึ่งเร็วกว่า WordPress มาก ซึ่งสร้างหน้าแบบไดนามิกตามเวลาที่ร้องขอ หมายเหตุ: ปลั๊กอิน WordPress Caching สามารถขจัดช่องว่างด้านประสิทธิภาพนี้ได้
  • ความเสถียร
    WordPress มีส่วนประกอบมากขึ้นในการทำงานร่วมกันเพื่อสร้างหน้าสำหรับผู้เยี่ยมชม หากส่วนประกอบล้มเหลว ผู้เยี่ยมชมอาจไม่สามารถดูเว็บไซต์ได้ ข้อผิดพลาดน้อยมากเมื่อเว็บเซิร์ฟเวอร์ให้บริการเฉพาะไฟล์
  • ความปลอดภัย
    Wordpress ทำหน้าที่ลดความเสี่ยงด้านความปลอดภัยได้มาก เช่น การโจมตี CSRF, XSS หรือ SQL injection อย่างไรก็ตาม ขึ้นอยู่กับว่าคุณมีการอัปเดตล่าสุดอยู่เสมอ ไซต์สแตติกช่วยขจัดปัญหานี้ได้เนื่องจากไม่มีการจัดเก็บข้อมูลแบบไดนามิกที่แฮ็กเกอร์สามารถใช้ประโยชน์ได้
  • ควบคุมแหล่งที่มา
    เว็บไซต์ Jekyll เป็นไดเร็กทอรีของไฟล์ ดังนั้นเราจึงสามารถจัดเก็บเว็บไซต์ทั้งหมดไว้ในที่เก็บ Git การทำงานกับพื้นที่เก็บข้อมูลมีประโยชน์มากมาย (แม้ว่า VersionPress กำลังอยู่ในระหว่างการพัฒนาและเปิดใช้งานเวิร์กโฟลว์นี้สำหรับ WordPress)

ข้อเสียของ Jekyll

  • ไม่มี GUI
    ลูกค้าสามารถลงทะเบียนกับ WordPress.com เลือกธีมและตั้งค่าเว็บไซต์พื้นฐานได้ด้วยตนเอง Jekyll เป็นเครื่องมือบรรทัดคำสั่งที่ครอบงำผู้ใช้ที่ไม่ใช่ด้านเทคนิคส่วนใหญ่ มี GUI ของบุคคลที่สามสำหรับ Jekyll รวมถึง CloudCannon (ข้อจำกัดความรับผิดชอบ: ฉันเป็นผู้ร่วมก่อตั้ง), Forestry, Jekyll Admin, Netlify CMS, Prose และ Siteleaf อย่างไรก็ตาม นักพัฒนาซอฟต์แวร์จำเป็นต้องตั้งค่าเหล่านี้ก่อนที่จะส่งให้ลูกค้า
  • เวลาสร้าง
    ในสถานการณ์ของเรา นี่ไม่ใช่ปัญหาเพราะเว็บไซต์จะสร้างภายในไม่กี่วินาที อย่างไรก็ตาม เว็บไซต์ขนาดใหญ่ที่มีโพสต์ 10,000 ถึง 100,000 โพสต์อาจใช้เวลาสร้างไม่กี่นาที สิ่งนี้น่าผิดหวังเมื่อเราพัฒนาเพราะเราต้องรอให้เว็บไซต์สร้างก่อนที่จะดูตัวอย่างในเบราว์เซอร์
  • ธีม
    Jekyll มีธีมอยู่บ้าง แต่ก็เทียบไม่ได้กับธีมนับพันที่มีให้สำหรับ WordPress
  • ความสามารถในการขยาย
    หากเราต้องการเพิ่มฟังก์ชันการทำงานที่กำหนดเองให้กับเว็บไซต์ WordPress ของเรา เราสามารถเขียน PHP ของเราเองได้ เราสามารถสร้างปลั๊กอิน Ruby แบบกำหนดเองสำหรับ Jekyll ได้ อย่างไรก็ตาม ปลั๊กอินเหล่านี้ทำงานในเวลาสร้างมากกว่าเวลาร้องขอ
  • สนับสนุน
    WordPress มีชุมชนผู้เชี่ยวชาญจำนวนมากและแหล่งข้อมูลอื่นๆ เพื่อช่วยเหลือ Jekyll มีทรัพยากรที่คล้ายกันแต่มีขนาดเล็กกว่า

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

การดำเนินการ

WordPress และ Jekyll ใช้แนวทางต่างๆ ในการสร้างเว็บไซต์แต่มีฟังก์ชันการใช้งานร่วมกันมากมาย มาเริ่มสร้างเว็บไซต์ Jekyll กันเถอะ

กำลังติดตั้ง

สภาพแวดล้อมการพัฒนาทั่วไปสำหรับ WordPress ต้องมีการติดตั้ง Apache หรือ NGINX, PHP และ MySQL จากนั้นเราจะติดตั้ง WordPress และกำหนดค่าเว็บเซิร์ฟเวอร์

สำหรับ Jekyll เราจำเป็นต้องตรวจสอบให้แน่ใจว่าเราได้ติดตั้ง Ruby แล้ว (บางครั้งอาจยากกว่าที่คิด) จากนั้นเราติดตั้ง Jekyll gem:

 gem install jekyll

หากคุณใช้ macOS ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งนักพัฒนา Xcode ก่อน

 xcode-select --install

วิ่ง

การเรียกใช้ไซต์ WordPress มักจะประกอบด้วยการเริ่มฐานข้อมูลและเว็บเซิร์ฟเวอร์

ใน Jekyll เราไปที่ไฟล์เว็บไซต์ของเรา (ไดเร็กทอรีว่าง ณ จุดนี้) ในเทอร์มินัลและเรียกใช้:

 jekyll serve

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

หน้า

ได้เวลาสร้างหน้าแรกของเราแล้ว มาเริ่มกันที่หน้าแรก หน้ามีไว้สำหรับเนื้อหาแบบสแตนด์อโลนโดยไม่มีวันที่ที่เกี่ยวข้อง WordPress เก็บเนื้อหาของหน้าไว้ในฐานข้อมูล

ใน Jekyll หน้าต่างๆ เป็นไฟล์ HTML เราจะเริ่มด้วย HTML ล้วนๆ แล้วเพิ่มฟีเจอร์ Jekyll ตามที่ต้องการ นี่คือ index.html ในสถานะปัจจุบัน:

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> </div> </section> <footer> <p class="copyright"> &copy; 2016 </p> </footer> </body> </html>

ของเหลว

ใน WordPress เราสามารถเขียน PHP เพื่อทำอะไรก็ได้ เจคิลใช้แนวทางที่แตกต่างออกไป แทนที่จะให้ภาษาโปรแกรมเต็มรูปแบบ มันใช้ภาษาเทมเพลตชื่อ Liquid (WordPress มีเทมเพลตภาษาเช่น Timber)

ส่วนท้ายของ index.html มีประกาศเกี่ยวกับลิขสิทธิ์พร้อมปี:

 <p class="copyright"> &copy; 2016 </p>

เราไม่น่าจะจำอัปเดตสิ่งนี้ทุกปี ดังนั้นลองใช้ Liquid เพื่อส่งออกปีปัจจุบัน:

 <p class="copyright"> &copy; {{ site.time | date: "%Y" }} </p>

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

รวมถึง

HTML ส่วนใหญ่ใน index.html ใช้สำหรับตั้งค่าการจัดวางโดยรวมและจะไม่เปลี่ยนแปลงระหว่างหน้าต่างๆ การทำซ้ำนี้จะนำไปสู่การบำรุงรักษาเป็นจำนวนมาก ดังนั้นเราจึงลดมันลง

การรวมเป็นหนึ่งในสิ่งแรกที่ฉันได้เรียนรู้ใน PHP เมื่อใช้การ include เราสามารถใส่เนื้อหาส่วนหัวและส่วนท้ายในไฟล์ต่างๆ แล้วรวมเนื้อหาเดียวกันในหลายหน้า

Jekyll มีคุณสมบัติเหมือนกันทุกประการ รวมถูกเก็บไว้ในโฟลเดอร์ชื่อ _includes เราใช้ Liquid เพื่อรวมไว้ใน index.html :

 {% include header.html %} <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> {% include footer.html %}

เลย์เอาต์

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

Jekyll เทียบเท่ากับไฟล์เทมเพลตคือเลย์เอาต์ เลย์เอาต์คือไฟล์ HTML ที่มีตัวยึดตำแหน่งสำหรับเนื้อหา สิ่งเหล่านี้ถูกเก็บไว้ในไดเร็กทอรี _layouts เราจะสร้าง _layouts/default.html เพื่อให้มีเค้าโครง HTML พื้นฐาน:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> {{ content }} </div> </section> <footer> <p class="copyright"> &copy; {{ site.time | date: "%Y-%m-%d" }} </p> </footer> </body> </html>

จากนั้น แทนที่การรวมใน index.html โดยระบุเค้าโครง เราระบุเลย์เอาต์โดยใช้ front Matter ซึ่งเป็นข้อมูลโค้ดของ YAML ที่อยู่ระหว่างเส้นประสามเส้นสองเส้นที่ด้านบนสุดของไฟล์ (จะมีรายละเอียดเพิ่มเติมเร็วๆ นี้)

 --- layout: default --- <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote>

ตอนนี้ เราสามารถมีเลย์เอาต์เดียวกันในทุกหน้าของเรา

Front Matter

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

แนวคิดนี้เรียกว่า front matter ใน Jekyll ก่อนหน้านี้ เราใช้ front matter เพื่อตั้งค่าเลย์เอาต์สำหรับ index.html ตอนนี้เราสามารถตั้งค่าตัวแปรของเราเองและเข้าถึงได้โดยใช้ Liquid สิ่งนี้จะช่วยลดการซ้ำซ้อนบนเว็บไซต์ของเรา

มาเพิ่มข้อความรับรองหลายรายการใน index.html เราสามารถคัดลอกและวาง HTML ได้ แต่อีกครั้งที่นำไปสู่การบำรุงรักษาที่เพิ่มขึ้น ให้เพิ่มคำรับรองในเรื่องก่อนหน้าและทำซ้ำกับ Liquid:

 --- layout: default testimonials: - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business. image: "/images/joice.jpeg" name: Joice Carmold - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community. image: "/images/peter.jpeg" name: Peter Rottenburg - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <div class="testimonials"> {% for testimonial in page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class="testimonial-author"> <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> {% endfor %} </div>

กระทู้

WordPress จัดเก็บเนื้อหา HTML วันที่ และข้อมูลเมตาอื่น ๆ สำหรับโพสต์ในฐานข้อมูล

ใน Jekyll แต่ละโพสต์เป็นไฟล์สแตติกที่เก็บอยู่ในไดเร็กทอรี _posts ชื่อไฟล์มีวันที่เผยแพร่และชื่อสำหรับโพสต์ ตัวอย่างเช่น _posts/2016-11-11-real-estate-flipping.md ซอร์สโค้ดสำหรับโพสต์บล็อกใช้โครงสร้างนี้:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

เรายังสามารถใช้ front Matter เพื่อตั้งค่าหมวดหมู่และแท็กได้

ด้านล่างด้านหน้าเป็นเนื้อความของโพสต์ที่เขียนด้วย Markdown Markdown เป็นทางเลือกที่ง่ายกว่า HTML

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

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

มาสร้าง blog.html เพื่อวนซ้ำโพสต์และเชื่อมโยงไปยังบทความเหล่านั้น:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

ของสะสม

ใน WordPress ประเภทโพสต์ที่กำหนดเองมีประโยชน์สำหรับการจัดการกลุ่มเนื้อหา ตัวอย่างเช่น คุณอาจใช้ประเภทโพสต์ที่กำหนดเองสำหรับคำรับรอง ผลิตภัณฑ์ หรือรายการอสังหาริมทรัพย์

Jekyll มีคุณสมบัตินี้และเรียกมันว่าคอลเลกชัน

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

การกำหนดค่าเว็บไซต์ของเราอยู่ใน _config.yml ที่นี่เราตั้งค่าคอลเลกชันใหม่:

 collections: staff_members: output: false

ตอนนี้เราเพิ่มพนักงานของเรา พนักงานแต่ละคนจะแสดงในไฟล์ Markdown ที่จัดเก็บไว้ในโฟลเดอร์ที่มีชื่อคอลเลกชัน ตัวอย่างเช่น _staff_members/jane-doe.md

เราเพิ่มข้อมูลเมตาในส่วนหน้าและการนำเสนอในเนื้อหา:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

คล้ายกับโพสต์ เราสามารถวนซ้ำคอลเล็กชันใน about.html เพื่อแสดงพนักงานแต่ละคน:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

ค้นหา

WordPress มีการค้นหาในตัวที่ทรงพลังและปลั๊กอินการค้นหาที่ทรงพลังยิ่งกว่าเดิม

Jekyll ไม่มีการค้นหาในตัว แต่มีวิธีแก้ไข:

  • การค้นหาฝั่งไคลเอ็นต์โดยใช้ไลบรารี JavaScript เช่น Lunr.js (Jekyll.tips มีบทช่วยสอนเกี่ยวกับวิธีตั้งค่า)
  • โซลูชันของบริษัทอื่น เช่น Algolia สำหรับการค้นหาที่มีประสิทธิภาพสูง
  • โซลูชันแบบดรอปอิน เช่น Google Custom Search

ปลั๊กอิน

ปลั๊กอินเป็นส่วนที่น่าสนใจของ WordPress โหลดฟังก์ชันได้ง่ายเพื่อให้ WordPress ทำเกือบทุกอย่าง

บนเว็บไซต์ Jekyll ของเรา ปลั๊กอิน WordPress ยอดนิยมจำนวนมากไม่จำเป็น:

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

ปลั๊กอิน WordPress อื่น ๆ มีการเทียบเท่ากับบุคคลที่สามที่เราสามารถวางลงในเว็บไซต์ได้:

  • ปลั๊กอินแบบฟอร์มการติดต่อ เช่น Contact Form 7 สามารถแทนที่ด้วย Formspree, FormKeep หรือ Wufoo
  • สำหรับร้านค้าทั่วไป อีคอมเมิร์ซ WP สามารถแทนที่ด้วย Snipcart, Gumroad หรือ Stripe
  • แทนที่จะใช้ความคิดเห็นของ WordPress กับ Akismet คุณสามารถใช้ Disqus, Facebook Comments หรือ IntenseDebate ได้

ปลั๊กอิน WordPress บางตัวสามารถจำลองด้วยแกน Jekyll ได้ นี่คือแกลเลอรีรูปภาพที่ใช้ front matter และ Liquid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

เราแค่ต้องเพิ่ม JavaScript และ CSS ของเราเองเพื่อให้สมบูรณ์

ปลั๊กอิน Jekyll สามารถจำลองการทำงานของปลั๊กอิน WordPress อื่น ๆ ได้ โปรดทราบว่าปลั๊กอิน Jekyll จะทำงานในขณะที่สร้างเว็บไซต์เท่านั้น ไม่ได้เพิ่มฟังก์ชันการทำงานตามเวลาจริง:

  • แทนที่จะใช้ One Click XML Sitemap ให้ใช้ปลั๊กอิน Jekyll Sitemap Generator
  • Jekyll SEO Tag ให้ฟังก์ชันการทำงานของ SEO Wizard บางส่วนแก่คุณ
  • แทนที่จะใช้ WPGlobus สำหรับเว็บไซต์หลายภาษา ให้ใช้ Jekyll Language Plugin

การควบคุมเวอร์ชัน

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

GitHub มีบทช่วยสอนเชิงโต้ตอบที่ยอดเยี่ยมสำหรับผู้เริ่มต้นเรียนรู้ Git

การส่งมอบลูกค้า

ซึ่งครอบคลุมถึงหลักสำคัญในการสร้างเว็บไซต์ หากคุณอยากรู้ว่าเว็บไซต์ Jekyll ทั้งหมดเข้ากันได้อย่างไร ให้ดูที่เทมเพลต Justice เป็นเทมเพลตที่ได้รับอนุญาตจาก MIT ฟรีสำหรับ Jekyll ตัวอย่างด้านบนเป็นไปตามเทมเพลตนี้

WordPress CMS ถูกสร้างขึ้นในแพลตฟอร์ม ดังนั้นเราจะต้องสร้างบัญชีสำหรับลูกค้า

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

Jekyll GUI บางตัวเสนอการโฮสต์ ในขณะที่บางตัวมีวิธีส่งออกไปยังบัคเก็ต Amazon S3 หรือ GitHub Pages

สรุป

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

<คลาส: =“ผู้เขียนรับรอง”> <img src=“{{ testimonial.image }}” alt=“รูปภาพของ {{ testimonial.name }}”> {{ testimonial.name }} </p> </blockquote> { % สิ้นสุดสำหรับ %} </div>

กระทู้

WordPress จัดเก็บเนื้อหา HTML วันที่ และข้อมูลเมตาอื่น ๆ สำหรับโพสต์ในฐานข้อมูล

ใน Jekyll แต่ละโพสต์เป็นไฟล์สแตติกที่เก็บอยู่ในไดเร็กทอรี _posts ชื่อไฟล์มีวันที่เผยแพร่และชื่อสำหรับโพสต์ ตัวอย่างเช่น _posts/2016-11-11-real-estate-flipping.md ซอร์สโค้ดสำหรับโพสต์บล็อกใช้โครงสร้างนี้:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

เรายังสามารถใช้ front Matter เพื่อตั้งค่าหมวดหมู่และแท็กได้

ด้านล่างด้านหน้าเป็นเนื้อความของโพสต์ที่เขียนด้วย Markdown Markdown เป็นทางเลือกที่ง่ายกว่า HTML

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

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

มาสร้าง blog.html เพื่อวนซ้ำโพสต์และเชื่อมโยงไปยังบทความเหล่านั้น:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

ของสะสม

ใน WordPress ประเภทโพสต์ที่กำหนดเองมีประโยชน์สำหรับการจัดการกลุ่มเนื้อหา ตัวอย่างเช่น คุณอาจใช้ประเภทโพสต์ที่กำหนดเองสำหรับคำรับรอง ผลิตภัณฑ์ หรือรายการอสังหาริมทรัพย์

Jekyll มีคุณสมบัตินี้และเรียกมันว่าคอลเลกชัน

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

การกำหนดค่าเว็บไซต์ของเราอยู่ใน _config.yml ที่นี่เราตั้งค่าคอลเลกชันใหม่:

 collections: staff_members: output: false

ตอนนี้เราเพิ่มพนักงานของเรา พนักงานแต่ละคนจะแสดงในไฟล์ Markdown ที่จัดเก็บไว้ในโฟลเดอร์ที่มีชื่อคอลเลกชัน ตัวอย่างเช่น _staff_members/jane-doe.md

เราเพิ่มข้อมูลเมตาในส่วนหน้าและการนำเสนอในเนื้อหา:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

คล้ายกับโพสต์ เราสามารถวนซ้ำคอลเล็กชันใน about.html เพื่อแสดงพนักงานแต่ละคน:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

ค้นหา

WordPress มีการค้นหาในตัวที่ทรงพลังและปลั๊กอินการค้นหาที่ทรงพลังยิ่งกว่าเดิม

Jekyll ไม่มีการค้นหาในตัว แต่มีวิธีแก้ไข:

  • การค้นหาฝั่งไคลเอ็นต์โดยใช้ไลบรารี JavaScript เช่น Lunr.js (Jekyll.tips มีบทช่วยสอนเกี่ยวกับวิธีตั้งค่า)
  • โซลูชันของบริษัทอื่น เช่น Algolia สำหรับการค้นหาที่มีประสิทธิภาพสูง
  • โซลูชันแบบดรอปอิน เช่น Google Custom Search

ปลั๊กอิน

ปลั๊กอินเป็นส่วนที่น่าสนใจของ WordPress โหลดฟังก์ชันได้ง่ายเพื่อให้ WordPress ทำเกือบทุกอย่าง

บนเว็บไซต์ Jekyll ของเรา ปลั๊กอิน WordPress ยอดนิยมจำนวนมากไม่จำเป็น:

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

ปลั๊กอิน WordPress อื่น ๆ มีการเทียบเท่ากับบุคคลที่สามที่เราสามารถวางลงในเว็บไซต์ได้:

  • ปลั๊กอินแบบฟอร์มการติดต่อ เช่น Contact Form 7 สามารถแทนที่ด้วย Formspree, FormKeep หรือ Wufoo
  • สำหรับร้านค้าทั่วไป อีคอมเมิร์ซ WP สามารถแทนที่ด้วย Snipcart, Gumroad หรือ Stripe
  • แทนที่จะใช้ความคิดเห็นของ WordPress กับ Akismet คุณสามารถใช้ Disqus, Facebook Comments หรือ IntenseDebate ได้

ปลั๊กอิน WordPress บางตัวสามารถจำลองด้วยแกน Jekyll ได้ นี่คือแกลเลอรีรูปภาพที่ใช้ front matter และ Liquid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

เราแค่ต้องเพิ่ม JavaScript และ CSS ของเราเองเพื่อให้สมบูรณ์

ปลั๊กอิน Jekyll สามารถจำลองการทำงานของปลั๊กอิน WordPress อื่น ๆ ได้ โปรดทราบว่าปลั๊กอิน Jekyll จะทำงานในขณะที่สร้างเว็บไซต์เท่านั้น ไม่ได้เพิ่มฟังก์ชันการทำงานตามเวลาจริง:

  • แทนที่จะใช้ One Click XML Sitemap ให้ใช้ปลั๊กอิน Jekyll Sitemap Generator
  • Jekyll SEO Tag ให้ฟังก์ชันการทำงานของ SEO Wizard บางส่วนแก่คุณ
  • แทนที่จะใช้ WPGlobus สำหรับเว็บไซต์หลายภาษา ให้ใช้ Jekyll Language Plugin

การควบคุมเวอร์ชัน

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

GitHub มีบทช่วยสอนเชิงโต้ตอบที่ยอดเยี่ยมสำหรับผู้เริ่มต้นเรียนรู้ Git

การส่งมอบลูกค้า

ซึ่งครอบคลุมถึงหลักสำคัญในการสร้างเว็บไซต์ หากคุณอยากรู้ว่าเว็บไซต์ Jekyll ทั้งหมดเข้ากันได้อย่างไร ให้ดูที่เทมเพลต Justice เป็นเทมเพลตที่ได้รับอนุญาตจาก MIT ฟรีสำหรับ Jekyll ตัวอย่างด้านบนเป็นไปตามเทมเพลตนี้

WordPress CMS ถูกสร้างขึ้นในแพลตฟอร์ม ดังนั้นเราจะต้องสร้างบัญชีสำหรับลูกค้า

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

Jekyll GUI บางตัวเสนอการโฮสต์ ในขณะที่บางตัวมีวิธีส่งออกไปยังบัคเก็ต Amazon S3 หรือ GitHub Pages

สรุป

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

เว็บไซต์ Jekyll แรกของคุณ

ตอนนี้ถึงตาคุณแล้ว มีแหล่งข้อมูลมากมายที่จะช่วยคุณสร้างเว็บไซต์ Jekyll แรกของคุณ:

  • เว็บไซต์อย่างเป็นทางการของ Jekyll เป็นจุดเริ่มต้นที่ดีด้วยเอกสารเชิงลึกเกี่ยวกับคุณลักษณะทั้งหมดของ Jekyll
  • Jekyll.tips มีชุดวิดีโอการสอนที่ครอบคลุมหัวข้อหลักของ Jekyll
  • ดูเทมเพลต Jekyll บน GitHub เพื่อดูว่ามีการรวมเข้าด้วยกันอย่างไร: Frisco สำหรับเว็บไซต์การตลาด Scholar สำหรับเอกสารประกอบ และ Urban สำหรับเอเจนซีดิจิทัล

หากคุณกำลังจะย้ายข้อมูล Jekyll มีเครื่องมือสำหรับนำเข้าบทความจากเว็บไซต์ WordPress และ WordPress.com หลังจากนำเข้าแล้ว คุณจะต้องย้ายหรือสร้างเลย์เอาต์ เพจ CSS JavaScript และเนื้อหาอื่นๆ สำหรับเว็บไซต์ด้วยตนเอง

ห่อ

ความงามของ Jekyll อยู่ในความเรียบง่าย แม้ว่า WordPress สามารถจับคู่คุณสมบัติหลายอย่างของ Jekyll ได้ แต่ก็มักจะต้องแลกมาด้วยความซับซ้อนผ่านปลั๊กอินหรือโครงสร้างพื้นฐานเพิ่มเติม

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