Tutorial Jekyll: Cara Membuat Website Statis

Di era digital saat ini, memiliki situs web sangat penting untuk membangun keberadaan online, mempromosikan merek Anda, dan menjangkau calon pelanggan. Namun, membuat situs web bisa menjadi tugas yang menakutkan.

Di sinilah generator situs statis (SSG) berperan — SSG mempermudah pembuatan situs web yang indah dan memuat cepat tanpa memerlukan sistem backend atau database yang rumit.

Pada artikel ini, Anda akan diperkenalkan ke salah satu SSG populer — Jekyll, pelajari cara kerjanya, dan bagaimana Anda dapat membuat situs web statis dengannya.

Ini adalah demo langsung dari situs blog yang akan Anda buat dengan Jekyll.

Anda dapat mengakses repositori GitHub proyek jika ingin melihat lebih dekat.

Apa itu Jekyll?

Jekyll adalah SSG sumber terbuka gratis yang dibangun dan dijalankan pada bahasa pemrograman Ruby. Anda tidak perlu memahami cara kerja Ruby untuk menggunakan Jekyll; Anda hanya perlu menginstal Ruby di mesin Anda.

Jekyll dapat digunakan untuk membangun berbagai jenis situs statis seperti blog pribadi, situs web portofolio, dan situs web dokumentasi tanpa memerlukan database atau menggunakan sistem manajemen konten seperti WordPress.

Inilah yang membuat Jekyll menonjol di antara SSG:

1. Mudah digunakan : Jekyll menggunakan file teks biasa dan sintaks markdown untuk membuat dan mengelola konten, yang berarti Anda tidak perlu memiliki pengetahuan tentang HTML atau CSS untuk memulai.
2. Cepat dan aman: Jekyll tidak menangani database atau skrip sisi server apa pun, yang berarti risiko kerentanan dan serangan lebih kecil. Ini menghasilkan file HTML statis yang membuat situs web Anda sangat cepat dan aman.
3. Dapat disesuaikan: Jekyll sangat dapat disesuaikan, memungkinkan Anda menggunakan tata letak dan templat atau bahkan membuat plugin untuk memperluas fungsionalitas.
4. Mudah diterapkan : Jekyll menghasilkan file HTML statis yang dapat diterapkan ke server web atau penyedia hosting tanpa memerlukan sistem manajemen konten dinamis.
5. Didukung oleh komunitas besar: Jekyll memiliki komunitas pengguna dan pengembang yang besar, yang berarti banyak sumber daya tersedia jika Anda membutuhkan bantuan atau ingin memperluas fungsionalitas situs Anda.

Cara Memasang Jekyll

Pertama-tama Anda harus menginstal Ruby di mesin Anda sebelum Anda dapat melanjutkan untuk menginstal Jekyll seperti yang dinyatakan dalam dokumentasi Jekyll.

Cara Memasang Jekyll di macOS

Secara default, Ruby sudah diinstal sebelumnya dengan macOS, tetapi Anda tidak disarankan menggunakan versi Ruby seperti itu untuk menginstal Jekyll karena sudah tua. Misalnya, pada Ventura, sistem operasi terbaru Apple, versi Ruby yang telah diinstal sebelumnya adalah 2.6.10, di mana versi terbarunya adalah 3.1.3 (pada saat artikel ini ditulis).

Untuk memperbaikinya, Anda harus menginstal Ruby dengan benar menggunakan pengelola versi seperti chruby. Anda harus menginstal Homebrew di Mac Anda terlebih dahulu menggunakan perintah di bawah ini di terminal Anda:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Setelah instalasi berhasil, keluar dan mulai ulang Terminal, lalu periksa apakah Homebrew siap digunakan dengan menjalankan perintah ini:

 brew doctor

Jika Anda mendapatkan " Sistem Anda siap diseduh" , Anda sekarang dapat melanjutkan untuk menginstal chruby dan menginstal-ruby dengan perintah di bawah ini:

 brew install chruby ruby-install

Anda sekarang dapat menginstal versi terbaru Ruby yaitu 3.1.3 menggunakan paket ruby-install ​​yang baru saja Anda instal:

 ruby-install 3.1.3

Ini akan memakan waktu beberapa menit. Setelah berhasil, konfigurasikan shell Anda untuk menggunakan chruby secara otomatis dengan perintah di bawah ini:

 echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc echo "chruby ruby-3.1.3" >> ~/.zshrc

Anda sekarang dapat keluar dan meluncurkan kembali terminal Anda, lalu periksa apakah semuanya berfungsi dengan menjalankan perintah ini:

 ruby -v

Seharusnya tertulis ruby ​​3.1.3 .

Anda sekarang telah menginstal versi terbaru Ruby di mesin Anda. Anda sekarang dapat melanjutkan untuk menginstal Jekyll dan bundler gem terbaru:

 gem install jekyll bundler

Cara Install Jekyll di Windows

Untuk menginstal Ruby dan Jekyll di mesin Windows, Anda akan menggunakan RubyInstaller. Ini dapat dilakukan dengan mendownload dan menginstal versi Ruby+Devkit dari RubyInstaller Downloads dan menggunakan opsi default untuk instalasi.

Pada tahap terakhir wizard penginstalan, jalankan langkah ridk install — yang digunakan untuk menginstal permata. Baca lebih lanjut melalui Dokumentasi RubyInstaller.

Dari opsi, pilih rantai alat pengembangan MSYS2 dan MINGW. Buka jendela prompt perintah baru dan instal Jekyll dan Bundler menggunakan perintah di bawah ini:

 gem install jekyll bundler

Cara Memverifikasi Bahwa Jekyll Terinstal dengan Benar

Untuk memverifikasi bahwa Jekyll diinstal dengan benar di mesin Anda, buka terminal Anda dan jalankan perintah berikut:

 jekyll -v

Jika Anda melihat nomor versi, itu berarti Jekyll telah terinstal dan bekerja dengan benar di sistem Anda. Anda sekarang siap menggunakan Jekyll!

Perintah dan Konfigurasi Jekyll

Sebelum kita mulai membuat dan menyesuaikan situs statis dengan Jekyll, ada baiknya untuk membiasakan diri dengan berbagai perintah CLI dan parameter file konfigurasinya.

Perintah Jekyll CLI

Berikut adalah beberapa perintah Jekyll CLI yang populer. Anda tidak perlu menghafalnya, tetapi ketahuilah bahwa itu ada, dan jangan ragu untuk memeriksa kembali apa yang dilakukan salah satu dari mereka saat Anda mengetahui penggunaannya nanti di artikel ini.

• jekyll build : Menghasilkan situs statis di direktori _site .
• jekyll serve : Membangun situs dan memulai server web di mesin lokal Anda, memungkinkan Anda untuk mempratinjau situs di browser Anda di http://localhost:4000.
• jekyll new [site name] : Membuat situs Jekyll baru di direktori baru dengan nama situs yang ditentukan.
• jekyll doctor : Mengeluarkan masalah konfigurasi atau ketergantungan apa pun yang mungkin ada.
• jekyll clean : Menghapus direktori _site , tempat file situs yang dihasilkan disimpan.
• jekyll help : Menampilkan dokumentasi bantuan untuk Jekyll.
• jekyll serve --draft : Menghasilkan dan melayani situs Jekyll Anda, termasuk setiap posting yang ada di direktori _drafts .

Anda juga dapat menambahkan beberapa opsi ke perintah ini. Lihat daftar lengkap perintah dan opsi Jekyll di dokumentasi Jekyll.

File Konfigurasi Jekyll

File konfigurasi Jekyll adalah file YAML bernama _config.yml yang berisi pengaturan dan opsi untuk situs Jekyll Anda. Ini digunakan untuk mengonfigurasi berbagai aspek situs Anda, termasuk judul situs, deskripsi, URL, dan pengaturan lainnya.

Berikut adalah beberapa opsi konfigurasi yang paling umum digunakan:

• title: Judul situs Anda.
• deskripsi: Deskripsi singkat tentang situs Anda.
• url: URL dasar situs Anda.
• baseurl: Subdirektori situs Anda, jika dihosting di subdirektori domain.
• permalink: Struktur URL untuk posting dan halaman Anda.
• kecualikan: Daftar file atau direktori untuk dikecualikan dari proses pembuatan situs.
• termasuk: Daftar file atau direktori untuk disertakan dalam proses pembuatan situs.
• paginasi: Jumlah postingan yang akan ditampilkan per halaman saat menggunakan paginasi.
• plugins: Daftar plugin Jekyll untuk dimuat.
• theme: Secara default, ini disetel ke minima . Anda dapat menggunakan tema lain dengan menyetel namanya dan mengimplementasikan setelan lain yang akan kita pelajari nanti di artikel ini.

Anda juga dapat membuat variabel khusus di file konfigurasi dan menggunakannya di templat, tata letak, dan penyertaan situs Anda. Misalnya, Anda dapat membuat variabel bernama author_name dan kemudian menggunakannya di template Anda seperti ini: {{ site.author_name }} .

Untuk memodifikasi file konfigurasi Jekyll Anda, buka file _config.yml di direktori proyek Jekyll Anda di editor teks dan buat perubahan.

Catatan: Setiap perubahan yang Anda lakukan pada file konfigurasi akan berlaku saat berikutnya Anda membuat situs dengan jekyll build atau jekyll serve .

Bagaimana Anda Membuat Situs Web Statis di Jekyll?

Sekarang setelah Anda menginstal Jekyll di mesin Anda, sekarang dimungkinkan untuk membuat situs web statis Jekyll dengan satu perintah dalam beberapa detik. Buka terminal Anda dan jalankan perintah ini:

 jekyll new joels-blog

Pastikan Anda mengganti "joels-blog" dengan nama situs pilihan Anda.

Selanjutnya, navigasikan ke folder situs web. Anda akan melihat struktur situs Jekyll dasar yang menyertakan direktori dan file seperti ini:

 ├── _config.yml ├── _posts ├── Gemfile ├── Gemfile.lock ├── index.md └── README.md

Inilah gunanya masing-masing direktori dan file ini:

• _config.yml: File konfigurasi Jekyll yang berisi pengaturan dan opsi situs Anda.
• _posts: Direktori yang berisi konten situs Anda (bisa berupa posting blog). Ini bisa berupa file Markdown atau HTML dengan konvensi penamaan file tertentu: YEAR-MONTH-DAY-title.MARKUP .
• Gemfile dan Gemfile.lock: Bundler menggunakan file-file ini untuk mengelola permata Ruby yang diandalkan oleh situs Anda.
• index.md: Beranda default untuk situs Anda, dihasilkan dari file Markdown atau HTML.

Namun ada lebih banyak file/folder yang dapat digunakan untuk mengkustomisasi website Jekyll Anda. Folder-folder ini meliputi:

• _includes: Direktori yang berisi cuplikan HTML yang dapat digunakan kembali yang dapat disertakan dalam tata letak dan halaman Anda. Seperti navbar, footer, dll
• _layouts: Direktori yang berisi template tata letak HTML yang menentukan struktur halaman Anda.
• aset: Direktori yang berisi file apa pun yang digunakan oleh situs Anda, seperti gambar dan file CSS.
• _sass: Direktori yang berisi file Sass yang dapat digunakan untuk menghasilkan CSS untuk situs Anda.

Struktur file ini memberikan dasar yang kuat untuk proyek Jekyll, tetapi Anda dapat memodifikasinya sesuai kebutuhan untuk memenuhi kebutuhan khusus proyek Anda.

Opsi Mulai Cepat: Gunakan Template GitHub Kami

Sebagai alternatif untuk memulai proyek Anda menggunakan Jekyll CLI, Anda dapat membuat repositori Git menggunakan template Jekyll “Hello World” Kinsta di GitHub. Pilih Gunakan templat ini > Buat repositori baru untuk menyalin kode awal ke dalam repositori baru dalam akun GitHub Anda sendiri.

Cara Melihat Pratinjau Situs Jekyll

Anda sekarang memiliki situs Jekyll, tetapi bagaimana Anda dapat melihat pratinjau situs web untuk melihat seperti apa tampilannya sebelum Anda mungkin mulai menyesuaikannya dengan kebutuhan Anda? Buka terminal Anda dan pindah ke direktori proyek Anda, lalu jalankan perintah berikut:

 jekyll serve

Ini akan menghasilkan folder _site yang menyertakan semua file statis yang dihasilkan dari proyek Anda. Ini juga akan memulai server Jekyll, dan Anda dapat mempratinjau situs Anda melalui http://localhost:4000 .

Jika Anda mengunjungi URL di browser web Anda, Anda akan melihat situs Jekyll Anda dengan tema minima:

Cara Menyesuaikan Situs Jekyll

Saat Anda membuat situs dengan Jekyll dan menggunakan tema, Anda dapat mengkustomisasi situs agar sesuai dengan kebutuhan Anda. Misalnya, Anda mungkin ingin menambahkan halaman baru, mengubah tata letak halaman, atau menyesuaikan tampilan beberapa item. Semua ini dimungkinkan dengan Jekyll.

Bagaimana Front Matter Bekerja di Jekyll

Ketika Anda membuka setiap halaman atau posting blog dari folder proyek Anda, Anda akan melihat blok informasi dalam tiga garis (-) di bagian atas halaman. Ini disebut sebagai materi depan .

Ini adalah format metadata yang digunakan di Jekyll, untuk menyimpan informasi tentang halaman atau postingan — dapat ditulis dalam YAML atau JSON.

 --- title: "Welcome to Jekyll!" description: "Introduction to what Jekyll is about and how it works" date: 2023-03-07 16:54:37 +0100 ---

Pada contoh di atas, front matter menyertakan variabel, seperti judul postingan, deskripsi, dan tanggal. Variabel-variabel ini dapat digunakan di halaman atau tata letak atau konten posting.

Jekyll mengurai masalah depan dan menggunakannya untuk menghasilkan HTML keluaran untuk situs Anda. Anda dapat menggunakan materi depan untuk menentukan berbagai opsi, seperti tata letak, permalink, status yang diterbitkan, dll.

Cara Mengkonfigurasi Default Front Matter

Anda juga dapat mengonfigurasi materi depan default, jadi Anda tidak perlu menentukan materi depan yang sama untuk file serupa. Misalnya, jika setiap posting blog menggunakan nama penulis dan tata letak yang sama. Anda dapat menentukan masalah depan khusus di file _config.yml Anda untuk menayangkan semua posting blog Anda.

Cara menyusunnya agak sedikit rumit, tetapi seperti inilah tampilannya. Rekatkan ini di bawah konfigurasi terakhir di file _config.yml Anda:

 defaults: - scope: path: "posts" # empty string means all files values: layout: "post" author: "John Doe"

Saat Anda sekarang menjalankan perintah jekyll serve , Anda akan melihat bahwa meskipun Anda tidak menentukan tata letak dan penulis pada setiap kiriman, Anda masih memiliki akses ke mereka di dalam file Anda.

Catatan: Saat Anda tidak menentukan jalur, semua file akan menggunakan nilai front matter yang ditentukan.

Membuat Halaman di Jekyll

Saat Anda membuat file di direktori root proyek Anda, itu dianggap sebagai halaman. Nama yang Anda berikan ke file paling sering digunakan di URL, jadi Anda akan menamai setiap file halaman dengan nama yang beresonansi dengan baik.

Misalnya, jika Anda ingin membuat halaman dengan URL https://example.com/about , buat file bernama about.htm l atau about.md . Ekstensi file menentukan bahasa markup yang akan digunakan untuk konten halaman (HTML atau Markdown).

Setelah Anda membuat file, tambahkan materi depan dan konten yang sesuai. Simpan file dan segarkan situs Jekyll Anda di browser. Halaman baru sekarang harus dapat diakses di URL yang sesuai dengan nama file.

Membuat Tata Letak di Jekyll

Anda dapat menggunakan Tata Letak untuk menentukan struktur dan desain halaman dan postingan situs Anda. Ini biasanya dilakukan terutama dengan kode HTML. Anda dapat menyertakan informasi header, footer, meta dengan metadata halaman.

Langkah pertama adalah membuat folder _layouts di direktori root proyek Anda. Kemudian buat file untuk setiap tata letak — file harus memiliki nama deskriptif yang mencerminkan tujuan tata letak. Misalnya, Anda dapat membuat file bernama page.htm l untuk menentukan tata letak halaman untuk semua halaman di situs Anda.

Sebaiknya tentukan keseluruhan struktur tata letak Anda dengan HTML atau bahasa markup lainnya.

Anda dapat menyertakan placeholder untuk setiap konten dinamis yang akan disisipkan ke dalam tata letak, seperti judul halaman, konten, dan metadata. Misalnya, Anda dapat membuat tata letak dasar yang menyertakan area header, footer, dan konten seperti ini:

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

Dalam contoh ini, placeholder {{ page.title }} dan {{ content }} akan diganti dengan judul dan konten sebenarnya dari halaman yang sedang dirender.

Pada titik ini, setiap halaman atau posting yang menggunakan page sebagai nilai tata letaknya di bagian depannya akan memiliki tata letak ini. Anda dapat membuat beberapa tata letak di dalam folder _layouts dan menata tata letak sesuka Anda. Anda juga bisa mengganti tata letak tema dengan menentukan tata letak dengan nama yang mirip.

Bagaimana _includes Folder Bekerja di Jekyll

Folder _includes berisi cuplikan kode yang dapat digunakan kembali yang dapat Anda sertakan di berbagai bagian situs web Anda. Misalnya, Anda dapat membuat file navbar.html di folder include dan menambahkannya ke file layout page.html menggunakan tag {% include %} .

 <!DOCTYPE html> <html> <head> <title>{{ page.title }} </title> </head> <body> <header>{% include navbar.html %} </header> <main>{{ content }} </main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

Saat pembuatan, Jekyll akan mengganti tag dengan konten navbar.html .

Folder _includes dapat berisi semua jenis file, seperti file HTML, Markdown, atau Liquid. Tujuan utamanya adalah menjaga kode Anda KERING (Jangan Ulangi Sendiri) dengan memungkinkan Anda menggunakan kembali kode di seluruh situs Anda.

Looping Through Posts di Jekyll

Anda mungkin ingin membuat halaman blog khusus untuk menampung semua posting blog Anda, ini berarti Anda ingin mengambil semua posting di situs Anda dan mengulanginya. Dengan Jekyll mudah dicapai dengan menggunakan tag {% for %} .

Semua posting di situs web Jekyll disimpan dalam variabel site.posts . Anda dapat mengulangi dan menggunakan variabel Liquid {{ post.title }} untuk menampilkan judul setiap posting dengan cara ini:

 {% for post in site.posts %} <h2>{{ post.title }}</h2> {% endfor %}

Anda juga dapat menggunakan variabel Liquid tambahan untuk menampilkan informasi lain tentang setiap kiriman, seperti tanggal atau penulis kiriman:

 {% for post in site.posts %} <h2>{{ post.title }}</h2> <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p> {% endfor %}

Perhatikan bahwa dalam contoh di atas, filter tanggal Liquid memformat tanggal setiap posting dalam format yang lebih mudah dibaca manusia.

Sekarang, Anda memiliki gagasan tentang beberapa pemformatan dasar yang dapat dilakukan pada situs Jekyll Anda. Tapi Anda mungkin tidak perlu menggunakan semua ini untuk membangun situs Jekyll dari awal karena Anda selalu bisa mencari tema yang memenuhi kebutuhan Anda dan menambahkannya ke situs Jekyll Anda.

Cara Menambahkan Tema ke Situs Jekyll

Ada berbagai tema yang mudah ditambahkan, tetapi bagusnya untuk setiap tema, selalu ada informasi yang jelas tentang cara memasangnya di file ReadMe di GitHub. Anda dapat memutuskan untuk mengkloning tema, atau jika itu adalah tema berbasis permata, prosesnya lebih mudah.

Untuk artikel ini, Anda akan memasang tema blog dan menyesuaikannya agar situs blog diterapkan ke Kinsta. Ini adalah tema berbasis gen dan Anda dapat mengakses kode sumber dan petunjuknya di GitHub.

Untuk menambahkan tema berbasis permata, buka Gemfile situs Anda dan tambahkan permata untuk tema yang ingin Anda gunakan. Tema yang akan kita gunakan adalah jekyll-theme-clean-blog . Anda dapat mengganti tema minima default di Gemfile:

 gem "jekyll-theme-clean-blog"

Jalankan perintah bundle install di direktori situs Anda untuk menginstal gem tema dan dependensinya.

Di file _config.yml situs Anda, tambahkan baris berikut untuk menentukan tema yang ingin Anda gunakan:

 theme: jekyll-theme-clean-blog

Pada titik ini, tema Anda siap digunakan.

Anda ingin menghapus semua tata letak di direktori _layouts untuk menghindarinya menggantikan tata letak tema.

Anda kemudian dapat menemukan nama tata letak untuk file Anda di dokumentasi tema. Misalnya, jika Anda menggunakan tema jekyll-theme-clean-blog , nama layout untuk file index.html adalah home , halaman lainnya adalah page , dan semua postingan adalah post .

Terakhir, jalankan jekyll serve untuk membangun dan menayangkan situs Anda menggunakan tema baru.

Itu dia! Situs Jekyll Anda sekarang seharusnya menggunakan tema berbasis permata baru yang Anda tambahkan. Anda dapat menyesuaikan tema lebih lanjut dengan mengubah tata letaknya di direktori _layouts situs Anda.

Sesuaikan Tema Jekyll

Anda sekarang telah menambahkan tema Anda ke situs Anda, tindakan selanjutnya adalah menyesuaikan situs untuk memenuhi kebutuhan Anda dan berfungsi sebagaimana mestinya. Misalnya, gambar untuk setiap halaman dan posting tidak ditampilkan melainkan menampilkan latar belakang abu-abu.

Anda dapat memperbaikinya dengan menambahkan opsi materi depan ke setiap halaman dan posting dengan menentukan jalur ke gambar yang ingin Anda gunakan. Di Jekyll, aset seperti gambar disimpan di folder aset . Di folder ini, Anda dapat memutuskan untuk membuat sub-folder untuk mengatur gambar Anda.

Anda sekarang dapat menambahkan opsi latar belakang ke blok materi depan dan jalur ke gambarnya. Misalnya, pada halaman about, ini adalah front matter:

 --- layout: page title: About description: This is the page description. permalink: /about/ background: '/assets/images/about-page.jpeg' ---

Lakukan ini untuk semua halaman dan posting dan halaman Anda akan terlihat seperti ini:

Kustomisasi lain yang dapat Anda lakukan adalah menyesuaikan opsi navbar. Misalnya, Anda mungkin tidak memerlukan halaman kontak, artinya Anda harus menghapus tautannya dari opsi navbar. Anda dapat melakukan ini dengan mempelajari kode sumber tema, memperhatikan file yang bertanggung jawab atas tautan nav, dan mereplikasi file tersebut persis di proyek Anda, menghapus opsi yang tidak Anda perlukan.

Tautan nav ada di file navbar.html folder _includes. Anda dapat membuat file ini, menempelkan kode dari kode sumber Anda, dan menghapus opsi kontak atau menambahkan opsi baru yang Anda inginkan.

Ketika Anda menyimpan proyek Anda, Anda akan melihat opsi nav akan disesuaikan:

Terakhir, satu penyesuaian terakhir adalah membuat halaman posting yang akan menampung semua posting blog Anda — yang berarti Anda akan mengulangi semua posting di halaman ini.

Buat file, posts.html dan rekatkan kode berikut:

 --- layout: page title: Blog description: Expand your knowledge and stay informed with our engaging blog posts. background: '/assets/images/blog-page.jpeg' --- {% for post in site.posts %} <article class="post-preview"> <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}"> <h2 class="post-title">{{ post.title }}</h2> {% if post.subtitle %} <h3 class="post-subtitle">{{ post.subtitle }}</h3> {% else %} <h3 class="post-subtitle"> {{ post.excerpt | strip_html | truncatewords: 15 }} </h3> {% endif %} </a> <p class="post-meta"> Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include read_time.html content=post.content %} </p> </article> <hr /> {% endfor %}

Jangan ragu untuk menyesuaikan gambar latar belakang untuk mencerminkan gambar yang Anda simpan. Pada kode di atas, Anda mengulang semua postingan untuk menampilkan semua postingan di halaman ini. Seperti inilah tampilan halaman postingan saat disimpan.

Cara Menambahkan Konten ke Situs Jekyll

Anda sekarang telah membuat situs Jekyll dan mengonfigurasi situs untuk memenuhi kebutuhan Anda. Langkah terakhir adalah menambahkan konten atau mempelajari bagaimana konten dapat ditambahkan ke situs Jekyll.

Semua konten disimpan di folder _posts. Setiap konten disimpan dalam file dengan konvensi penamaan serupa YYYY-MM-DD-title.md (atau .html untuk file HTML). Misalnya, jika Anda ingin membuat postingan bernama “My First Post”, buat 2023-03-08-my-first-post.md di direktori _posts .

Selanjutnya, untuk setiap file postingan/konten, pastikan Anda menambahkan front matter tentang postingan tersebut di bagian atas. Ini akan mencakup tata letak, judul, deskripsi, tanggal dan informasi lainnya.

 --- layout: post title: "How to Read Books: Tips and Strategies for Maximum Learning" subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge." date: 2023-03-02 23:45:13 -0400 background: '/assets/images/blog/books.jpeg' ---

Kemudian Anda dapat menambahkan konten Anda di bawah blok materi depan dengan tag HTML atau sintaks penurunan harga.

Simpan file, dan Jekyll akan secara otomatis membuat dan memasukkannya ke dalam situs Anda.

Cara Menerapkan Situs Jekyll Anda di Kinsta

Kinsta adalah platform cloud yang memungkinkan Anda menghosting situs web statis, termasuk Jekyll. Ini dapat dilakukan dengan menyiapkan beberapa konfigurasi, mendorong kode Anda ke GitHub, dan terakhir menerapkannya ke Kinsta.

Prasyarat: Mengonfigurasi Situs Jekyll Anda

Periksa file Gemfile.lock Anda dan pastikan itu menyertakan platform untuk semua perangkat. Untuk memastikan semua platform dikonfigurasi dengan benar, jalankan perintah berikut:

 bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

Kemudian Anda dapat melanjutkan untuk membuat Procfile — file ini menentukan perintah yang dijalankan saat situs Anda diterapkan. File ini secara otomatis memperbarui perintah yang akan dieksekusi di tab Proses MyKinsta. Ini adalah perintah untuk ditambahkan ke Procfile Anda:

 web: bundle exec jekyll build && ruby -run -e httpd _site

Dorong Situs Jekyll Anda ke GitHub

Untuk artikel ini, mari gunakan perintah Git untuk mendorong kode Anda ke GitHub. Pertama, buat repositori di GitHub; ini akan memberi Anda akses ke URL repositori.

Anda sekarang dapat menginisialisasi repositori Git lokal dengan membuka terminal Anda, menavigasi ke direktori yang berisi proyek Anda, dan menjalankan perintah berikut:

 git init

Sekarang tambahkan kode Anda ke repositori Git lokal menggunakan perintah berikut:

 git add

Anda sekarang dapat melakukan perubahan menggunakan perintah berikut:

 git commit -m "my first commit"

Catatan: Anda dapat mengganti "komit pertama saya" dengan pesan singkat yang menjelaskan perubahan Anda.

Terakhir, dorong kode Anda ke GitHub menggunakan perintah berikut:

 git remote add origin [repository URL] git push -u origin master

Catatan: Pastikan Anda mengganti “[URL repositori]” dengan URL repositori GitHub Anda sendiri.

Setelah Anda menyelesaikan langkah-langkah ini, kode Anda akan didorong ke GitHub dan dapat diakses melalui URL repositori Anda. Anda sekarang dapat menerapkan ke Kinsta!

Menerapkan Situs Jekyll Anda ke Kinsta

Penerapan ke Kinsta terjadi hanya dalam hitungan menit. Mulai dari dasbor My Kinsta untuk masuk atau membuat akun Anda. Selanjutnya, Anda akan mengotorisasi Kinsta di GitHub.

Anda kemudian dapat mengikuti langkah-langkah ini untuk menerapkan situs Jekyll Anda:

1. Klik Aplikasi di sidebar kiri
2. Klik Tambahkan layanan
3. Klik Aplikasi dari dropdown

Sebuah modal akan muncul di mana Anda dapat memilih repositori yang ingin Anda terapkan. Pilih cabang yang ingin Anda gunakan jika Anda memiliki banyak cabang di repositori Anda.

Anda kemudian dapat menetapkan nama untuk aplikasi ini. Pilih lokasi pusat data di antara 25 lokasi yang tersedia, dan kemudian Procfile akan secara otomatis menyediakan perintah proses web.

Aplikasi Anda akan mulai di-deploy. Dalam beberapa menit, tautan akan diberikan untuk mengakses versi situs web Anda yang diterapkan. Dalam hal ini, ini adalah: https://myblog-84b54.kinsta.app/

Ringkasan

Sejauh ini, Anda telah mempelajari cara kerja Jekyll dan berbagai penyesuaian yang dapat Anda lakukan dengan Jekyll. Sekarang aman untuk menyetujui bahwa Jekyll adalah alat yang luar biasa untuk membuat situs web statis karena kesederhanaan, fleksibilitas, dan fiturnya yang canggih.

Sistem templat intuitif Jekyll, templat cair, dan dukungan bawaan untuk markdown dan bahasa markup lainnya memudahkan untuk membuat dan mengelola situs kaya konten dengan cepat.

Jangan ragu untuk menghosting semua situs web statis Anda dengan Hosting Aplikasi Kinsta secara gratis, dan jika Anda suka, pilih paket Hobby Tier kami, mulai dari $7/bulan .

Apa pendapat Anda tentang Jekyll? Sudahkah Anda menggunakan Jekyll untuk membuat sesuatu? Silakan berbagi proyek dan pengalaman Anda dengan kami di bagian komentar di bawah.