Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jekyll

Mengatur Jekyll Untuk Halaman GitHub Dalam 60 Detik

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called 60 Second Video Tutorials.
Start Learning Web Design in 60 Seconds
Adobe XD in 60 Seconds

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Jekyll dapat digunakan dengan Halaman GitHub untuk Membuat website yang simpel, sadar blog, statis. Video ini akan menunjukkanmu bagaimana mengatur inti struktur file Jekyll dalam 60 detik!

Setelah kamu siap dan membutuhkan inspirasi, periksa apa yang ada di sekitar theme Jekyll pada Envato Market.

Jika kamu lebih memilih penjelasa tertulis, berikut adalah keseluruhan proses yang dijabarkan dalam langkah yang jelas:

Project Baru

Pertama, buat sebuah folder dalam sistemmu untuk sebuah repo baru. Lakukan ini dengan menggunakan terminal untuk mengarahkan dimana kamu ingin folder baru itu berada, lalu masukkan: mkdir mysite. Situs folder baru kita bernama "mysite", namun kamu dapat menamainya sesukamu.

Ganti direktori ke folder baru ini dengan memasukkan cd mysite–setelah itu buat sebuah file konfigurasi dengan memasukkan perintah vim _config.yml. Jendela terminal akan menunjukkan isi file ini, jadi tekan i untuk memasuki insert mode, lalu tambahkan konten di bawah ini:

Tekan Esc untuk keluar dari insert mode, lalu masukkan :x untuk menyimpan perubahan yang telah kamu buat.

Membuat Index

Selanjutnya kita perlu membuat dokumen index, jadi masukkan vim index.md dan mirip seperti yang kamu lakukan sebelumnya, tambahkan konten berikut:

Menambahkan Folder Layout

Sekarang buat sebuah folder baru dengan memasukkan mkdir _layouts dan ubah direktori itu dengan cd _layouts. Berikan dokumen template default vim default.html dan tambahkan konten berikut:

Inisialisasi Repo Baru

Sekarang kita perlu menginisialisasi folder sebagai repo baru dan menyetujui perubahan. Jadi mulailah dengan mengarahkan kembali ke root project kita dengan cd ... Kemudian masukkan git init, diikuti dengan git add --all && git commit --all.

Mengedarkan ke GitHub

Pindah ke GitHub via browser dan buat sebuah repo baru.

Kamu akan diberikan beberapa pilihan pada titik ini, jadi ambil perintah dimana kamu melihat push an existing repository from the command line. Command akan membaca sesuatu seperti:

Tempelkan perintah ini ke dalam terminal untuk mengedarkan repo lokal ke GitHub.

Pengaturan GitHub

Terakhir, di dalam Settings repo GitHub, pilih untuk use the master branch for GitHub Pages, lalu tekan Save.

Jekyll sudah siap, dan websitemu siap dibangun!

Penjelasan Struktur File Jekyll

  • _config.yml berfungsi sebagai file konfigurasi Jekyll. Ini apa yang dibaca GitHub Pages sebagai pengaturan luas situs seperti variabel global, dan banyak lagi.
  • index.md adalah dokumen index dasar website GitHub Pages.
  • _layouts/default.html adalah file template default yang menjadi basis bagi index.md.

Sumber-Sumber Berguna

Informasi lebih lanjut tentang membangun website statik menggunakan Jekyll, periksa sumber-sumber berikut di Envato Tuts+!


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