Jekyll Untuk Pengembang Wordpress

Diterbitkan: 2022-03-10
Ringkasan cepat Jekyll mendapatkan popularitas sebagai alternatif ringan untuk WordPress. Hal ini sering disalahpahami sebagai alat yang digunakan pengembang untuk membangun blog pribadi mereka. Itu hanya puncak gunung es — mampu melakukan lebih banyak lagi! Dalam artikel ini, kami akan mengambil peran sebagai pengembang web yang membangun situs web untuk firma hukum fiktif. WordPress adalah pilihan yang jelas untuk situs web seperti ini, tetapi apakah itu satu-satunya alat yang harus kita pertimbangkan? Mari kita lihat cara yang sama sekali berbeda dalam membangun situs web, menggunakan Jekyll.

Dalam artikel ini, kami akan mengambil peran sebagai pengembang web yang membangun situs web untuk firma hukum fiktif. WordPress adalah pilihan yang jelas untuk situs web seperti ini, tetapi apakah itu satu-satunya alat yang harus kita pertimbangkan? Mari kita lihat cara yang sama sekali berbeda dalam membangun situs web, menggunakan Jekyll.

Jekyll Untuk Pengembang Wordpress

Bacaan Lebih Lanjut tentang SmashingMag:

  • Bangun Blog Dengan Halaman Jekyll Dan GitHub
  • Pemodelan Konten Dengan Jekyll
  • Generator Situs Statis Ditinjau: Jekyll, Middleman, Roots, Hugo
  • Mengapa Generator Situs Statis Adalah Hal Besar Berikutnya
Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Apa itu Jekyll?

Jekyll adalah generator situs web statis. Alih-alih menginstal perangkat lunak dan database di server kami, situs web Jekyll hanyalah direktori file di komputer kami. Saat kami menjalankan Jekyll di direktori tersebut, itu menghasilkan situs web statis, yang kami unggah ke penyedia hosting.

Kenapa Jekyll?

Kita perlu mempertimbangkan sejumlah pengorbanan saat memutuskan apakah Jekyll tepat untuk sebuah proyek.

Keunggulan Jekyll

  • Lebih sedikit kompleksitas
    Situs web Jekyll pada dasarnya adalah situs web statis dengan bahasa templating. Ini memiliki lebih sedikit komponen untuk dibuat dan dipelihara. Di server, kita hanya membutuhkan web server yang mampu melayani file.
  • Kecepatan
    Saat pengunjung melihat halaman di situs Jekyll, server mengembalikan file yang ada tanpa pemrosesan tambahan . Ini jauh lebih cepat daripada WordPress, yang menghasilkan halaman secara dinamis pada waktu permintaan. Catatan: Plugin Caching WordPress dapat menghilangkan kesenjangan kinerja ini.
  • Stabilitas
    WordPress memiliki lebih banyak komponen yang bekerja sama untuk menghasilkan halaman bagi pengunjung. Jika komponen gagal, pengunjung mungkin tidak dapat melihat situs web. Apalagi yang bisa salah ketika server web hanya melayani file.
  • Keamanan
    Wordpress melakukan banyak hal untuk mengurangi risiko keamanan seperti serangan CSRF, XSS, atau injeksi SQL namun itu bergantung pada Anda yang selalu memiliki pembaruan terbaru. Situs statika menghilangkan masalah ini karena tidak ada penyimpanan data dinamis yang dapat dieksploitasi oleh peretas.
  • Sumber-dikendalikan
    Situs web Jekyll adalah direktori file, jadi kami dapat menyimpan seluruh situs web dalam repositori Git. Bekerja dengan repositori memberi kami banyak manfaat (walaupun VersionPress sedang dalam pengembangan dan memungkinkan alur kerja ini untuk WordPress).

Kekurangan Jekyll

  • Tidak ada GUI
    Seorang klien dapat mendaftar ke WordPress.com, memilih tema dan membuat situs web dasar sendiri. Jekyll adalah alat baris perintah, yang membanjiri sebagian besar pengguna non-teknis. Ada GUI pihak ketiga untuk Jekyll, termasuk CloudCannon (penafian: Saya salah satu pendiri), Kehutanan, Admin Jekyll, Netlify CMS, Prose, dan Siteleaf. Namun, ini perlu diatur oleh pengembang sebelum diserahkan ke klien.
  • Waktu membangun
    Dalam situasi kami, ini bukan masalah karena situs web akan dibangun dalam waktu kurang dari satu detik. Namun, situs web yang lebih besar dengan 10.000 hingga 100.000 posting dapat membutuhkan waktu beberapa menit untuk dibuat. Ini membuat frustrasi saat kami mengembangkan karena kami harus menunggu situs web dibuat sebelum mempratinjaunya di browser.
  • Tema
    Jekyll memiliki beberapa tema yang tersedia, tetapi tidak ada apa-apanya dibandingkan dengan ribuan tema yang tersedia untuk WordPress.
  • Kemungkinan diperpanjang
    Jika kita perlu menambahkan fungsionalitas khusus ke situs WordPress kita, kita dapat menulis PHP kita sendiri. Kami dapat membuat plugin Ruby khusus untuk Jekyll, namun, ini berjalan pada waktu pembuatan daripada waktu permintaan.
  • Mendukung
    WordPress memiliki komunitas ahli dan sumber daya lain yang sangat besar untuk membantu. Jekyll memiliki sumber daya yang serupa tetapi dalam skala yang lebih kecil.

Jekyll adalah alat yang hebat untuk sebagian besar situs web informasi, seperti proyek ini. Jika proyek lebih merupakan aplikasi, kita dapat menambahkan elemen dinamis menggunakan JavaScript, tetapi pada titik tertentu kita mungkin memerlukan back end seperti WordPress'.

Penerapan

WordPress dan Jekyll mengambil pendekatan berbeda untuk membangun situs web namun berbagi banyak fungsi. Mari kita mulai membangun situs web Jekyll kita.

Menginstal

Lingkungan pengembangan khas untuk WordPress memerlukan instalasi Apache atau NGINX, PHP dan MySQL. Kemudian, kita akan menginstal WordPress dan mengkonfigurasi server web.

Untuk Jekyll, kita perlu memastikan bahwa kita telah menginstal Ruby (terkadang ini lebih sulit daripada kedengarannya). Kemudian kami menginstal permata Jekyll:

 gem install jekyll

Jika Anda menggunakan macOS, pastikan Anda telah menginstal pengembang Xcode terlebih dahulu.

 xcode-select --install

Berlari

Menjalankan situs WordPress biasanya terdiri dari memulai database dan server web.

Di Jekyll, kami menavigasi ke file situs kami (direktori kosong pada saat ini) di terminal dan menjalankan:

 jekyll serve

Ini memulai server web lokal pada port 4000 dan membangun kembali situs setiap kali file berubah.

halaman

Saatnya membuat halaman pertama kita. Mari kita mulai dengan halaman rumah. Halaman adalah untuk konten mandiri tanpa tanggal terkait. WordPress menyimpan konten halaman dalam database.

Di Jekyll, halaman adalah file HTML. Kita akan mulai dengan HTML murni dan kemudian menambahkan fitur Jekyll sesuai kebutuhan. Inilah index.html dalam keadaan saat ini:

 <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>

Cairan

Di WordPress, kita dapat menulis PHP untuk melakukan hampir semua hal. Jekyll mengambil pendekatan yang berbeda. Alih-alih menyediakan bahasa pemrograman lengkap, ia menggunakan bahasa templating bernama Liquid. (WordPress juga memiliki bahasa templating, seperti Timber.)

Footer index.html berisi pemberitahuan hak cipta dengan tahun:

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

Kami tidak mungkin mengingat untuk memperbarui ini setiap tahun, jadi mari gunakan Liquid untuk menampilkan tahun ini:

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

Kami sedang membangun situs web statis di Jekyll, jadi tanggal ini tidak akan berubah sampai kami membangun kembali situs web tersebut. Jika kami ingin tanggal berubah tanpa harus membangun kembali situs web, kami dapat menggunakan JavaScript.

Termasuk

Sebagian besar HTML di index.html adalah untuk menyiapkan tata letak keseluruhan dan tidak akan berubah antar halaman. Pengulangan ini akan menyebabkan banyak perawatan, jadi mari kita kurangi.

Termasuk adalah salah satu hal pertama yang saya pelajari di PHP. Dengan menggunakan include, kita dapat meletakkan konten header dan footer di file yang berbeda, lalu menyertakan konten yang sama di beberapa halaman.

Jekyll memiliki fitur yang persis sama. Termasuk disimpan dalam folder bernama _includes . Kami menggunakan Liquid untuk memasukkannya ke dalam 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 %}

Tata letak

Termasuk mengurangi beberapa pengulangan, tetapi kami masih memilikinya di setiap halaman. WordPress memecahkan masalah ini dengan file template yang memisahkan struktur situs web dari kontennya.

Jekyll yang setara dengan file template adalah layout. Layout adalah file HTML dengan placeholder untuk konten. Mereka disimpan di direktori _layouts . Kami akan membuat _layouts/default.html untuk memuat tata letak HTML dasar:

 <!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>

Kemudian, ganti include di index.html dengan menentukan tata letak. Kami menentukan tata letak menggunakan materi depan, yang merupakan cuplikan YAML yang berada di antara dua garis putus-putus tiga kali di bagian atas file (lebih lanjut tentang ini segera).

 --- 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>

Sekarang kita dapat memiliki tata letak yang sama di semua halaman kita.

Bagian Depan

Di WordPress, bidang khusus memungkinkan kita untuk mengatur data meta pada sebuah posting. Kita dapat menggunakannya untuk mengatur tag SEO atau untuk menampilkan dan menyembunyikan bagian halaman untuk posting tertentu.

Konsep ini disebut materi depan di Jekyll. Sebelumnya, kami menggunakan materi depan untuk mengatur tata letak untuk index.html . Kita sekarang dapat mengatur variabel kita sendiri dan mengaksesnya menggunakan Liquid. Ini semakin mengurangi pengulangan di situs web kami.

Mari tambahkan beberapa testimonial ke index.html . Kita dapat menyalin dan menempelkan HTML, tetapi sekali lagi, itu mengarah pada peningkatan pemeliharaan. Sebagai gantinya, mari tambahkan testimonial di materi depan dan ulangi dengan 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>

Postingan

WordPress menyimpan konten HTML, tanggal dan data meta lainnya untuk posting di database.

Di Jekyll, setiap posting adalah file statis yang disimpan di direktori _posts . Nama file memiliki tanggal publikasi dan judul postingan — misalnya, _posts/2016-11-11-real-estate-flipping.md . Kode sumber untuk posting blog mengambil struktur ini:

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

Kami juga dapat menggunakan materi depan untuk mengatur kategori dan tag.

Di bawah bagian depan adalah tubuh pos, ditulis dalam penurunan harga. Penurunan harga adalah alternatif yang lebih sederhana untuk HTML.

Jekyll memungkinkan kita untuk membuat layout yang mewarisi dari layout lain. Anda mungkin telah memperhatikan posting ini memiliki tata letak post . Tata letak post mewarisi dari tata letak default dan menambahkan tanggal dan judul:

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

Mari buat blog.html untuk mengulangi postingan dan menautkannya:

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

Koleksi

Di WordPress, jenis posting khusus berguna untuk mengelola grup konten. Misalnya, Anda dapat menggunakan jenis posting khusus untuk testimonial, produk, atau daftar real estat.

Jekyll memiliki fitur ini dan menyebutnya sebagai koleksi.

Halaman about.html menampilkan profil anggota staf. Meta data staf (nama, gambar, nomor telepon, bio) dapat kami tentukan di halaman depan, tetapi kemudian kami hanya dapat merujuknya di halaman itu. Di masa mendatang, kami ingin menggunakan data yang sama untuk menampilkan informasi tentang penulis di postingan blog. Koleksi memungkinkan kami untuk merujuk ke anggota staf di mana saja di situs web.

Konfigurasi situs web kami tinggal di _config.yml . Di sini, kami menetapkan koleksi baru:

 collections: staff_members: output: false

Sekarang kami menambahkan anggota staf kami. Setiap anggota staf diwakili dalam file penurunan harga yang disimpan dalam folder dengan nama koleksi; misalnya, _staff_members/jane-doe.md .

Kami menambahkan data meta di materi depan dan uraian di badan:

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

Mirip dengan posting, kami dapat mengulangi koleksi di about.html untuk menampilkan setiap anggota staf:

 --- 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>

Mencari

WordPress memiliki pencarian built-in yang kuat dan plugin pencarian yang lebih kuat.

Jekyll tidak memiliki pencarian bawaan, tetapi ada solusinya:

  • pencarian sisi klien menggunakan pustaka JavaScript seperti Lunr.js (Jekyll.tips memiliki tutorial tentang cara mengaturnya);
  • solusi pihak ketiga, seperti Algolia untuk pencarian performa tinggi;
  • solusi drop-in, seperti Google Custom Search.

Plugin

Plugin adalah bagian yang menarik dari WordPress. Sangat mudah untuk memuat fungsionalitas agar WordPress melakukan hampir semua hal.

Di situs web Jekyll kami, banyak plugin WordPress populer tidak diperlukan:

  • Keamanan iThemes
    Situs web Jekyll kami seaman server web tempat ia berjalan.
  • Penjaga Cadangan
    Situs web Jekyll kami akan hidup dalam repositori yang memberi kami akses ke seluruh riwayat perubahan.
  • WP Super Cache
    Situs Jekyll kami sudah statis.

Plugin WordPress lainnya memiliki padanan pihak ketiga yang dapat kami masukkan ke situs web:

  • Plugin formulir kontak seperti Formulir Kontak 7 dapat diganti dengan Formspree, FormKeep atau Wufoo.
  • Untuk toko sederhana, WP eCommerce dapat diganti dengan Snipcart, Gumroad atau Stripe.
  • Alih-alih komentar WordPress dengan Akismet, Anda bisa menggunakan Disqus, Facebook Comments atau IntenseDebate.

Beberapa plugin WordPress dapat ditiru dengan core Jekyll. Berikut galeri foto menggunakan front matter dan 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>

Kita hanya perlu menambahkan JavaScript dan CSS kita sendiri untuk menyelesaikannya.

Plugin Jekyll dapat meniru fungsionalitas plugin WordPress lainnya. Ingatlah bahwa plugin Jekyll hanya berjalan saat situs web sedang dibuat — mereka tidak menambahkan fungsionalitas waktu nyata:

  • Alih-alih One Click XML Sitemap, gunakan Plugin Generator Peta Situs Jekyll.
  • Tag SEO Jekyll memberi Anda beberapa fungsi dari SEO Wizard.
  • Alih-alih WPLobus untuk situs web multibahasa, gunakan Plugin Bahasa Jekyll.

Kontrol Versi

Salah satu manfaat utama menggunakan generator situs statis seperti Jekyll adalah seluruh situs dan konten dapat hidup di Git. Pada tingkat dasar, Git memberi Anda riwayat semua perubahan di situs. Untuk tim, ini membuka semua jenis alur kerja dan proses persetujuan.

GitHub memiliki tutorial interaktif yang fantastis untuk pemula yang mempelajari Git.

Serah Terima Klien

Itu mencakup mur dan baut pembuatan situs web. Jika Anda penasaran untuk melihat bagaimana seluruh situs web Jekyll cocok, lihat template Justice. Ini adalah template gratis berlisensi MIT untuk Jekyll. Cuplikan di atas didasarkan pada template ini.

CMS WordPress dibangun ke dalam platform, jadi kita perlu menyiapkan akun untuk klien.

Dengan situs web Jekyll kami, kami akan menautkan repositori Git kami ke salah satu GUI Jekyll yang disebutkan sebelumnya. Salah satu hal yang menyenangkan tentang alur kerja ini adalah bahwa perubahan klien dilakukan kembali ke repositori. Sebagai pengembang, kami dapat terus menggunakan alur kerja lokal bahkan dengan non-pengembang memperbarui situs web.

Beberapa GUI Jekyll menawarkan hosting, sementara yang lain memiliki cara untuk menghasilkan ke ember Amazon S3 atau ke Halaman GitHub.

Ringkasan

Pada titik ini, situs web Jekyll kami aktif dan dapat diedit oleh klien. Jika kami perlu membuat perubahan apa pun pada situs web, kami cukup mendorong ke repositori dan itu akan secara otomatis menyebarkan langsung.

<div class=“testimonial”> {% untuk testimonial di page.testimonials %} <blockquote class=“testimonial”> <p class=“testimonial-message”>{{ testimonial.message }}</p> <p class =“testimonial-author”> <img src=“{{ testimonial.image }}” alt=“Foto {{ testimonial.name }}”> {{ testimonial.name }} </p> </blockquote> { % akhir untuk %} </div>

Postingan

WordPress menyimpan konten HTML, tanggal dan data meta lainnya untuk posting di database.

Di Jekyll, setiap posting adalah file statis yang disimpan di direktori _posts . Nama file memiliki tanggal publikasi dan judul postingan — misalnya, _posts/2016-11-11-real-estate-flipping.md . Kode sumber untuk posting blog mengambil struktur ini:

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

Kami juga dapat menggunakan materi depan untuk mengatur kategori dan tag.

Di bawah bagian depan adalah tubuh pos, ditulis dalam penurunan harga. Penurunan harga adalah alternatif yang lebih sederhana untuk HTML.

Jekyll memungkinkan kita untuk membuat layout yang mewarisi dari layout lain. Anda mungkin telah memperhatikan posting ini memiliki tata letak post . Tata letak post mewarisi dari tata letak default dan menambahkan tanggal dan judul:

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

Mari buat blog.html untuk mengulangi postingan dan menautkannya:

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

Koleksi

Di WordPress, jenis posting khusus berguna untuk mengelola grup konten. Misalnya, Anda dapat menggunakan jenis posting khusus untuk testimonial, produk, atau daftar real estat.

Jekyll memiliki fitur ini dan menyebutnya sebagai koleksi.

Halaman about.html menampilkan profil anggota staf. Meta data staf (nama, gambar, nomor telepon, bio) dapat kami tentukan di halaman depan, tetapi kemudian kami hanya dapat merujuknya di halaman itu. Di masa mendatang, kami ingin menggunakan data yang sama untuk menampilkan informasi tentang penulis di postingan blog. Koleksi memungkinkan kami untuk merujuk ke anggota staf di mana saja di situs web.

Konfigurasi situs web kami tinggal di _config.yml . Di sini, kami menetapkan koleksi baru:

 collections: staff_members: output: false

Sekarang kami menambahkan anggota staf kami. Setiap anggota staf diwakili dalam file penurunan harga yang disimpan dalam folder dengan nama koleksi; misalnya, _staff_members/jane-doe.md .

Kami menambahkan data meta di materi depan dan uraian di badan:

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

Mirip dengan posting, kami dapat mengulangi koleksi di about.html untuk menampilkan setiap anggota staf:

 --- 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>

Mencari

WordPress memiliki pencarian built-in yang kuat dan plugin pencarian yang lebih kuat.

Jekyll tidak memiliki pencarian bawaan, tetapi ada solusinya:

  • pencarian sisi klien menggunakan pustaka JavaScript seperti Lunr.js (Jekyll.tips memiliki tutorial tentang cara mengaturnya);
  • solusi pihak ketiga, seperti Algolia untuk pencarian performa tinggi;
  • solusi drop-in, seperti Google Custom Search.

Plugin

Plugin adalah bagian yang menarik dari WordPress. Sangat mudah untuk memuat fungsionalitas agar WordPress melakukan hampir semua hal.

Di situs web Jekyll kami, banyak plugin WordPress populer tidak diperlukan:

  • Keamanan iThemes
    Situs web Jekyll kami seaman server web tempat ia berjalan.
  • Penjaga Cadangan
    Situs web Jekyll kami akan hidup dalam repositori yang memberi kami akses ke seluruh riwayat perubahan.
  • WP Super Cache
    Situs Jekyll kami sudah statis.

Plugin WordPress lainnya memiliki padanan pihak ketiga yang dapat kami masukkan ke situs web:

  • Plugin formulir kontak seperti Formulir Kontak 7 dapat diganti dengan Formspree, FormKeep atau Wufoo.
  • Untuk toko sederhana, WP eCommerce dapat diganti dengan Snipcart, Gumroad atau Stripe.
  • Alih-alih komentar WordPress dengan Akismet, Anda bisa menggunakan Disqus, Facebook Comments atau IntenseDebate.

Beberapa plugin WordPress dapat ditiru dengan core Jekyll. Berikut galeri foto menggunakan front matter dan 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>

Kita hanya perlu menambahkan JavaScript dan CSS kita sendiri untuk menyelesaikannya.

Plugin Jekyll dapat meniru fungsionalitas plugin WordPress lainnya. Ingatlah bahwa plugin Jekyll hanya berjalan saat situs web sedang dibuat — mereka tidak menambahkan fungsionalitas waktu nyata:

  • Alih-alih One Click XML Sitemap, gunakan Plugin Generator Peta Situs Jekyll.
  • Tag SEO Jekyll memberi Anda beberapa fungsi dari SEO Wizard.
  • Alih-alih WPLobus untuk situs web multibahasa, gunakan Plugin Bahasa Jekyll.

Kontrol Versi

Salah satu manfaat utama menggunakan generator situs statis seperti Jekyll adalah seluruh situs dan konten dapat hidup di Git. Pada tingkat dasar, Git memberi Anda riwayat semua perubahan di situs. Untuk tim, ini membuka semua jenis alur kerja dan proses persetujuan.

GitHub memiliki tutorial interaktif yang fantastis untuk pemula yang mempelajari Git.

Serah Terima Klien

Itu mencakup mur dan baut pembuatan situs web. Jika Anda penasaran untuk melihat bagaimana seluruh situs web Jekyll cocok, lihat template Justice. Ini adalah template gratis berlisensi MIT untuk Jekyll. Cuplikan di atas didasarkan pada template ini.

CMS WordPress dibangun ke dalam platform, jadi kita perlu menyiapkan akun untuk klien.

Dengan situs web Jekyll kami, kami akan menautkan repositori Git kami ke salah satu GUI Jekyll yang disebutkan sebelumnya. Salah satu hal yang menyenangkan tentang alur kerja ini adalah bahwa perubahan klien dilakukan kembali ke repositori. Sebagai pengembang, kami dapat terus menggunakan alur kerja lokal bahkan dengan non-pengembang memperbarui situs web.

Beberapa GUI Jekyll menawarkan hosting, sementara yang lain memiliki cara untuk menghasilkan ke ember Amazon S3 atau ke Halaman GitHub.

Ringkasan

Pada titik ini, situs web Jekyll kami aktif dan dapat diedit oleh klien. Jika kami perlu membuat perubahan apa pun pada situs web, kami cukup mendorong ke repositori dan itu akan secara otomatis menyebarkan langsung.

Situs Jekyll Pertama Anda

Sekarang giliran Anda. Banyak sumber daya tersedia untuk membantu Anda membangun situs web Jekyll pertama Anda:

  • Situs web resmi Jekyll adalah tempat yang tepat untuk memulai dengan dokumentasi mendalam tentang semua fitur Jekyll.
  • Jekyll.tips memiliki seri tutorial video yang mencakup topik inti Jekyll.
  • Lihat templat Jekyll di GitHub untuk melihat cara menggabungkannya: Frisco untuk situs web pemasaran, Cendekia untuk dokumentasi, dan Urban untuk agensi digital.

Jika Anda bermigrasi, Jekyll memiliki alat untuk mengimpor posting dari situs WordPress dan WordPress.com. Setelah mengimpor, Anda harus memigrasikan atau membuat tata letak, halaman, CSS, JavaScript, dan aset lain secara manual untuk situs web secara manual.

Membungkus

Keindahan Jekyll terletak pada kesederhanaannya. Meskipun WordPress dapat menandingi banyak fitur Jekyll, WordPress sering kali datang dengan biaya kerumitan melalui plugin atau infrastruktur tambahan.

Pada akhirnya, ini tentang menemukan alat yang paling cocok untuk Anda. Saya telah menemukan Jekyll sebagai cara yang cepat dan efisien untuk membangun situs web. Saya mendorong Anda untuk mencobanya dan memposting pengalaman Anda di komentar.