Cara Membangun Blog dengan Jekyll

Feb 2, 2026

Bagaimana caranya

(Kredit Gambar: Net)

Tutorial ini untuk orang-orang yang pernah mendengar tentang generator situs statis dan telah memutuskan mereka ingin pergi membangun situs mereka sendiri menggunakan satu. Inilah kami akan menunjukkan kepada Anda Cara Memulai Blog menggunakan jekyll.

Pengetahuan dasar tentang terminal baik, meskipun Anda harus dapat mengikuti seiring dengan perintahnya semua cukup sederhana. Situs pada halaman github ditenagai oleh jekyll di belakang layar, jadi ketika digunakan bersama dengan halaman github, itu menciptakan cara untuk meng-host dan mengelola situs web Anda secara gratis (lihat daftar terbaik kami hosting web. layanan untuk opsi lain, atau lihat daftar kami jika Anda ingin jenis yang berbeda Pembangun Situs Web ).

Tutorial ini mengasumsikan Anda berada di Mac; Karena Jekyll adalah program Ruby, dimungkinkan untuk menjalankannya di Windows tetapi tidak didukung secara resmi. Jika Anda mengikuti Windows, Hop ke sini Untuk membantu mengatur Ruby.

Setelah menyelesaikan tutorial ini, Anda akan membuat blog jekyll dan belajar bagaimana fitur dan bahasa templating dapat membangun blog pribadi. Ini adalah titik awal yang bagus untuk mengembangkan situs Anda sendiri. Dan ingat, jika Anda punya banyak ide desain atau file media, pastikan untuk membuatnya tetap aman penyimpanan awan .

Temukan file untuk tutorial ini sini .

10 Generator Situs Statis Terbaik

01. Atur

Pada Mac Anda harus memiliki Ruby diinstal secara default tetapi mari kita periksa dengan mengetik Ruby -v. di terminal Anda.

Sekarang kita benar-benar dapat menjalankan Jekyll di situs, pastikan Anda berada di direktori Anda ingin membangun situs Anda dan hanya mengetik Gem Instal Jekyll Bundler ; Komputer Anda kemudian akan pergi dan mengambil semua dependensi yang diperlukan untuk menjalankan situs.

02. Sajikan secara lokal atau membangun

Ada dua perintah utama yang akan Anda gunakan dengan Jekyll - Menyajikan dan membangun . Untuk menjalankan situs Anda tipe secara lokal Jekyll melayani di baris perintah Anda. Ini akan menjalankan versi di http://127.0.1:4000 bahwa Anda dapat melihat pratinjau perubahan Anda. Jika Anda sudah memiliki permata dan dependensi lain yang diinstal pada mesin Anda, perintah ini mungkin gagal karena ketidakcocokan dalam versi ketergantungan; Dalam hal ini, coba bundel jekyll melayani sebagai gantinya. Menjalankan hal yang sama tetapi dengan kata membangun Kompilasi situs.

03. Dapatkan file Starter

Salin file yang disertakan dengan tutorial ini pada saat ini untuk memberi Anda dasar kerja. Ini akan memberi kami homepage, daftar blog, halaman detail dan struktur aset untuk situs. Segarkan halaman Anda di http://127.0.1:4000 dan Anda akan melihat kami sekarang memiliki beberapa halaman dasar untuk dibangun. Mari kita tinjauan cepat tentang bagaimana situs jekyll berfungsi.

Situs Jekyll terstruktur dengan cara yang mudah diikuti. Koleksi apa pun (jenis posting) diadakan di folder mereka sendiri, seperti layout dan termasuk. Anda akan melihat folder '_site' - ini adalah folder yang digunakan Jekyll saat Anda menjalankan a Jekyll membangun perintah.

Generate CSS — Bergabunglah dengan kami di London pada 26 September untuk menghasilkan CSS - Klik gambar untuk memesan tiket Anda (Kredit Gambar: Masa Depan)

04. Konfigurasi

Build a blog with Jekyll: Configuration — Jekyll memberi Anda struktur besar untuk bekerja dengan dan file konfigurasi yang mudah dikelola (Kredit Gambar: Net)

Buka _config.yml di editor teks Anda dan tambahkan detail Anda sendiri; Satu area utama untuk diperiksa adalah mengatur URL dasar Anda. Ini adalah folder yang dimasukkan situs Anda. File konfigurasi mirip dengan menggunakan opsi global yang dikombinasikan dengan file WP-Config Anda jika Anda sedang membangun tema WordPress.

Anda dapat mengontrol informasi inti seperti judul dan deskripsi meta, email dan akun sosial Anda dan kemudian semua informasi yang dibutuhkan situs untuk dikompilasi seperti koleksi dan setiap plugin yang digunakan. Anda dapat menggunakan campuran HTML dan Markdown untuk halaman, tergantung pada apa yang ingin Anda capai. Namun, halaman khusus seperti beranda dan halaman daftar Anda umumnya akan menjadi HTML, sedangkan posting dan halaman umum lainnya yang menggunakan template set akan menjadi Markdown.

05. MASALAH DEPAN

Materi depan adalah potongan dari yaml di bagian atas file. Jekyll menggunakannya untuk memegang variabel. Lihatlah file Tentang.md dan Anda dapat melihat kami mengatur judul, tata letak mana yang akan digunakan, penulis, dan gambar terkait.

06. Liquid Tag.

Build a blog with Jekyll: Liquid tags — Liquid Tag menawarkan cara mudah untuk bekerja dengan templat dan juga digunakan dalam tema Shopify (Kredit Gambar: Net)

Jekyll menggunakan Liquid - Bahasa templating yang menggunakan objek, tag dan filter. Kami menggunakan obyek Tag dikelilingi oleh kawat gigi ganda {{}} untuk menghasilkan variabel materi depan dan tanda persentase dan persentase untuk logika {%%} .

07. Bangun navigasi Anda

Daripada navigasi statis, kami menggunakan kekuatan file konfigurasi untuk memisahkan konten dari template. Kami akan menahan item navigasi di folder 'Data' sebagai file konfigurasi dan kemudian loop melalui navigasi.html. Kita bisa memasukkan halaman dan tautan apa pun yang kita inginkan ke depan tanpa kembali ke template. Pastikan Anda benar-benar berhati-hati dengan spasi ketika mengedit file konfigurasi Anda seperti navigasi.yml atau bagian depan pada awal posting karena ruang liar akan menyebabkan kesalahan.

File konfigurasi sudah diatur sehingga masukkan kode berikut dalam file 'navigasi.html' Anda:

 {% untuk item di Site.Data.Navigasi%}
     & lt; a href = "{site.baseurl}} / {item.link}}" {% if halaman.url == item.Link%} class = "endif%} & gt; {{item .name}} & lt; / a & gt;
   {% endfor%}

Kami menggunakan tag logika cair untuk melihat di file konfigurasi navigasi dan lampirkan tautan dan nama untuk setiap entri, pada dasarnya hanya standar untuk loop.

08. Buat beranda

Di beranda kami, kami akan mencantumkan posting blog terbaru kami sebagai pahlawan dan kemudian memiliki cuplikan dari halaman kami dengan tautan melalui. Mari kita mulai dengan blok pahlawan. Buka index.html dan kemudian tambahkan kode berikut:

 {% menetapkan post = site.posts.pirst%}
& lt; div class = "c-hero" style = "latar belakang: url ({{post.thumbnail_image.large | relative_url}}) pusat bawah / cover;" & gt;
   & lt; h1 class = "c-hero__title" & gt; {{pos.title}} & lt; / h1 & gt;
   {{post.intro | markdownify}}
   & lt; a href = "{{post.url}}" class = "btn - pahlawan" & gt; baca posting penuh & lt; / gt;
& lt; / div & gt;

Anda akan melihat bahwa kami pertama kali menetapkan posting terbaru dan kemudian referensi gambar thumbnail yang diatur di bagian depan posting. Intro pos menggunakan filter cair Markdownify. Untuk mengonversi penurunan ke HTML.

Dengan itu, mari kita tambahkan penggoda dari halaman tentang sekitar. Tambahkan yang berikut:

 & lt; div class = "c-feature" & gt;
   {% untuk halaman di situs.paging%}
       {% if halaman.url == '/About.html'%}
           & lt; img src = "{{halaman.profile_image.small}}" alt = "gambar profie" kelas = "c-feature__image" / & gt;
           & lt; div class = "c-feature__text" & gt;
               & lt; h2 & gt; & lt; a href = "{{page.url}}" & gt; {{halaman.title}} & lt; / gt; & gt;
               & lt; p & gt; {{page.intro}} & lt; / p & gt;
           & lt; / div & gt;
          
       {% berakhir jika %}
   {% endfor%}
& lt; / div & gt;

Kali ini kita menggunakan a untuk loop untuk memeriksa halaman di situs. Kami menggunakan Halaman URL Untuk menyaring halaman tentang dan kemudian kami menggunakan gaya template serupa dengan pahlawan untuk menampilkan informasi halaman.

09. Daftar Blog

Build a blog with Jekyll: Blog list — Tata letak kartu sederhana untuk sisa posting di situs yang menggunakan css grid dan flexbox (Kredit Gambar: Net)

Dengan beranda yang dibuat, kami dapat pindah ke halaman daftar blog. Untuk membuat halaman daftar, kami kembali menggunakan tag cair untuk memberi kami logika untuk loop melalui semua file di folder 'Posting'.

Pahlawan dilakukan untuk Anda karena mengikuti proses yang sama dengan beranda. Di bawah pahlawan di 'blog.html', tambahkan yang berikut:

& lt; kelas div = "membatasi" & gt;
   & lt; h1 & gt; yang terbaik dari istirahat & lt; / h1 & gt;
   & lt; bagian bagian = "Daftar Kartu" & gt;
           {% untuk pos di situs.posts offset: 1%}
           & lt; Div Class = "Card" & gt;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & gt;
                   & lt; div class = "detail kartu" & gt;
                   & lt; h3 & gt; {{post.date | Tanggal: "% d% b"}} - {{post.title}} & lt; / h3 & gt;
               & lt; a href = "{{post.url}}" class = "btn" & gt; baca selanjutnya & lt; / gt;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% endfor%}
          
   & lt; / bagian & gt;
& lt; / div & gt;

Lagi kita menggunakan untuk loop untuk pergi melalui koleksi posting. Tetapi karena kami telah melewati yang terbaru di pahlawan kami mengimbangi loop ini untuk memulai pada posting dua. Filter cair digunakan untuk mengonversi tanggal ke format pilihan kami.

10. Halaman detail blog

Tidak lama lagi sekarang: Kami hampir memiliki semua elemen dasar bersama. Salah satu aspek penting yang tersisa untuk ditangani adalah navigasi. Ketika Anda membaca posting blog, Anda memerlukan cara untuk bersepeda dan membaca lebih lanjut. Kami dapat menambahkan beberapa paginasi yang bagus ke situs kami menggunakan variabel halaman. Buka Post.html di folder Layouts dan tambahkan yang berikut:

 & lt; div class = "c-pagination" & gt;
   {% if halaman. Previous%}
   & lt; div & gt;
       & lt; h3 & gt; sebelumnya & lt; / h3 & gt;
       & lt; p & gt; {{halaman.previous.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a class = "btn" href = "{{site.baseurl}} {{halaman.previous.url}}" & gt; baca post & gt; & gt; & gt;
   & lt; / div & gt;
   {% berakhir jika %}
   {% if halaman.next%}
   & lt; div & gt;
       & lt; h3 & gt; naik berikutnya & lt; / h3 & gt;
       & lt; p & gt; {{halaman.next.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a class = "btn" href = "{{site.baseurl}} {{halaman.next.url}}" & gt; baca posting & gt; & gt; & gt;
   & lt; / div & gt;
   {% berakhir jika %}
& lt; / div & gt;

Kami menggunakan halaman. Previous. dan Halaman.Next. Variabel untuk memeriksa apakah ada pos untuk diklik. Jika ada maka kita dapat menampilkan blok dan menyertakan judul dan tautan posting.

11. Bangun dan Publikasikan

Halaman GitHub membuat file SASS untuk kita, jadi ketika Anda menjalankan Jekyll membangun File yang dikompilasi dibuat di folder _Site. Tidak ada file gulp atau webpack di sini, hanya gaya lean yang bagus! Anda bahkan dapat menguraikan output SASS sebagai pengaturan dalam file config.yml utama untuk situs. Isi direktori ini dapat ditransfer ke hosting yang Anda pilih. Satu hal yang perlu diperhatikan adalah bahwa halaman GitHub sebenarnya mendukung Jekyll sehingga Anda dapat membangun dan meng-host situs menggunakan cabang master Anda sebagai sumbernya. Anda dapat menemukan informasi lebih lanjut tentang ini sini .

Artikel ini awalnya diterbitkan dalam masalah 320 dari bersih , majalah terlaris di dunia untuk desainer dan pengembang web. Beli masalah 320 di sini atau berlangganan di sini .

Artikel terkait:

Bangun blog dengan grid dan flexbox
Platform blogging gratis terbaik
Cara Membangun Situs Blogging dengan Gatsby

Cara Membangun Blog dengan Jekyll

01. Atur

02. Sajikan secara lokal atau membangun

03. Dapatkan file Starter

04. Konfigurasi

05. MASALAH DEPAN

06. Liquid Tag.

07. Bangun navigasi Anda

08. Buat beranda

09. Daftar Blog

10. Halaman detail blog

11. Bangun dan Publikasikan

Bagaimana caranya - Artikel Terpopuler

Cara menggambar singa

Cara membuat logo di Photoshop

Cara merancang dengan bentuk CSS: Pendahuluan

Cara membuat aplikasi dengan vue.js

Memahami pipa impor aset persatuan

Ekspor Animasi Efek ke HTML5

Master Modeling Prosedural

4 tips untuk mengembangkan keterampilan pengembang Anda

Kategori