Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Middleman
Webdesign

Proyek: Membangun Situs Web Lengkap dengan Middleman

by
Length:LongLanguages:
This post is part of a series called Building Static Websites with Middleman.
Working With Data, Assets, and Templates in Middleman
Project: Continuing Our Website Build With Middleman

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

Pada bagian ketiga dari seri ini kita akan milulai mengotori tangan kita serta memulai membangun situs untuk situs podcast fiktif: "Matcha Nerdz". Kita akan menggunakan Middleman, Bourbon, Neat and Bitters. Ayo mulai!

Pada Post Ini

  • Peta jalan 
  • Pengaturan Blog Dasar 
  • LiveReload 
  • Mengatur Pos 
  • Pemberian Halaman GitHub
  • Aset Lebih Cerdas 
  • Pengaturan Bourbon 
  • Normalisasikan dan jQuery 

Peta Jalan

Mari mulai dengan sedikit informasi tentang kemana hal ini berjalan. Selama beberapa artikel berikutnya saya akan membuat situs statis kecil untuk podcast fiktif yang disebut "Matcha Nerdz" —sebuah podcast untuk orang-orang yang ingin menyelami semua teh hijau bubuk. Ini akan memiliki halaman-halaman berikut:  

  • Sebuah page untuk setiap tag
  • Sebuah page detail untuk setiap episode
  • Sebuah page index untuk podcasts sebelumnya

Kami akan menggunakan Middleman untuk menghasilkan situs statis dan suite Bourbon untuk semua styling. Saya harap Anda telah melihat tutorial saya sebelumnya tentang Bourbon, Neat and Middleman sebelum Anda tiba pada poin ini.   Jika tidak, saya sarankan Anda pergi dan membacanya, kecuali Anda sudah cukup percaya diri dalam hal-hal dasar. 

Untuk semua hal yang berkaitan dengan gaya, saya sangat mengandalkan Bourbon cukup lama. Juga, saya benar-benar menggali sintaks Sass yang indentasi — saya jauh lebih menyukai sintaksis .scss.  Sintaksis .sass adalah satu-satunya (mungkin) yang tidak dikenal yang ingin saya berikan pada pemula, karena saya merasa itu sangat berharga untuk diketahui.

Pengaturan Blog Dasar

Mari mulai aplikasi baru untuk situs podcast kami, dengan memasukkan di terminal:

dan kemudian berubah ke direktori proyek:

Sekarang kita akan mendapatkan Git: 

Selanjutnya kita tambahkan template blog. Ini adalah dasar yang baik untuk situs podcast kita. Nanti kita akan menyesuaikan artikel untuk menampilkan track audio podcast dari SoundCloud. Untuk saat ini, bagaimanapun, ini hanya sebuah blog.

Di dalam Gemfile, tambahkan: 

Kemudian melalui terminal: 

Ini akan memperbarui folder “matcha_nerdz” Anda. ".config.rb" dan template indeks Anda mendapatkan sedikit pembaruan juga.  Di atas itu Anda mendapatkan template baru untuk feed Anda, halaman tag, halaman kalender, artikel contoh, dan tata letak baru. Periksa output dari terminal: 

Git:

Membuat Artikel Baru

Sekarang Anda dapat membuat artikel baru melalui baris perintah: 

Ini menciptakan artikel markdown baru di bawah "/ source". Ini bukan penyimpanan yang optimal tetapi kami akan sampai di sana. Jalankan server Anda untuk melihat artikel blog contoh pertama Anda: 

Merapikan Berbagai Hal 

Selanjutnya kita perlu melakukan beberapa pekerjaan rumah tangga. Template blog menciptakan tata letak baru di bawah "source / layout.erb". Kita perlu menghapus yang asli di “source / layouts / layout.erb” dan memindahkan yang baru ke sana. Jadi, melalui terminal: 

Kami juga perlu memperbarui "layout.erb" baru dengan hal-hal yang telah dihapus di file layout. Tambahkan yang berikut ini ke tag <head> Anda di "source / layouts / layout.erb": 

Yang terpenting, ini memastikan bahwa JS dan aset gaya Anda tersedia 

Git

LiveReload 

Untuk membuat hidup kita lebih nyaman, kami akan menambahkan LiveReload ke dalam campuran. Kita harus mengambil permata dan kemudian mengaktifkannya di file "config.rb" kami. 

Di Gemfile kami: 

Di terminal:

Kemudian di config.rb: 

Dan akhirnya perintah Git kami:

Dengan ini diaktifkan, restart server Anda dan halaman Anda akan menyegarkan secara otomatis setiap kali Anda mengubah konten pada halaman, gaya atau perilaku. Life saver, percayalah!

Perhatian! Sebuah kata peringatan: Jika Anda memiliki server lokal lain yang sedang berjalan, LiveReload mungkin tidak memainkan bola. Anda harus membunuh server lain itu untuk saat ini. 

Mengatur Pos 

Ketika Anda melihat di mana artikel disimpan sekarang, Anda akan segera menyadari bahwa organisasi ini langsung di bawah "/ sumber" menjadi membosankan dengan sangat cepat. Publikasikan beberapa artikel dan Anda akan tenggelam dalam pos.  Tidak perlu menjadi berantakan itu - sebagai gantinya mari buat direktori di bawah “/ source” untuk semua pos kami. Pindahkan artikel Anda di sana dan biarkan Middleman tahu di mana menemukannya. 

Kemudian kami menambahkan "/ posts" sebagai sumber untuk artikel blog. Di config.rb: 

Kemudian perintah Git kami:

Dan itu saja. Tidak ada yang harus berubah dan Anda harus melihat artikel contoh seperti sebelumnya. Penyimpanan posting, bagaimanapun, jauh lebih waras. Yang juga keren adalah jika Anda membuat artikel baru melalui baris perintah, pos baru Anda akan disimpan di “/ pos” secara otomatis: 

Pemberian Halaman GitHub

Bagi saya, mendorong situs statis ke GitHub Pages adalah solusi yang sangat mudah yang saya tidak ingin Anda gunakan melalui layanan Heroku atau S3 Amazon. Mari tetap sederhana!

Di Gemfile: 

Kemudian di terminal: 

Kita perlu menambahkan blok deploy ke "config.rb": 

Agar Laman GitHub dapat menemukan aset CSS dan JS Anda, kami harus mengaktifkan yang berikut di config.rb juga:

Kemudian, buat repo di GitHub, tambahkan remote dan terapkan:

Ledakan! Situs Anda tayang di bawah “namapenggunaAnda.http.io/projectname” dan aset Anda harus diselesaikan. Saya suka proses ini — itu tidak bisa lebih mudah dan lebih ramah pengguna. Kerja bagus GitHub!

Aset Lebih Cerdas 

Pada langkah terakhir sebelum masuk ke pengaturan Bourbon, saya ingin menyingkirkan gaya yang datang bersama dengan Middleman, dan mengoptimalkan aset kami untuk kinerja yang lebih baik di browser — minifikasi aset dan penggabungan. Buka "sumber / stylesheet / all.css" dan hapus kontennya. Simpan saja baris pertama: 

Perintah Git: 

Selanjutnya kami ingin mengaktifkan beberapa opsi untuk mengoptimalkan kinerja di "config.rb":

Kemudian, sekali lagi, perintah Git:

Biarkan saya menjelaskan dengan cepat apa yang kami lakukan di sini: 

  • :gzip 

Saat ini, gzip adalah metode kompresi yang paling populer dan efektif. Algoritma kompresi menemukan string serupa dalam file dan mengompresnya. Untuk HTML, yang penuh dengan spasi dan tag yang cocok, ini sangat efektif dan biasanya mengurangi ukuran respons HTTP hingga kekalahan 70%. Mengaktifkan ini tidak hanya gzip HTML Anda, tetapi juga file CSS dan JS. Saat membangun, Middleman membuat file Anda seperti biasa, tetapi juga menggandakannya dengan versi ".gz". Ketika browser berhubungan dengan file Anda, ia dapat memilih apakah ia lebih suka untuk melayani file terkompresi gzip atau yang biasa. gzipping didukung oleh browser web dan seluler.

  • :minify_css 

Proses ini menghapus semua sampah yang tidak perlu dari gaya Anda dan mengurangi ukuran file mereka secara signifikan. Singkatnya, CSS Anda menjadi satu gumpalan besar — dioptimalkan untuk dibaca oleh mesin. Jelas tidak ramah pada mata.

  • :minify_javascript

Ini sama dengan minify_css, tetapi sedikit lebih terlibat dan canggih.

  • :asset_hash 

Ini mengaktifkan hashing dari aset Anda. Ini berarti bahwa nama file aset Anda berubah dan menerima beberapa informasi tambahan (selama proses pembuatan) yang memberi tahu browser jika mereka perlu mengunduh ulang aset atau tidak.  Sekarang, nama file tergantung pada isi file itu. Aset yang rusak disembunyikan oleh browser dan situs Anda dirender lebih cepat.  Kata lain untuk ini adalah "fingerprinting" karena menyediakan solusi sederhana untuk memberi tahu browser apakah dua versi dari sebuah file bersifat indentical.  Tanggal pemasangan tidak menjadi masalah — hanya isinya saja. Lihatlah di bawah ini bagaimana tampilan file aset hash:

Screenshots 

file
file
file

Ini terlihat buruk, tetapi sekarang gambar, stylesheet, dan file JavaScript Anda mendapatkan nama unik melalui kode "acak" tambahan ini: hash (unik). Setiap kali Anda mengubah suatu aset dan melalui proses pembuatan lagi, perubahan hash ini, yang pada gilirannya memberi sinyal ke browser yang kemudian, dan hanya kemudian, mereka perlu mengunduh ulang file tertentu itu.  File ini kemudian secara efektif kedaluwarsa, sebuah proses yang dikenal sebagai "cache busting".  

Juga perlu disebutkan: Anda dapat merujuk ke file Anda dengan cara yang sama seperti sebelumnya, tetapi selama membangun referensi dalam HTML Anda, dapatkan pembaruan untuk menggunakan nama-nama berciri ini. Lihatlah: 

“/build/index.html(.gz)”: 

Dalam folder “/ build” Anda, file JS dan CSS dirujuk dengan nama aset yang di-hash secara otomatis.  Sebagai akibat dari hashing bisnis ini, ketika Anda membuka halaman yang berbeda dalam sesi yang sama, atau mengunjungi kembali halaman lagi nanti, aset ini telah di-cache dan tidak perlu diminta lagi — sampai Anda mengubah sesuatu.  Proses ini mengurangi jumlah permintaan Anda dengan jumlah yang mengejutkan. Bukankah itu keren? Semua itu dengan satu baris kode di "config.rb" dan beberapa sihir Sprocket. Abakadabra! 

Kunci dengan semua teknik pengoptimalan aset ini adalah untuk meminimalkan jumlah permintaan dan ukuran permintaan file dan aset Anda. Middleman menawarkan peningkatan performa yang luar biasa, tepat di luar kotak, dengan sedikit usaha di pihak Anda. 

Catatan: GitHub Pages sudah pernah di-gzip dan diperkecil dari kotak. Tetapi tidak ada ruginya untuk memastikan semuanya sudah ada — terutama jika Anda kemudian memutuskan untuk menghosting aplikasi Anda di tempat lain.

Mari kita lihat tahapan kita saat ini. Halaman indeks Anda akan terlihat cukup barebone sekarang: 

file

Pengaturan Bourbon

Untuk proyek ini saya ingin menggunakan tiga permata dari Bourbon: 

  • Bourbon
  • Rapi
  • Tajam

Mari tambahkan ke Gemfile dan bundel kami: 

Di terminal: 

Bourbon dan Rapi sekarang baik untuk pergi (hampir). Bitter perlu menginstal beberapa hal terlebih dahulu. Kita perlu mengubah ke direktori stylesheet dan mengaktifkan generator yang menempatkan banyak file Bitters dalam folder "/ base".

Lihatlah apa yang kita miliki setelah ini:

Screenshot 

file

Pahit adalah sesuatu yang mendasar untuk desain Anda. Ini memberi Anda beberapa desain yang bagus untuk elemen UI seperti tombol, jenis, bentuk, pesan kesalahan, dan sebagainya.  Bitters juga menyiapkan file “grid-settings” untuk grid Neat Anda yang juga harus kita atur dengan tidak menyebutkan baris berikut di “source / stylesheet / base / _base.scss”: 

Untuk menyelesaikan pengaturan Bourbon kami untuk sekarang, saya ingin menambahkan variabel berikut ke setelan kisi kami. Mereka meletakkan dasar untuk ukuran grid kami dan mengaktifkan grid visual yang membantu kami untuk lebih menyelaraskan desain kami.

Masukkan “/source/stylesheets/base/_grid-settings.scss”:

Langkah terakhir untuk membuat karya ini adalah mengganti nama “/stylesheets/all.css” menjadi “/stylesheets.all.sass” dan mengimpor file Bourbon kami. 

Catatan: Karena kita beralih ke sintaks Sass indentasi, kita juga perlu membunuh titik koma di akhir baris @charset.

“all.css.scss”: 

Kami mengimpor file base Bitters di sini tepat setelah Bourbon karena kami memerlukan akses ke file pengaturan grid Neat (yang ada di folder “/ base”) sebelum kami mengimpor Neat. 

Git:

Mari kita lihat! Anda dapat melihat visual grid merah dan, juga terima kasih kepada Bitters, tipografi kami telah meningkat sedikit di luar default browser. Lihatlah tangkapan layar: 

file

Normalisasikan dan jQuery 

Middleman dilengkapi dengan file Normalisasi yang diimpor ke "all.css" secara default. Ini adalah salah satu permintaan aset yang tidak perlu kita dapat dengan mudah menyingkirkan, jadi ganti nama "sumber / stylesheet / normalize.css" menjadi "sumber / stylesheet / _normalize.css.scss" terlebih dahulu.  Sekarang kita memiliki sebagian yang perlu kita impor tepat di atas setelah @charset di “source / stylesheet / all.sass”:

Satu hal yang tidak boleh kita abaikan adalah tautan untuk stylesheet kami di tata letak kami. Karena kami menggunakan parsial Sass yang semuanya diimpor ke stylesheet final "global", kami tidak memerlukan tautan untuk kembali normal - tautan ke all.sass sudah cukup. 

Dalam “source/layouts/layout.erb”:

Lalu kemudin Git:

Akhirnya, sebelum kita istirahat, kita harus menambahkan jQuery yang nanti akan kita butuhkan. Di Gemfile:

Kemudian juga di terminal:

Karena saya ingin menggunakan CoffeeScript untuk proyek ini, kita perlu mengganti nama “source / javascripts / all.js” menjadi “source / javascripts / all.coffee”. Di sana kami memerlukan jQuery untuk Sprocket / Saluran Pipa Aset dan kami siap.

In all.coffee:

Perintah Git kita:

Dan terapkan: 

Setelah menerapkan, buka situs Anda di Halaman GitHub untuk melihat apakah semuanya berjalan sesuai harapan. Pekerjaan yang baik!

Rehat

Fiuh! Mari istirahat. Kami berhasil mendapatkan beberapa langkah setup membosankan dengan cara yang satu ini.  Semoga Anda diberi gambaran yang jelas tentang apa yang Anda butuhkan untuk dasar yang kuat ketika Anda memulai proyek Middleman baru. Selanjutnya, kami akan memperluas apa yang telah kami bangun di sini dan terus bekerja menuju situs yang layak untuk podcast kami.

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