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:
middleman init matcha_nerdz
dan kemudian berubah ke direktori proyek:
cd matcha_nerdz
Sekarang kita akan mendapatkan Git:
git init # => to initiate new Git repo git add --all # => adds all the files for staging git commit -m 'Initital commit' # => commits changes
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:
gem "middleman-blog"
Kemudian melalui terminal:
bundle # or bundle exec middleman
middleman init --template=blog
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:
identical .gitignore update config.rb exist source create source/2012-01-01-example-article.html.markdown create source/calendar.html.erb create source/feed.xml.builder update source/index.html.erb create source/layout.erb create source/tag.html.erb exist source/stylesheets exist source/javascripts exist source/images
Git:
git add --all git commit -m 'Adds blog template'
Membuat Artikel Baru
Sekarang Anda dapat membuat artikel baru melalui baris perintah:
middleman article 'My new fancy second article' #=> create source/2015-11-22-my-wonderful-second-article.html.markdown
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:
middleman #or middleman server
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:
rm source/layouts/layout.erb mv source/layout.erb source/layouts/
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":
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <%= stylesheet_link_tag "normalize", "all" %> <%= javascript_include_tag "all" %>
Yang terpenting, ini memastikan bahwa JS dan aset gaya Anda tersedia
Git
git rm source/layout.erb git add --all git commit -m 'Moves new layout into /layouts Adds asset links Removes old layout'
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:
gem 'middleman-livereload'
Di terminal:
bundle
Kemudian di config.rb:
#uncomment activate :livereload
Dan akhirnya perintah Git kami:
git add --all git commit -m 'Activates LiveReload'
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.
mkdir source/posts mv source/2012-01-01-example-article.html.markdown source/posts/
Kemudian kami menambahkan "/ posts" sebagai sumber untuk artikel blog. Di config.rb:
blog.sources = "posts/:year-:title.html"
Kemudian perintah Git kami:
git rm source/2012-01-01-example-article.html.markdown # Removes moved file from repo git add --all gco -m 'Adds new folder for posts and adds source in config.rb'
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:
middleman article 'My awesome 3rd article' # => create source/posts/2015-my-awesome-3rd-article.html.markdown
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:
gem "middleman-deploy"
Kemudian di terminal:
bundle
Kita perlu menambahkan blok deploy ke "config.rb":
activate :deploy do |deploy| deploy.method = :git deploy.branch = 'gh-pages' deploy.build_before = true end
Agar Laman GitHub dapat menemukan aset CSS dan JS Anda, kami harus mengaktifkan yang berikut di config.rb juga:
configure :build do activate :relative_assets end
Kemudian, buat repo di GitHub, tambahkan remote dan terapkan:
git remote add origin https://github.com/yourusername/repositoryname.git middleman deploy
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!
git add --all gco -m 'Adds setup for GitHub Pages deployment'
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:
@charset "utf-8";
Perintah Git:
git add --all git commit -m 'Removes unneccessary Middleman styles'
Selanjutnya kami ingin mengaktifkan beberapa opsi untuk mengoptimalkan kinerja di "config.rb":
configure :build do activate :asset_hash activate :minify_javascript activate :css activate :gzip end
Kemudian, sekali lagi, perintah Git:
git add --all git commit -m 'Activates performance optimizations'
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



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)”:
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta http-equiv='X-UA-Compatible' content='IE=edge;chrome=1' /> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <title>Blog Title</title> <link rel="alternate" type="application/atom+xml" title="Atom Feed" href="/feed.xml" /> <link href="stylesheets/normalize-6197e73d.css" rel="stylesheet" type="text/css" /><link href="stylesheets/all-0355b587.css" rel="stylesheet" type="text/css" /> <script src="javascripts/all-da39a3ee.js" type="text/javascript"></script> </head> <body> ...
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:

Pengaturan Bourbon
Untuk proyek ini saya ingin menggunakan tiga permata dari Bourbon:
- Bourbon
- Rapi
- Tajam
Mari tambahkan ke Gemfile dan bundel kami:
gem 'bourbon' gem 'neat' gem 'bitters'
Di terminal:
bundle
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".
cd source/styleheets bitters install
Lihatlah apa yang kita miliki setelah ini:
Screenshot

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”:
@import "grid-settings";
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”:
$column: 90px; $gutter: 30px; $grid-columns: 12; $max-width: 1200px; $visual-grid: true; $visual-grid-index: back; $visual-grid-opacity: 0.15; $visual-grid-color: red;
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”:
@charset "utf-8" @import 'bourbon' @import 'base/base' @import 'neat'
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:
git add --all git commit -m 'Sets up Bourbon and activates grid settings'
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:

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”:
@charset "utf-8" @import 'normalize' @import 'bourbon' @import 'base/base' @import 'neat' @import 'normalize'
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”:
<%= stylesheet_link_tag "all" %>
Lalu kemudin Git:
git rm source/stylesheets/normalize.css git add --all git commit -m 'Imports normalize partial properly'
Akhirnya, sebelum kita istirahat, kita harus menambahkan jQuery yang nanti akan kita butuhkan. Di Gemfile:
gem "jquery-middleman"
Kemudian juga di terminal:
bundle
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:
//= require jquery
Perintah Git kita:
git rm source/javascripts/all.js git add -all git commit 'Adds jQuery to the Mix Renames gobal js file to coffee'
Dan terapkan:
middleman deploy
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.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post