Cara membuat situs statis gratis dengan Halaman GitHub dalam 10 menit

Situs statis telah menjadi hal yang populer, dan dengan alasan yang bagus - mereka sangat cepat dan, dengan semakin banyak layanan hosting yang didukung, cukup mudah disiapkan.

Saya tidak akan membahas tentang siapa, apa, kapan, di mana, atau mengapa situs statis di sini. Saya berasumsi bahwa Anda setidaknya memiliki gagasan yang tidak jelas tentang apa itu atau hanya ingin membuat situs Anda sendiri dan tidak peduli dengan detail lainnya. Bagaimanapun, posting ini untuk Anda.

Pertama, saya ingin Anda tahu bahwa saya menulis ini untuk audiens seluas mungkin; Anda tidak memerlukan pengetahuan pemrograman apa pun untuk diikuti, tetapi pengetahuan tentang baris perintah dan Git akan banyak membantu.

Jadi bagaimana Anda bisa membuat situs statis dengan GitHub dalam 10 menit?

Kami akan bekerja dengan dua alat khusus: Halaman GitHub, yang dirancang khusus untuk menyajikan konten statis, dan generator konten statis yang disebut Jekyll.

Jekyll adalah permata Ruby untuk membuat situs statis dengan mudah, jadi Anda perlu menginstal Ruby di komputer Anda jika ingin menggunakan Jekyll. Jika Anda memiliki OSX, kemungkinan besar Anda sudah memiliki versi Ruby (meskipun Anda mungkin perlu memperbaruinya). Jika tidak, atau menggunakan komputer Windows, Anda dapat mempelajari lebih lanjut tentang cara menginstalnya di sini: Menginstal Ruby.

Dengan itu, buka janda terminal baru dan ketik gem install bundler jekyll. Ini akan menginstal Bundler (alat manajemen paket Ruby) dan Jekyll.

Setelah permata itu (paket Ruby) dipasang, ketik Jekyll new my-static-site(beri nama apa pun yang Anda inginkan) yang akan menjalankan generator Jekyll untuk membuat proyek Anda di direktori baru. Setelah situs Anda dibuat, masuk ke direktori situs yang baru Anda buat dengan mengetik cd my-static-site(atau cdapa pun yang Anda sebut proyek Anda).

Buka proyek Anda di editor teks dan Anda akan melihat beberapa file dan folder yang dibuat Jekyll untuk Anda. Saat ini Anda hanya perlu memusatkan perhatian pada Gemfile (bukan Gemfile.lock). Gemfile adalah file Ruby yang mengelola semua paket Ruby terkait yang diperlukan untuk menjalankan sebuah proyek.

File akan berisi baris dengan versi Jekyll, beri komentar:

#gem "jekyll", "~> 4.0.0" 

Kemudian tambahkan baris ini:

gem "github-pages", group: :jekyll_plugins 

Mungkin ada banyak kesalahan saat Anda menginstal permata Halaman GitHub - terkadang permata yang bergantung padanya sudah kedaluwarsa atau permata yang Anda instal secara lokal terlalu modern untuk Halaman GitHub.

Saya menemukan bahwa hal ini dapat mempersulit pembuatan dan pengujian situs Jekyll saya secara lokal. Mungkin paling mudah untuk menguji situs Anda secara lokal dan menyimpan pembuatannya hingga Anda siap untuk menerapkan. Namun, pada saat penulisan ini Anda dapat menentukan versi dependensi ini di Gemfile Anda dan Jekyll akan berfungsi baik secara lokal maupun dengan Halaman GitHub:

gem "jekyll", "~> 3.8.5" gem "github-pages","~> 202" , group: :jekyll_plugins group :jekyll_plugins do gem "jekyll-feed", "~> 0.11.0" end 

Terima kasih kepada Alex Waibel di StackOverflow untuk konfigurasi terbaru itu.

Untuk melihat situs Anda beraksi, jalankan bundle exec Jekyll servedi baris perintah Anda. Ini akan memulai server dan Anda dapat melihat situs Anda dengan mengetik "localhost: 4000" di bilah URL browser.

Voila! Anda telah membuat situs statis dengan Jekyll dan Anda berada di direktori proyek. Anda sekitar 50% selesai.

Ayo dapatkan ini secara online

Buka GitHub.com dan daftar, atau jika Anda sudah memiliki akun, pilih tombol “baru” dan buat repositori. Anda harus menamai repositori Anda setelah tautan yang akan disajikan oleh akun Halaman GitHub Anda, yaitu nama_anda.github.io. Misalnya nama pengguna GitHub saya adalah tfantina dan blog saya adalah tfantina.github.io, maka repo GitHub saya dinamai: "tfantina.github.io".

Kembali ke jendela terminal Anda, dorong situs Jekyll Anda dari komputer Anda ke GitHub dengan menjalankan perintah berikut:

git init git remote add origin [email protected]:/.git git commit -am “Setting up Jekyll!” git push -u origin master 

(Saat mengganti nama pengguna dan nama proyek Anda, Anda tidak memerlukan pembukaan dan penutupan).

Setelah perubahan Anda didorong ke repositori, Anda seharusnya memiliki situs statis yang berfungsi. Ini karena Anda menggunakan permata Halaman GitHub dan menamai repositori Anda sedemikian rupa sehingga GitHub mengerti bahwa Anda ingin menyajikannya dengan Halaman GitHub.

Anda dapat mengonfirmasi ini baik dengan mengunjungi situs Anda atau dengan masuk ke tab pengaturan di GitHub dan menggulir ke bagian halaman. Anda akan melihat kotak hijau yang menunjukkan di mana situs Anda telah dipublikasikan:

Anda juga akan melihat bahwa Anda dapat dengan mudah mengubah tema Anda dari sini juga. GitHub menyediakan beberapa tema default untuk Jekyll, tetapi tentu saja Anda juga dapat membuatnya sendiri.

Jika situs Anda menyatakan telah dipublikasikan tetapi terlihat kosong, Anda mungkin perlu menyegarkan kembali atau mencoba melihat situs Anda di jendela pribadi. Ini mungkin tampak jelas, tetapi ini membuat saya hampir setiap kali membuat instance Jekyll baru.

Jika semuanya berjalan sesuai rencana, situs Anda akan terlihat seperti ini:

Ini dia - hanya dalam beberapa menit Anda telah membuat dan menerapkan situs web statis dengan halaman GitHub. Tapi Anda mungkin ingin bisa meletakkan beberapa konten di halaman Anda.

Saya berjanji ini hanya akan memakan waktu sepuluh menit, jadi saya tidak akan menyelami semua detail halaman, materi depan, atau bahasa template Liquid. Itu postingan untuk hari lain. Namun saya akan membagikan cara membuat postingan pertama anda.

Kembali ke editor teks Anda, buka folder "_posts". Sudah ada postingan yang menyambut Anda di blog baru Anda. Buat file penurunan harga baru dan simpan dengan nama dalam format ini: YEAR-MONTH-DAY-TITLE. Markdown (lihat di bawah):

Posting Jekyll berisi dua bagian: materi depan, dan tubuh.

Materi depan memberikan instruksi khusus kepada Jekyll seperti apa judul posting yang akan menjadi, tata letak yang akan digunakan, dan kapan posting itu ditulis.

Materi depan sangat dapat disesuaikan. Misalnya, saya ingin postingan saya memiliki gambar pahlawan, jadi saya membuat lead_imagetag dan menempatkan beberapa sintaks di tata letak saya untuk secara khusus memeriksa gambar utama di materi depan setiap postingan. Bahasa template Liquid memudahkan untuk menarik konten dari materi depan ke dalam tema Anda.

Masih banyak lagi yang dapat Anda lakukan dengan materi depan, tetapi mari kita mulai dengan contoh umum.

Materi depan default terlihat seperti ini:

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • Tata letak memberi tahu Jekyll tata letak mana yang Anda inginkan untuk menampilkan konten. Anda dapat memiliki beberapa tata letak untuk halaman atau jenis posting yang berbeda.
  • Judul postingan
  • Tanggal posting
  • Kategori, yang pada dasarnya adalah tag. Anda dapat menambahkan sesedikit atau sebanyak yang Anda inginkan dengan dipisahkan oleh spasi.

Setelah front matter posting Anda dapat ditulis dalam penurunan harga, yang memberi Anda banyak fleksibilitas dalam menulis konten posting Anda.

Setelah posting Anda selesai, simpan dan buka jendela terminal Anda.

git commit -am “Publishes first post git push

Setelah satu menit (dan mungkin menyegarkan), Anda akan dapat melihat kiriman Anda.

Mudah-mudahan, Anda sekarang memiliki situs statis yang berfungsi di Halaman GitHub yang dibuat dengan Jekyll! Jika Anda memiliki masalah atau pertanyaan, silakan tweet @tfantina, atau Anda dapat mengirimi saya email di [email protected]