Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Membangun Situs Statis dengan Jekyll

by
Read Time:11 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

CMS lengkap tidak begitu diperlukan. Terkadang, Anda hanya perlu membuat situs web yang ringan dan statis … tetapi Anda hanya memiliki cukup halaman untuk membuat proses menyalin file template dan membuat markup antar-situs mengubah tugasnya. Hari ini, saya akan menunjukkan solusi sederhana—Jekyll—yang akan membuat pembuatan situs web kecil menjadi mudah.


Langkah 0: Bertemu Jekyll

Jekyll adalah generator situs sederhana, sadar blog, dan statis.

Jekyll adalah generator situs sederhana, sadar blog, dan statis. Itulah yang dikatakan situsnya. Tapi, apa sebenarnya artinya ini? Generator situs statis adalah program yang mengambil satu set file dan menghasilkan situs Anda dengan mereka. Seperti yang Anda lihat, kita akan dapat menggunakan satu set template, buat file konten secara terpisah, lalu gunakan Jekyll untuk membuat situs kita. Bagian "sadar blog" berarti bahwa kita dapat menggunakan ini untuk membuat blog, atau situs web apa pun yang memiliki serangkaian entri mirip posting (seperti portofolio). Mari kita coba!


Langkah 1: Menginstal Jekyll

Lihat di sini untuk informasi lebih lanjut tentang Gems Ruby.

Kita akan mulai dengan menginstal Jekyll; ini adalah gem Ruby, jadi melakukannya harus sangat mudah.

Yap: semudah itu. Ada beberapa bagian lagi yang dapat kita instal jika kita berencana untuk melakukan pengaturan yang lebih rumit, namun, karena kita tidak butuh, ini akan melakukan trik.


Langkah 2: Membuat Template Pertama Kita

Setiap file atau folder yang tidak dimulai dengan underscore akan disalin ke situs yang dihasilkan.

Selanjutnya, mari kita siapkan folder untuk Jekyll. Buat folder, yang disebut example-app untuk tutorial ini; kita akan membuat situs portofolio kecil untuk, katakanlah, seorang fotografer. Ini adalah contoh yang bagus tentang di mana Jekyll bersinar: ini adalah situs kecil yang tidak akan terlalu sering diperbarui, tetapi cukup besar hingga Anda tidak ingin membuka setiap halaman saat Anda perlu membuat perubahan markup.

Di dalam example-app, buat folder bernama _layouts. Perhatikan garis bawah pada awal folder ini: folder atau file apa pun yang dimulai dengan garis bawah tidak akan menjadi bagian dari situs yang dihasilkan Jekyll. Jika mereka memiliki nama yang dikenal Jekyll (seperti _config.yml atau _layouts), isinya akan digunakan dalam pembuatan situs, tetapi file itu sendiri tidak akan muncul di situs. Ingat ini: setiap file atau folder yang tidak dimulai dengan underscore akan disalin ke situs yang dihasilkan (yang, dengan cara, default ke sub-folder _site).

Jadi, mari membuat sebuah tata letak. Kita akan mulai dengan tata letak situs umum yang mencakup semua "chrome" untuk situs kita. Buat file baru, bernama default.html di dalam folder _layouts (nama itu tidak penting), dan tambahkan kode berikut ke dalamnya:

Beberapa hal di sini untuk diingat...

Pertama, Jekyll menggunakan sistem template Liquid (secara default). Ini berarti, apa pun yang dapat Anda lakukan dengan Liquid, dapat Anda lakukan dalam template di Jekyll. Misalnya, di tag <title>, kita menggunakan kedua jenis markup Liquid: markup output dan markup tag. Markup output dapat menghasilkan teks (jika ada rujukan variabel), sementara markup tag tidak. Markup output dibatasi oleh kurung kurawal ganda, sementara markup tag dipisahkan oleh sepasang tanda kurung kurawal/persen.

Hal berikutnya yang perlu diperhatikan di atas adalah apa yang ada di dalam tag Liquid: hal-hal seperti page.title dan content. Ini adalah variabel yang disediakan oleh Jekyll; Anda dapat melihat daftar data template yang tersedia di dokumentasinya. Kita juga dapat membuat data template kustom, karena kita akan meninjau sebentar lagi.

Terakhir, perhatikan CSS yang kita tautkan: buat folder css di root proyek Anda dan lemparkan sedikit gaya ini ke dalam file style.css:

Juga, buat folder img dan tambahkan gambar, bernama banner.jpg; kita akan segera menggunakannya. Setiap gambar akan dilakukan; potong saja hingga 960px kali 300px;.

Anda mungkin bertanya-tanya mengapa kita menggunakan pernyataan if di atas jika variabel page.title tidak akan ditampilkan jika ada? Nah, jika memang ada, saya ingin menyertakan bar vertikal setelahnya; cara lain untuk menulis itu akan menjadi seperti ini:

Jadi, bagaimana kita menggunakan template ini? Nah, kita perlu membuat halaman yang akan menggunakan template ini. Di direktori root proyek kita, buat file index.html. Berikut isinya:

Berikut ini isi file index.html kita. Perhatikan apa yang ada di bagian atas file: Jekyll menyebut ini materi depan YAML. File apa pun (yang tidak dimulai dengan underscore) yang memiliki materi depan YAML akan dibuat oleh Jekyll sebelum diletakkan di folder _site (jika tidak ada garis bawah atau YFM, maka hanya akan salinan _site). Dalam hal ini, materi depan YAML hanya memberitahu Jekyll template apa yang kita inginkan untuk digunakan.

Sekarang, buka terminal, cd ke direktori proyek Anda, dan jalankan jekyll. Anda akan melihat seperti ini:

Abaikan peringatan; kita akan segera melakukannya. Untuk saat ini, Anda dapat melihat bahwa situs tersebut telah dibangun di direktori _site yang baru dibuat. Jika Anda membuka file _site/index.html di browser pilihan Anda, Anda akan melihat … sebuah kegagalan. Masalahnya adalah bahwa path kita (url dan stylesheet) dimulai dengan garis miring ke depan. Ini berarti kita tidak bisa hanya melihatnya sebagai file, kita perlu melihatnya di server. Tentu, Anda bisa memulai W/MAMP, tetapi mengapa mengambil masalah? Jekyll memiliki server bawaan. Jadi, jalankan jekyll --server, dan pergi ke localhost:4000 untuk melihat sesuatu seperti gambar di bawah ini:

Tutorial ImageTutorial ImageTutorial Image

Jika gambar di atas tidak cukup, lihat kode dari _site/index.html. Anda akan melihat bahwa template yang kita cantumkan dicampur dengan konten yang kita sediakan dan—voila!—kita memiliki halaman kita.

Saya ingin mengingatkan Anda bahwa itu adalah materi depan YAML yang membuat keajaiban ini terjadi; jika file tidak dimulai dengan tiga tanda hubung, satu atau beberapa baris properti, dan baris lain dengan tiga tanda hubung, file tersebut hanya akan disalin ke folder _site, tidak ada pembuatan yang sedang berlangsung.


Langkah 3: Membuat Template Portofolio

Sekarang kita merasa nyaman dengan dasar-dasarnya, mari membuat portofolio untuk fotografer fiktif kita. Ingat bagaimana saya mencatat bahwa Jekyll adalah "sadar blog"? Kita akan menggunakan fitur kesadaran blog ini untuk keuntungan kita: alih-alih posting, kita akan memiliki entri portofolio.

Posting milik folder, disebut _posts, jadi buat itu sekarang. Pola nama file untuk posting harus spesifik juga: year-month-day-title.ext. Posting — baik, file apa pun di situs Jekyll Anda — dapat berupa Markdown atau HTML.

Jadi mari kita buat beberapa posting: ingat, ini benar-benar akan menjadi entri dalam portofolio kita:

_posts/2010-03-04-bikes.md

_posts/2010-10-01-wing.md

_posts/2011-06-05-bridge.md

_posts/2011-07-09-road.md

Sangat sederhana, ya? Perhatikan bagaimana kita membuat field materi depan YAML yang sesuai: image. Ini adalah URL ke gambar untuk entri itu. Tentu, kita bisa membangun seluruh entri HTML di sini di file ini, tetapi bagaimana jika kita ingin mengubahnya? Kita harus kembali dan mengubahnya di setiap entri. Dengan cara ini, kita malah dapat menggunakan template portfolio_entry kita untuk me-render-nya. Seperti apa tampilan template itu? Ini cukup sederhana juga:

_layouts/portfolio_entry.html

Jika Anda melihat halaman data template, Anda akan tahu bahwa setiap masalah depan kustom yang kita tambahkan akan tersedia di bawah page; jadi, di sini, kita dapat mengakses page.image. Kita juga menggunakan page.title dan content (semuanya setelah tiga garis putus-putus terakhir).

Saya harus menyebutkan di sini bahwa, sementara title postingan seharusnya tersedia di objek post, saya hanya bisa membuatnya berfungsi pada objek page. Apapun yang bekerja!

Selain itu, perhatikan bahwa kita memiliki template ini menggunakan tata letak default kita. Anda dapat menyarangkan template seperti itu, dan membuat pekerjaan Anda lebih mudah.

Ini memberi kita halaman entri (posting) kita, tetapi bagaimana dengan halaman portofolio utama? Saat menulis navigasi kita di tata letak default kita, saya mencatat bahwa kita menginginkannya sebagai /portfolio/. Jadi, buat folder, yang disebut portfolio di direktori root, dan buka file index.html di dalamnya.

Ini adalah bagian paling rumit kita. Ingat, ini bukan template: ini adalah file "normal", tetapi masih bisa menyertakan tag Liquid. Kita mulai dengan menetapkan layout ke default, dan title ke "Portfolio."

Perhatikan bahwa, dalam HTML, kita memiliki perulangan for-in Liquid. Kita mengambil semua posting dengan sites.posts; kemudian, kita melakukan perulangan posting-posting tersebut for post in site.posts / endfor. Jika Anda telah bekerja dengan WordPress, atau sistem blog lainnya, Anda harus terbiasa dengan konsep loop. Hanya itu saja! Di dalam, seperti yang Anda lihat, kita bisa mendapatkan properti standar, serta materi depan yang kita definisikan (seperti image).

Sekarang jika kita menjalankan jekyll --server untuk menghasilkan kembali situs dan memulai server, localhost:4000/portfolio/ harus menunjukkan ini:

Tutorial ImageTutorial ImageTutorial Image

Dan inilah halaman entri:

Tutorial ImageTutorial ImageTutorial Image

Hebat! Anda telah membuat sebuah portofolio. Saya yakin Anda juga melihat, bagaimana ini berfungsi untuk sebuah blog. Sekarang mari kita lihat beberapa opsi konfigurasi untuk Jekyll.


Langkah 4: Menulis File Config

Ada banyak opsi untuk Jekyll. Sangat bagus bahwa semuanya memiliki default yang benar-benar masuk akal, tetapi jika Anda ingin mengubahnya, itu tidak sulit sama sekali.

Ada dua cara untuk mengatur opsi.

  • Pertama, ketika Anda menjalankan program pada baris perintah, Anda dapat melewatkan parameter-parameter. Kita telah melihat parameter --server, yang memulai server setelah membuat situs.
  • Cara yang berbeda, dan cara yang akan kita gunakan di sini, ada dalam file konfigurasi, yang disebut _config.yml; ini adalah file YAML, jadi setiap baris adalah pasangan key: value, seperti pada materi depan YAML. Jekyll akan mencari file ini sebelum membuat situs.

Jadi, buat file _config.yml, dan mari lihat beberapa opsi yang paling umum.

Untuk daftar lengkap opsi, tinjau dokumentasi konfigurasi.

  • auto: Menambahkan auto: true ke file konfigurasi Anda akan membuat Jekyll tetap berjalan, mengawasi folder proyek Anda untuk perubahan dan meregenerasi situs dengan cepat.
  • source: Jika file sumber Anda berada di direktori yang berbeda dari yang Anda jalankan dari Jekyll, Anda sebaiknya menetapkan direktori tersebut dengan properti source.
  • destination: Secara default, tujuan untuk situs yang Anda hasilkan adalah ./_site. Jika Anda menginginkan sesuatu yang berbeda, tetapkan di sini.
  • permalink: Permalink adalah path menuju posting Anda. Secara default, itu adalah /year/month/day/title.html. Namun, Anda dapat menyesuaikannya jika Anda mau. Antara lain, Anda dapat menggunakan variabel :year, :month, :day, :title, dan :categories. :categories berasal dari materi depan; semua yang lain berasal dari nama file posting. Kemudian, Anda dapat mengatur permalink ke hal-hal seperti /:year/:month/:title/ atau /:categories/:title.html. Tip bonus: jika Anda memiliki properti permalink dalam materi depan posting, itu akan menggantikan default di seluruh situs.
  • exclude: Seperti yang saya katakan di atas, Jekyll tidak akan menghasilkan file dalam direktori yang dimulai dengan garis bawah. Namun, jika Anda memiliki folder yang Anda ingin mengabaikannya, tetapi itu tidak dimulai dengan garis bawah, Anda dapat melakukannya dengan exclude di file konfigurasi Anda.

Langkah 5: Menerapkan Situs

Jadi, katakanlah Anda telah membuat situs tersebut, dan ingin menyetelnya gratis, di world wide web. Bagaimana Anda melakukannya?

Ada beberapa cara untuk mencapai ini. Tentu saja, jika itu adalah situs kecil yang tidak akan sering Anda perbarui, maka cukup FTP ke server Anda; ini mungkin satu-satunya pilihan Anda, jika Anda menggunakan shared hosting.

Jika Anda memiliki VPS atau penyiapan dedicated hosting, Anda dapat berjalan lebih otomatis. Lihat dokumentasi penerapan untuk daftar ide bagus. Jika Anda tidak yakin apa yang harus dilakukan, coba ikuti petunjuk untuk menggunakan kaitan post-receive git; saya sudah mencobanya, dan itu sangat keren.


Langkah 6: Mengambilnya Lebih Jauh

Ini hanyalah puncak dari Jekyll.

  • Ada arsitektur plugin yang memungkinkan Anda mengubah cara konten Anda dibuat.
  • Ada lagi yang dapat Anda lakukan dengan Liquid dan beberapa ekstensi Liquid yang ditambahkan Jekyll.
  • Ada banyak data template yang tidak kami bicarakan. Periksa dan lihat apa yang bisa Anda lakukan!

Kesimpulan

Nah, itu adalah pengantar Anda untuk Jekyll - generator situs statis sederhana, sadar blog. Kali berikutnya Anda membangun situs portofolio mikro, kartu bisnis, situs micro-portfolio, apakah Anda akan mencoba Jekyll? Beri tahu saya di komentar dan terima kasih banyak telah membaca!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.