Ikhtisar Generator Situs Statis Populer

Semua generator halaman statis memiliki satu tugas yang tampaknya mudah: menghasilkan file HTML statis dan semua asetnya.

Ada banyak manfaat nyata untuk menyajikan file HTML statis, seperti caching yang lebih mudah, waktu muat yang lebih cepat, dan lingkungan yang lebih aman secara keseluruhan. Setiap generator halaman statis menghasilkan output HTML secara berbeda.

Namun, tujuan dari posting ini bukan untuk menyelami dan mendiskusikan seluk-beluk mekanisme mereka, tetapi untuk membandingkan kumpulan fitur yang ditawarkan setiap kerangka kerja dan menyoroti aspek dan fitur unik dari setiap kerangka kerja.

Ikhtisar Kerangka Halaman Statis Populer

Dalam posting ini, kita akan melihat lebih dekat kerangka halaman statis berikut: Jekyll , Middleman , Hugo , dan Hexo . Ini bukan satu-satunya generator di luar sana, tetapi mereka adalah yang paling umum digunakan, didukung oleh komunitas besar dan banyak sumber daya yang berguna.

Mari kita lihat lebih dekat masing-masing dan bandingkan fitur dasarnya:

• Jekyll
  • ditulis dalam Ruby,
  • mendukung mesin template Liquid di luar kotak;
• Perantara
  • ditulis dalam Ruby,
  • mendukung mesin template ERB dan Haml di luar kotak;
• Hugo
  • ditulis dalam Go,
  • mendukung mesin template Go di luar kotak;
• hexo
  • ditulis dalam JavaScript,
  • mendukung EJS dan Pug di luar kotak.

Catatan: Perlu ditunjukkan bahwa masing-masing generator halaman statis ini dapat disesuaikan dan diperluas menggunakan plugin dan ekstensi, memungkinkan Anda untuk memenuhi sebagian besar atau semua kebutuhan Anda.

Menyiapkan Generator Situs Statis

Dokumentasi untuk masing-masing kerangka kerja ini komprehensif dan sangat bagus dan Anda dapat mengambilnya di sini:

Dokumentasi Jekyll

Dokumentasi perantara

dokumentasi Hugo

dokumentasi hexo

Jika Anda cukup mengikuti panduan penginstalan, Anda akan memiliki lingkungan pengembangan yang siap dalam hitungan menit. Setelah terinstal, Anda dapat memulai proyek baru dengan menjalankan perintah dari terminal.

Misalnya, ini adalah cara Anda memulai proyek baru dalam kerangka kerja yang berbeda:

Jekyll

jekyll new my_website

Perantara

middleman init my_website

Hugo

hugo new my_website

hexo

hexo init my_website

Konfigurasi

Konfigurasi biasanya disimpan dalam satu file. Setiap generator situs web statis memiliki spesifikasinya sendiri, tetapi banyak pengaturan yang sama di keempatnya.

Anda dapat menentukan di mana file sumber disimpan atau di mana akan menghasilkan sumber yang dibangun. Itu selalu berguna untuk melewatkan data yang tidak akan digunakan dalam proses pembuatan dengan menyetel opsi mengecualikan atau skip_render . Anda juga dapat menggunakan file konfigurasi untuk menyimpan pengaturan global seperti judul proyek atau pembuatnya.

Bermigrasi ke Generator Statis

Jika Anda sudah memiliki proyek Wordpress yang siap digunakan, Anda dapat memigrasikannya ke generator halaman statis dengan relatif mudah.

Untuk Jekyll, Anda bisa menggunakan plugin Jekyll Exporter. Untuk Middleman, Anda dapat menggunakan alat baris perintah yang disebut wp2middleman. Anda dapat menggunakan Wordpress ke Hugo Exporter untuk migrasi Hugo, dan untuk Hexo, Anda dapat membaca panduan kami tentang cara bermigrasi dari Wordpress ke Hexo yang saya tulis tahun lalu.

Prinsipnya hampir identik dan cukup mudah — pertama-tama ekspor semua konten ke format yang sesuai, lalu masukkan ke dalam folder yang tepat.

Isi

Generator halaman statis menggunakan penurunan harga untuk konten utama. Penurunan harga sangat kuat dan seseorang dapat mempelajarinya dengan cepat. Menulis konten di Markdown terasa alami karena sintaksnya yang sederhana. Dokumen terlihat bersih dan teratur.

Anda harus menempatkan artikel dalam folder yang ditentukan dalam file konfigurasi global. Nama artikel harus mengikuti konvensi yang ditentukan oleh generator.

Di Jekyll, Anda harus menempatkan artikel di direktori _posts . Nama artikel harus memiliki format berikut: YEAR-MONTH-DAY-title.MARKUP. Generator lain memiliki aturan serupa, dan mereka memberikan perintah untuk membuat artikel baru.

Berikut adalah perintah untuk membuat artikel baru di Middleman, Hugo, dan Hexo:

Perantara

middleman article my_article

Hugo

hugo new posts/my_article.md

hexo

hexo new post my_article

Di Markdown, Anda terbatas pada kumpulan sintaks tertentu. Beruntung bagi kami, semua generator juga dapat memproses HTML mentah. Misalnya, jika Anda ingin menambahkan jangkar dengan kelas tertentu, Anda bisa menambahkannya seperti yang Anda lakukan di file HTML biasa:

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

Bagian Depan

Materi depan adalah blok data di atas file penurunan harga. Anda dapat mengatur variabel khusus untuk menyimpan data yang Anda butuhkan untuk membuat konten yang lebih baik. Alih-alih menulis HTML dalam penurunan harga, yang dapat menyebabkan struktur dokumen yang berantakan dan jelek, Anda dapat mendefinisikan variabel di bagian depan.

Misalnya, ini adalah bagaimana Anda dapat menambahkan tag ke artikel Anda.

 tags: - web - dev - featured

Template di Generator Halaman Statis

Generator halaman statis menggunakan bahasa templating untuk memproses templat. Untuk memasukkan data ke dalam template, Anda perlu menggunakan tag. Misalnya, untuk menampilkan judul halaman di Jekyll, Anda dapat menulis:

{{ page.title }}

Coba kita tampilkan daftar tag dari materi depan di postingan kita di Jekyll. Anda perlu memeriksa apakah variabel tersedia. Kemudian, Anda perlu mengulang tag dan menampilkannya dalam daftar yang tidak berurutan.

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

Perantara:

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

Hugo:

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

Hekso:

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

Catatan: Ini adalah praktik yang baik untuk memeriksa apakah ada variabel untuk mencegah proses pembangunan gagal. Ini bisa menghemat waktu Anda untuk debugging dan pengujian.

Menggunakan Variabel

Sebuah generator halaman statis menyediakan variabel global yang tersedia untuk menyerahkan template. Tipe variabel yang berbeda menyimpan informasi yang berbeda. Misalnya, situs variabel global di Hexo menyimpan informasi tentang posting, halaman, kategori, dan tag situs.

Mengetahui variabel yang tersedia dan cara menggunakannya dapat membuat hidup pengembang lebih mudah. Hugo menggunakan perpustakaan templat Go untuk templating. Bekerja dengan variabel di Hugo bisa menjadi masalah jika Anda tidak terbiasa dengan konteksnya, atau "titik" bagaimana mereka menyebutnya.

Perantara tidak memiliki variabel global. Namun, Anda dapat mengaktifkan ekstensi perantara-blog yang memungkinkan Anda mengakses beberapa variabel, seperti daftar artikel. Jika Anda ingin menambahkan variabel global, Anda bisa melakukannya dengan mengekstrak data ke file data.

File Data

Saat Anda ingin menyimpan data yang tidak tersedia di file Markdown, Anda harus menggunakan file data. Misalnya, jika Anda perlu menyimpan daftar tautan sosial yang ingin Anda tampilkan di footer situs Anda. Semua generator halaman statis mendukung file YAML dan JSON. Selain itu, Jekyll mendukung file CSV, dan Hugo mendukung file TOML.

Mari kita simpan tautan sosial itu di file data kita. Karena semua generator mendukung format YAML, mari simpan datanya di file 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 menyimpan file data di direktori _data secara default. Middleman dan Hugo menggunakan direktori data, dan Hexo menggunakan source/_data directory .

Untuk menampilkan data, Anda dapat menggunakan kode berikut:

Jekyll

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

Perantara

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

hexo

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

pembantu

Template sering kali mendukung pemfilteran data. Misalnya, jika Anda ingin membuat judul menjadi huruf besar, Anda bisa melakukannya seperti ini:

{{ page.title | upcase }}

Middleman memiliki sintaks yang serupa:

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

Hugo menggunakan perintah berikut:

{{ .Title | upper }}

Hexo memiliki sintaks yang berbeda, tetapi hasilnya sama.

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

Bagaimana Generator Halaman Statis Menangani Aset

Manajemen aset ditangani secara berbeda di seluruh pembuat halaman statis. Jekyll mengkompilasi file aset di mana pun mereka ditempatkan. Perantara hanya menangani aset yang disimpan di folder sumber. Lokasi default untuk aset di Hugo adalah direktori aset. Hexo menyarankan untuk menempatkan aset di direktori sumber global.

KELANCANGAN

Jekyll mendukung Sass di luar kotak, tetapi Anda harus mengikuti beberapa aturan. Middleman juga mendukung Sass di luar kotak. Hugo mengkompilasi Sass melalui Hugo Pipes untuk Sass. Hexo melakukannya melalui plugin.

ES6

Jika Anda ingin menggunakan fitur JavaScript modern dari es6, maka Anda harus menginstal plugin. Mungkin ada lebih dari satu versi plugin serupa, jadi Anda mungkin ingin memeriksa kode atau melihat masalah terbuka atau komitmen terbaru untuk menemukan yang terbaik.

Gambar-gambar

Pengoptimalan gambar juga tidak didukung secara default. Juga, seperti plugin es6, ada lebih dari satu plugin untuk mengoptimalkan gambar. Kerjakan pekerjaan rumah Anda dan coba temukan plugin terbaik untuk pekerjaan itu. Atau, Anda dapat menggunakan solusi pihak ketiga. Di blog saya yang dibangun dengan Hexo, saya menggunakan paket gratis Cloudinary. Saya mengembangkan tag cloudinary, dan saya menyediakan gambar yang responsif dan dioptimalkan melalui transformasi Cloudinary.

Plugin, Ekstensi

Generator halaman statis memiliki pustaka yang kuat yang memungkinkan Anda menyesuaikan situs web Anda. Setiap plugin memiliki tujuan yang berbeda. Anda dapat menemukan berbagai macam plugin, dari LiveReload untuk lingkungan pengembangan yang lebih baik hingga menghasilkan Peta Situs atau umpan RSS.

Anda dapat menulis plugin atau ekstensi baru. Sebelum Anda melakukannya, periksa apakah ada plugin serupa. Lihat daftar plugin Jekyll, ekstensi Middleman, dan plugin Hexo. Hugo tidak memiliki plugin atau ekstensi. Namun, itu mendukung kode pendek khusus.

Kode pendek dalam penurunan harga

Kode pendek adalah cuplikan kode yang dapat Anda tempatkan di dokumen Penurunan harga. Cuplikan tersebut menghasilkan kode HTML. Hugo dan Hexo mendukung kode pendek. Ada kode pendek bawaan, seperti gambar di Hugo:

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

Kode pendek youtube Hexo:

{% youtube video_id %}

Jika Anda tidak dapat menemukan kode pendek yang tepat, Anda dapat membuat yang baru. Misalnya, Hexo tidak mendukung penyematan CanIUse, dan saya mengembangkan tag baru yang mendukung penyematan CanIUse. Jangan lupa untuk mempublikasikan plugin Anda di npm atau situs generator resmi. Masyarakat akan berterima kasih jika Anda melakukannya.

CMS

Generator halaman statis bisa menjadi overhead untuk orang non-teknis. Mempelajari cara menggunakan perintah atau penurunan harga bukanlah sesuatu yang mudah bagi semua orang. Dalam hal ini, pengguna dapat memanfaatkan Sistem Manajemen Konten untuk situs JAMstack. Dalam daftar ini, Anda dapat menemukan sistem yang paling sesuai dengan kebutuhan Anda. Ketahuilah bahwa perlu beberapa waktu untuk mengonfigurasi CMS, tetapi dalam jangka panjang Anda dan pengguna lain dapat memperoleh manfaat dari memublikasikan konten secara lebih efisien.

Bonus: Template JAMstack

Jika Anda tidak ingin menghabiskan terlalu banyak waktu untuk mengonfigurasi proyek Anda, Anda dapat memanfaatkan templat JAMstack. Beberapa template ini sudah dikonfigurasikan sebelumnya dengan CMS yang dapat menghemat banyak waktu Anda.

Anda juga bisa belajar banyak dengan memeriksa kodenya. Coba pasang template, bandingkan dengan yang lain dan pilih yang terbaik untuk Anda.

Membungkus

Generator halaman statis adalah cara cepat dan andal untuk membangun situs web. Anda bahkan dapat membangun situs web non-sepele dan sangat disesuaikan dengan generator saat ini.

Misalnya, Majalah Smashing pindah ke JAMstack tahun lalu, dan mereka berhasil mempercepat situs mereka secara signifikan. Ada contoh sukses lain dari situs web statis dan semuanya memiliki prinsip yang sama — untuk menghasilkan sumber daya statis dan mengirimkannya melalui Jaringan Pengiriman Konten untuk pemuatan yang lebih cepat dan pengalaman pengguna yang unggul.

Masih banyak lagi yang dapat Anda lakukan dengan situs web statis Anda: mulai dari menggunakan Wordpress REST API sebagai backend hingga menggunakan fungsi Lambda. Ada solusi luar biasa bahkan untuk situs web sederhana, seperti menggunakan HTTPS di luar kotak atau menangani pengiriman formulir.

Saya harap ikhtisar kerangka halaman statis ini membantu Anda menyadari potensinya dan mempertimbangkan untuk menggunakannya saat Anda memikirkan proyek baru di lain waktu.