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

Cara Setup Website Statis 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

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

Ini adalah bagian dari rangkaian kecil tentang Middleman, "generator situs statis yang menggunakan semua cara pintas dan alat dalam pengembangan web modern". Dua tutorial pertama akan membahas dasar-dasarnya, setelah itu kita akan memasukkan apa yang telah kita pelajari ke dalam tindakan dengan sebuah practical project. Middleman memang membutuhkan penggunaan Ruby, tapi jangan ragu untuk membaca terus jika ini asing bagi Anda; seri ini benar-benar ramah buat pemula.

Middleman dan Halaman Statis

Apa saja akhir-akhir ini dengan situs statis? Nah, mereka cepat, cukup mudah untuk mengatur dan ringan. Karena Anda tidak menyajikan database apa pun yang terkait, situs statis cukup dapat diandalkan dan cepat. HTML, CSS dan jika dibutuhkan JS-itu saja.

Banyak orang menggunakan situs statis untuk membuat blog dan halaman pribadi mereka. Landing pages yang dilanda lalu lintas sangat banyak merupakan kandidat yang bagus. HealthCare.gov dari pemerintahan Obama terkenal menggunakan Jekyll, generator situs statis lainnya, untuk situs mereka. Jika Anda membutuhkan sesuatu yang cepat dan mudah, yang mampu membuat yang tidak biasa, situs statis bisa sangat menakjubkan. Terutama karena Anda dapat meng-host mereka secara gratis di GitHub Pages atau Heroku.

file

Diperdebatkan keseluruhan hipertensi situs statis dimulai beberapa tahun yang lalu ketika Jekyll datang. Tentu saja, situs statis setua yang pertama "Hello World!" Dari Sir Tim Berners-Lee namun selama 15 tahun terakhir, aplikasi berbasis database menjadi "semua yang penting". Beberapa tahun yang lalu, salah satu pendiri GitHub membutuhkan cara yang lebih baik untuk menulis blog dan dia datang dengan generator situs statis Jekyll untuk "Blogging like a hacker". Saya telah menggunakannya pada beberapa kesempatan dan hanya memiliki hal-hal baik untuk dilaporkan. Tim inti juga luar biasa. Bagaimanapun, untuk seri ini editor saya dan saya setuju akan lebih menarik untuk meliput Middleman. Mungkin adil untuk mengatakan bahwa Middleman sedikit kurang "sadar akan blog" tidak biasa, tapi tetap saja sama kuat dan berkualitas hebat.

file

Ruby

Middleman menggunakan Ruby, menawarkan serangkaian fitur yang cukup luas untuk membangun hal keren. Jika Anda pernah menggunakan Rails atau Sinatra Anda akan merasa mudah. Tampaknya Middleman dan Jekyll adalah pilihan yang masuk untuk situs statis di komunitas Ruby. Saya juga mendengar semakin banyak perancang berpendapat bahwa mereka suka menggunakannya untuk prototyping dan untuk membuat halaman pribadi mereka sendiri. Betapa banyak dari kerangka kerja situs statis ini adalah bahwa mereka cukup mudah digunakan.

Pada artikel ini saya akan berasumsi bahwa Anda setidaknya sedikit tertarik dengan Ruby, dan menginstalnya pada sistem Anda. Jika Anda memerlukan bantuan, lihat Ruby for Newbies: Installing Ruby and Getting Started oleh Andrew Burgess.

Mengetahui bagaimana menangani RubyGems juga diperlukan, dan, sekali lagi, Andrew Burgess' Ruby for Newbies: Working with Gems akan membantu Anda memulai jika diperlukan. Saya akan melakukan yang terbaik untuk tidak membahas masalah Anda dengan konsep pemrograman, tapi saya tidak akan membahas dasar-dasar pemrograman seperti perulangan, blok kode dan semacamnya. Bagi para pemula di antara Anda, jangan khawatir, Middleman tidak memiliki banyak bagian yang bergerak, dan saya akan menunjukkan betapa mudahnya untuk belajar.

Instalasi dan Persiapan

Jadi Anda punya Ruby dan RubyGems di bawah ikat pinggang Anda? Bagus, maka kita akan baik untuk pergi.

Buka terminal anda dan masukkan:

Jika Anda tidak diizinkan untuk melakukannya, Anda perlu menambahkan perintah dengan sudo dan memasukkan kata sandi admin sistem Anda. Setelah proses ini selesai, Anda akan bisa menggunakan beberapa perintah middleman sederhana melalui command prompt.

file

middleman init

Perintah ini memulai sebuah proyek baru. Anda harus memberikannya dengan nama aplikasi Anda, lalu tekan enter.

Ini juga membutuhkan argumen tambahan seperti template yang Anda inginkan. Hal ini membuat sangat berguna untuk menyesuaikan aplikasi Anda dengan template sejak awal, mengurangi sedikit tugas penyiapan berulang-ulang! Kita akan membahas lebih lanjut tentang template di tutorial selanjutnya.

middleman server

Middleman hadir dengan server lokal untuk pengembangan Anda. Memulainya memungkinkan Anda melihat situs Anda di http://localhost:4567/ **. Jika Anda memasukkan **middleman tanpa argumen tambahan, ini juga akan memecat server Anda. Matikan server Anda dengan CTRL-c.

membangun middleman

Setelah Anda memiliki sesuatu yang siap Anda pasang di server yang menghadap ke internet, Anda perlu membangun situs Anda. Ini berarti bahwa apapun yang telah Anda siapkan di folder /source Anda akan diproses dan output akhir akan menjadi output ke folder /build yang juga dibuat oleh middleman untuk Anda. Semua file Anda yang menggunakan preprocessors seperti Slim, Haml, Sass, CoffeeScript akan diproses menjadi rekan masing-masing dan dimasukkan ke /build directory Anda.

middleman deploy

Setelah situs Anda siap menghadapi internet, perintah ini akan menyebarkan folder /build Anda ke server web Anda. Setiap pembaruan yang Anda lakukan akan melalui proses ini.

livereload

Bantulah diri Anda sendiri segera dan aktifkan LiveReload untuk menyegarkan halaman Anda secara otomatis setelah perubahan pada file HTML, Sass, atau JS Anda. Ini adalah kenyamanan selama pengembangan-Anda tidak akan menyesalinya! Middleman hari ini menawarkan LiveReload di luar pilihan-Anda hanya perlu menambahkan

untuk Gemfile Anda dan hapus tanda komentar pada baris berikut di config.rb:

Lalu kamu bundle Middleman

Source vs. Build vs. Deploy

Jadi mari kita mulai dengan /source dan /build folder. Antara mereka adalah garis pemisah yang memisahkan bagian pengembangan dan produksi Anda. Saat Anda menggunakan server web lokal untuk pengembangan, /source digunakan untuk menayangkan aplikasi Anda. Folder / build digunakan oleh server non-lokal untuk melayani halaman statis Anda. /build akan dibuat setiap kali Anda menggunakan middleman build di command line Anda. Karena itu, Anda harus berhati-hati agar tidak sengaja menghabiskan waktu Anda coding in /build karena pekerjaan ini akan hilang setelah proses build. Secara umum, semua perkembangan Anda seharusnya terjadi di /source.

Proses pembuatan membuat situs statis yang Anda inginkan untuk server host Anda. Setiap file di folder /source anda akan diproses dan kemudian disimpan di /build. Seperti yang telah disebutkan sebelumnya, Sass, CoffeeScript, Slim / Haml dan partials Anda akan diproses menjadi rekan-rekan mereka yang dapat diandalkan. Semua layout akan disatukan juga. Jika Anda telah mengaktifkan kompresi untuk file-file ini, inilah saat mereka mendapatkan "uglified" juga. Selama seluruh shabang ini, folder /build memperbarui dengan menyingkirkan file yang tidak memiliki referensi /source lagi. Saat middleman build, perubahan yang Anda buat pada file di /source akan memicu regenerasi file statis baru yang sesuai untuk /build.

Proses penyebaran adalah langkah terakhir. Dengan direktori /build di tempat Anda memiliki semua yang Anda butuhkan untuk menempatkan aplikasi Anda di luar sana. Rekomendasi saya adalah melakukan ini lebih awal agar tidak mengalami kejutan.

Situs Baru

Mari kita periksa struktur dasar aplikasi Middleman. Komponen utamanya adalah:

  • /images
  • /javascripts
  • /layouts
  • /stylesheets
  • config.rb
  • File index.html.erb
  • Sebuah Gemfile

Seperti yang bisa Anda lihat di bawah, Jazz yang paling masuk ke folder /source. Yang saya suka tentang aplikasi Middleman adalah organisasi sederhana mereka. Menavigasi struktur dokumen lurus ke depan, bahkan untuk pemula.

file

Jika Anda tidak puas dengan penamaan beberapa folder ini, Anda dapat mengubahnya di konfigurasi Anda (config.rb). Nama yang sama akan digunakan untuk anda selesai folder /build.

Setelah server Anda berjalan, Anda dapat melihat opsi lain untuk mengkonfigurasi Middleman di browser Anda: http://localhost:4567 __ middleman/config/. Tidak semua dari mereka mungkin masuk akal, atau bahkan penting untuk diketahui pada tahap ini. Berikan sekilas dan mental bookmark benar-benar cukup untuk saat ini.

Yang Anda jalankan dari middleman build Anda bisa mengintip folder /build. Semua file HTML, CSS, dan JS biasa yang Anda butuhkan untuk menyajikan situs statis Anda.

file

Itu cukup banyak yang perlu Anda ketahui untuk memulai dan mengorientasikan diri Anda.

Saran: Pada titik ini akan sangat masuk akal jika Anda mulai menyusun aplikasi tes sendiri. Lihatlah ke sekeliling dan rasakan bagaimana segala sesuatunya diatur dan bagaimana potongannya saling cocok.

Front Matter

Istilah Front Matter berasal dari penerbitan buku, dan ini mengacu pada informasi di depan sebuah buku. Dalam kasus file situs statis, ini mengacu pada blok informasi yang disimpan di YAML. Setiap halaman memungkinkan Anda memiliki variabel yang dapat disimpan tepat di bagian atas di bagian depan dan mengikuti tiga tanda hubung. Sebagai contoh, inilah bagian atas file fiktif yang disebut: some.html.erb.

Variabel YAML terlihat seperti hash. Anda dapat mengakses data lokal tersebut melalui objek current_page:

Anda sering menggunakan ini untuk menyimpan tag, tanggal, judul dan opsi konfigurasi-seperti tata letak yang ingin Anda gunakan untuk halaman tertentu. Front matter adalah YAML store untuk variabel Anda Anda juga bisa menggunakan JSON jika Anda lebih suka itu. Anggap saja sebagai tempat untuk meletakkan data yang biasanya berada dalam database. Saya akan membahas berbagai pilihan dan kegunaan saat mereka muncul.

ERB

Ini adalah kesempatan yang baik untuk secara singkat membahas ERB. ERB memungkinkan Anda membuat template dinamis yang memiliki kode di dalamnya. Nama file Anda harus memiliki ekstensi .erb dan Anda perlu memasukkan kode Anda ke dalam dua "containers" berikut.

Untuk kode yang dieksekusi tapi tidak "printed" ke halaman yang Anda gunakan ini:

Anggap saja sebagai "computation only".

Jika tidak, untuk nilai pengembalian yang ingin Anda lihat muncul "printed" di halaman, Anda juga perlu menambahkan tanda sama dengan itu. Itu dia.

Layouts

Konsep layout dan partial sangat erat kaitannya. Biarkan saya memberi Anda sedikit penjelasan jika Anda belum bermain dengan Rails, Sinatra atau yang serupa sebelumnya. Saya pikir saya harus mulai dengan layouts terlebih dahulu.

Tata letak memberi Anda struktur untuk berbagi markup umum di antara halaman yang berbeda-termasuk halaman "family" yang sama. Ini adalah alat untuk menghindari duplikasi dan mempercepat pekerjaan Anda. Alih-alih menulis kerangka HTML yang sama di semua tempat Anda menyusun tata letak untuk kasus penggunaan tertentu. Contoh populer adalah dua tata letak yang berbeda untuk admin dan pengguna "normal". Mereka biasanya memiliki pengalaman yang sangat berbeda melihat halaman "sama".

Saat Anda memulai aplikasi middleman sederhana, Anda akan secara otomatis mendapatkan file layout.erb di source/layouts. Perhatikan bahwa file ini diakhiri dengan .erb dan bukan .html.erb. Layouts tidak boleh diberikan ke HTML dan Middleman akan menimbulkan kesalahan jika Anda membuat layouts dengan .html extension. Jika Anda menggunakan bahasa template yang berbeda seperti Slim atau Haml, layouts bisa jadi extensions mereka. Seperti yang disarankan, Anda harus meletakkan semua layouts Anda ke folder /layouts di source.

Berikut adalah contoh source/layouts/layout.erb:

Layout standar ini cukup barebones, namun menyediakan semua yang Anda butuhkan untuk memulai. Mari kita lihat:

  • Sedikit informasi.
  • Judul halaman dinamis yang membaca data dari halaman depan setiap halaman.
  • Methods helper yang meliputi style dan file JavaScript.
  • Dan akhirnya tag body untuk membungkus konten Anda yang "yielded" ke dalam layout melalui <% = yield%>.

Dan dari situ Anda bisa menyesuaikan layout ini sesuai kebutuhan Anda. Salah satu aspek yang berpotensi membingungkan bagi pemula Ruby adalah keyword yield - ini hanya berarti bahwa ia melewati seluruh konten yang Anda buat. Dengan kata lain, yield adalah tempat bagi views Anda yang akan diberikan ke dalamnya. Jika konsep itu benar-benar asing bagi Anda, ingatlah untuk tidak menyentuhnya sekarang atau aplikasinya mungkin tidak sesuai harapan. Kapan pun Anda membuat layouts Anda sendiri, memiliki yield di sana sangat penting, Jika tidak, konten Anda tidak akan ditampilkan. Anda akan menguasainya dalam waktu singkat, saya janji.

Jika Anda membuat layouts yang berbeda, Anda dapat menentukan melalui front matter layout yang ingin Anda gunakan berdasarkan halaman demi halaman. Katakanlah Anda memiliki layout khusus untuk menyambut pengguna yang sedikit lebih banyak. Di sini kita memiliki welcome.html.erb.

Atau Anda bisa menentukan layouts di file config.rb Anda.

Jika Anda ingin menghindari melakukan ini untuk setiap halaman secara manual, Anda bisa mengumpulkannya di satu tempat. Sekali lagi, di config.rb, Anda menggunakan wildcard (**\***) untuk mengumpulkan sekumpulan halaman yang menggunakan layout yang sama.

Saya pribadi suka memasang info layout ini di front matter. Ini sangat eksplisit dan tidak terlalu berulang. Jika saya memiliki banyak dari mereka, saya lebih suka menggunakan pendekatan wildcard.

Partials

Partials memberi Anda sarana untuk merangkum kode tampilan yang dapat Anda gunakan kembali di manapun Anda butuhkan. Anda hanya perlu memberi tahu view Anda di mana memasukkan partial dan hasilnya akan benar di sana. Partials adalah teknik yang sangat umum untuk DRYing up kode anda.

Contoh yang sangat umum termasuk navbars, footer dan bagian kepala, yang tidak ingin Anda duplikat di semua tempat. File untuk partials dimulai dengan underscore. Sebagai permulaan, Anda bisa menempatkannya di bawah /source. Tata letak Anda adalah tempat yang baik untuk memulai dengan mengumpulkan kode untuk diekstrak menjadi partials. Kapan pun Anda menemukan sesuatu yang perlu Anda gunakan kembali, partials akan menjadi teman yang berguna.

Berikut adalah contoh /source/layouts/layout.erb.

Dan parital source/_head.html.erb:

Terkadang Anda ingin mengekstrak secara partial bukan hanya untuk menghindari duplikasi namun untuk membuat views Anda lebih mudah dibaca. Seiring waktu, bagian kepala terkenal karena cukup dimuat, misalnya. Di dalamnya Anda dapat memiliki partials lain yang hanya berhubungan dengan file style atau JS.

Anda akan menyadari bagaimana partial yang nyaman sekali Anda dapat menerapkan perubahan melalui keseluruhan aplikasi Anda-di manapun Anda termasuk partial. Tidak perlu pergi melalui sekelompok file untuk menerapkan perubahan yang sama berulang-ulang.

Helpers

Helpers adalah methods yang dapat Anda gunakan untuk banyak tugas sehari-hari dalam views Anda. Saya percaya ini dipelopori di Rails dan cepat menjadi dimana-mana untuk pengembangan web modern. Anda telah melihat helpers yang menyertakan stylesheets dan file JavaScript. Ada lebih banyak dari mana ini datang dari sekalipun.

Berikut ini /source/_head.html.erb partial lagi:

Helpers ini dimaksudkan untuk membantu Anda menulis kode tampilan yang lebih bersih dan lebih ringkas. Dalam daftar helpers di bawah ini, Anda akan menemukan banyak barang berguna yang tidak biasa. Anda tidak dibatasi oleh ini sekalipun. Tuliskan method helper Anda sendiri di config.rb atau kumpulkan secara terpisah di module.

Ia bekerja seperti ini: Di config.rb Anda, Anda membuat blok helpers dan memasukkan semua method helper Anda ke dalam. Itu dia. Sekarang views Anda memiliki akses ke mereka.

Contoh: /source/_navbar.erb.

Dan di config.rb:

Helpers ini mungkin akan berguna saat saya ingin prototipe sesuatu dan ingin menghindari penyiapan gambar dummy dan teks sendiri. Secara keseluruhan, Anda harus melihat kode yang ingin Anda buat lebih ringkas atau Anda duplikat berulang-ulang. Helpers sering menjadi baik untuk itu.

Di dalam helpers kustom ini saya menggunakan helpers Middleman lainnya untuk membuat tag img melalui image_tag dan juga objek lorem untuk beberapa nama pengguna dan placeholder gambar acak. Hal ini lorem dapat sedikit disesuaikan dengan kebutuhan Anda.

Dengan menggunakan pendekatan modul, Anda memerlukan file terpisah untuk modul Anda. Buat direktori "lib" di folder root Anda (tingkat yang sama seperti "source" dan "build") dan buat file untuk helpers Anda.

Di sini kita memiliki /lib/helpers.rb:

Kemudian Anda harus membiarkan file config.rb Anda tahu bahwa Anda ingin menggunakan helpers ini:

Boom! Kamu siap untuk melanjutkan. Secara umum, aku akan pergi dengan pendekatan modul segera. Rasanya jauh lebih bersih untuk saya, plus Anda menghindari mencemari file config Anda dengan terlalu banyak kode.

Saya juga ingin melihat hasil helpers dan content_for secara khusus, karena bisa sedikit membingungkan bagi pemula. Ini memungkinkan Anda menangkap sekumpulan konten yang dapat Anda hasilkan / gunakan ulang di tempat lain. Ini semacam miniatur. Saya secara pribadi akan pergi sebagian besar waktu, tapi sesekali ketika Anda ingin menerapkan perubahan on-off lebih banyak operasi ini sangat berguna untuk diketahui:

Inilah index.html.erb:

Dan admin_index.html.erb:

Lalu di layout.erb:

content_for?

Kuncinya adalah menggunakan yield_content yang menempatkan konten yang dikumpulkan dari masing-masing halaman ke dalam tata letak-jika ditemukan. Tidak perlu menggunakannya hanya dengan layout saja. Bila Anda perlu membuatnya sedikit lebih terlibat, gunakan content_for? untuk memeriksa blok konten tertentu sebelum Anda memasukkannya. Ini sangat berguna bila Anda ingin membuat adaptasi kecil untuk bagian yang sedikit berbeda sedikit. Itu bagus bahwa Anda dapat menyimpan konten ini sedikit seperti konfigurasi pada halaman yang relevan itu sendiri dan "activate" hanya jika diperlukan. Anda mungkin tidak terlalu pintar dengan hal-hal ini.

link_to

Sebuah kata tentang helper link_to yang saya gunakan di atas. Ini mungkin yang paling sering Anda hadapi. Anda pada dasarnya memberi method tersebut sebuah nama dan sebuah url atau path yang harus ditunjukkan oleh link ini. Saya mengganti bagian terakhir dengan placeholder untuk singkatnya.

Berikut adalah peninjauan tentang helpers mana yang Anda inginkan. Saya pikir namanya kebanyakan cukup jelas dan saya seharusnya tidak membahas apa yang masing-masing bisa membantu Anda. Buat mental bookmark dari apa yang ada di luar sana dan periksa kembali dokumentasi jika mereka memberi Anda masalah.

Tag Helpers

  • tag
  • link_to
  • input_tag
  • favicon_tag
  • stylesheet_link_tag
  • javascript_include_tag

Helpers Output

  • content_for
  • content_for?
  • capture_html
  • yield_content
  • concat_content

Dari Helpers

  • form_tag
  • label_tag
  • select_tag
  • submit_tag
  • field_set_tag
  • text_field_tag
  • check_box_tag
  • password_field_tag

Format Helpers

  • truncate
  • pluralize
  • word_wrap
  • escape_html
  • simple_format
  • js_escape_html
  • time_ago_in_words
  • distance_of_time_in_words

Lorem Helpers

  • lorem.date
  • lorem.word
  • lorem.name
  • lorem.email
  • lorem.image
  • lorem.words
  • lorem.sentence
  • lorem.last_name
  • lorem.paragraph
  • lorem.first_name
  • lorem.paragraphs

Pemikiran Final

Saya percaya ini adalah dasar yang baik untuk mulai bermain-main dengan aplikasi mainan. Anda harus memiliki rasa yang baik tentang apa yang ditawarkan Middleman dan bagaimana menavigasi framework. Pada bagian selanjutnya dari rangkaian ini, kita akan membahas lebih jauh dan sedikit terjun dalam framework ini. Tim Middleman telah benar-benar melakukan pekerjaan yang hebat dengan merancang API dan menjaga hal-hal sederhana.

Mudah-mudahan Anda bisa melihat sekarang mengapa framework ini semakin populer dan mengapa ini adalah pilihan yang tepat untuk semua jenis proyek statis.

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.