Proyek: Membangun Situs Web Lengkap dengan 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:

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.