7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Octopress

Memulai dengan Octopress

Scroll to top
Read Time: 14 mins

Indonesian (Bahasa Indonesia) translation by Percahya Depit Putra Sadewa (you can also view the original English article)

Octopress adalah kerangka kerja blogging statis yang dibangun di atas Jekyll. Ia menggunakan skrip untuk membuat file statis untuk disebarkan ke server.

octopress-headeroctopress-headeroctopress-header

Jangan Khawatir...

... kami akan menjelaskan semuanya di sini. Namun, jika Anda belum pernah menyentuh command line, Anda mungkin ingin sedikit primer terlebih dahulu. Lihat panduan ini, yang menjelaskan beberapa perintah dan fungsi dasar.


Oke, jadi ini Static

Browser membaca HTML, CSS, dan JavaScript secara asli. Setiap bahasa lain digunakan untuk menghasilkan ketiga jenis file ini. Situs static dibuat dari file statis berkode keras yang tidak bergantung pada proses server apa pun (tidak seperti PHP atau situs lain yang dibuat di sisi server). Jekyll, kerangka kerja yang mendasarinya, bergantung pada lingkungan lokal editor konten untuk menghasilkan file statis yang nantinya akan digunakan.

Tunggu... Apa?

Katakanlah, misalnya, Anda memiliki lima posting blog di blog Wordpress Anda. Ketika Anda mengunjungi https://yoursite.com, kutipan dari lima posting ini muncul di halaman rumah Anda. Anda mengklik link untuk membawa Anda ke halaman posting lengkap. Masing-masing halaman ini disajikan ke browser Anda sebagai HTML, ditata oleh CSS; Anda mungkin atau mungkin tidak memiliki JavaScript yang membantu mendefinisikan beberapa perilaku interaktif.

Halaman-halaman di blog Anda yang bertenaga Wordpress dibangun dengan cepat; query database dijalankan untuk mendapatkan potongan-potongan yang berbeda, seperti judul, konten, atau permalink. Ini kemudian dikembalikan dan diproses oleh PHP untuk setiap permintaan (dengan asumsi Anda tidak memiliki plugin caching yang diinstal).

Dengan Jekyll, semuanya berbeda.

Bagaimana Mereka bisa Berbeda?

Senang anda bertanya. Jekyll melakukan semua ini di komputer Anda, sebelum file-file tersebut naik ke server. Ia membaca beberapa konfigurasi dan templat lokal, kemudian membangun semua HTML, CSS, dan JavaScript langsung di komputer lokal Anda, sehingga server Anda tidak perlu. Ini membuat administrasi server Anda menjadi lebih mudah, lebih aman, dan lebih cepat.

Jadi, Mengapa Semua Orang Tidak Menggunakannya?

Ada beberapa jawaban untuk pertanyaan itu. Di sini ada tiga:

  1. ini tidak menyelesaikan setiap masalah. Terkadang, Anda memerlukan konten berbasis basis data, yang selalu berubah.
  2. Tidak semua orang memahami cara menerapkan situs semacam ini. Secara umum, situs statis untuk pengembang. Pengguna rata-rata tidak memiliki pengetahuan yang cukup untuk membangun dan menyebarkan hal semacam ini.
  3. Itu disalahpahami. Banyak orang tidak memahami manfaat dan kekuatan situs yang dihasilkan secara statis.

Jadi masalah apa yang tidak dipecahkan oleh pendekatan ini? Yah, misalnya, jika situs Anda bergantung pada data buatan pengguna, situs yang dihasilkan secara statis, secara keseluruhan, tidak akan memberikan banyak ruang untuk itu. Tentu saja, jika Anda hanya mengandalkan database untuk komentar, Anda dapat dengan mudah memindahkannya ke sesuatu seperti Disqus. Jika Anda mengandalkan data langsung yang tidak dapat ditarik di bagian depan melalui JavaScript, maka situs statis mungkin tidak sesuai dengan kebutuhan Anda.

Kapan kah cara Kerja Terbaik?

Skenario terbaik: blog atau situs konten-sentris yang dipertahankan pengembang web. Anda mungkin telah menangkap itu dengan tagline Octopress, "Kerangka blogging untuk peretas."

webuildenvatocomwebuildenvatocomwebuildenvatocom

webuild.envato.com - dibangun dengan Octopress, dikelola oleh tim Envato dev

Karena Anda akan melakukan beberapa pekerjaan ringan di terminal, Octopress dan Jekyll umumnya tidak cocok untuk pencipta konten yang tidak berorientasi teknologi. Namun, jika Anda bersedia menghabiskan cukup waktu untuk membaca posting ini, Anda akan cocok untuk situs yang didukung Octopress.


Rahasia sebenarnya dari Web

Memahami bahwa apa yang dilihat oleh semua pengguna Anda adalah HTML, CSS, dan JavaScript adalah rahasia sebenarnya dari web. Oleh karena itu, menguji situs Octopress Anda secara lokal tidak memerlukan instalasi server Apache, PHP atau MySQL. Yang Anda butuhkan hanyalah browser yang dapat menjalankan file lokal.

Bagian Tricky Nomor 1: Ruby

Setiap hal baik datang dengan harga; Anda harus memiliki Ruby versi 1.9.3, ditambah Jekyll dan Bundler Ruby Gems, serta Git. (Meskipun Git tidak diperlukan, mungkin juga begitu.) Setelah potongan-potongan ini dipasang, Anda siap untuk melompat ke dalam pengembangan. Untuk menginstal Git, buka di sini.

Instruksi yang mengikuti adalah untuk Mac; perintah serupa dapat ditemukan untuk Windows melalui manajer versi Ruby untuk windows yang disebut pik.

Pertama, periksa untuk melihat versi Ruby yang telah Anda instal di komputer Anda dengan menjalankan ruby -v. Jika versinya tidak 1.9.3, lanjutkan dengan instruksi ini. Anda dapat melompat ke "Tricky Part Numer 2: Gems" jika Anda sudah memiliki 1.9.3.

Instalasi Ruby versi 1.9.3 relatif mudah dilakukan menggunakan RVM. RVM, atau Ruby Version Manager, memungkinkan Anda menginstal beberapa versi Ruby di sistem Anda tanpa harus menghapus versi sebelumnya. Instruksi pemasangan cepat untuk RVM dan Ruby 1.9.3 adalah sebagai berikut:

Catatan: jika Anda memiliki masalah terkait dengan gcc (atau "koleksi kompiler gnu", yang diperlukan untuk membangun Ruby dari sumbernya), mungkin membantu menjalankan perintah berikut.

Atau, menginstal Xcode harus membantu menyelesaikan banyak masalah untuk pengguna Mac yang terkait dengan GCC. Lihat thread ini di GitHub untuk beberapa informasi lebih lanjut tentang subjek.

Untuk memastikan Ruby 1.9.3 telah berhasil diinstal, jalankan rvm list. Setelah proses ini selesai, Anda dapat menjalankan yang berikut ini untuk mengatur ruby versi default sistem Anda menjadi 1.9.3:

Untuk memeriksa dan memastikan 1.9.3 telah dipilih, sekali lagi Anda dapat menjalankan ruby -v. Ini akan mencetak versi Ruby saat ini.

Bagian Tricky Nomor 2: Gems

RubyGems adalah pengelola paket kode untuk bahasa pemrograman Ruby, dan salah satu alasan utama komunitas Ruby telah mendapatkan reputasi sebagai orang yang membantu dan bersatu. Ini memungkinkan pengguna untuk dengan mudah menginstal paket kode sumber terbuka langsung dari baris perintah. Permata ini disimpan di lokasi repositori resmi.

Untuk menginstal Ruby gems, jalankan perintah berikut dari baris perintah. (Jika Anda belum menginstal RubyGems, lakukan dengan mengikuti petunjuk di sini sebelum menjalankan perintah ini. Anda dapat memeriksa untuk melihat apakah Anda telah menginstal RubyGems dengan which gem yang mana dari baris perintah, yang akan mencari program eksekusi gem yang digunakan untuk menginstal permata.)

Ini akan menarik permata Jekyll dan Bundler, dan menyimpannya di lokasi di komputer Anda yang secara otomatis digunakan Ruby sebagai perpustakaannya, yang disebut "gemset". Jekyll adalah generator situs statis yang kuat di belakang Octopress; Bundler adalah format spesifikasi pemasangan permata yang membuat ketergantungan permata lebih mudah dipuaskan. Dengan kata lain, ini memungkinkan Anda mencantumkan permata yang Anda butuhkan dalam file sederhana bernama Gemfile, dan menjalankan bundel install di direktori yang sama untuk mendapatkan semua permata yang terdaftar (bukan menginstalnya dengan tangan satu per satu).


Let's Roll!

Pertama, Anda akan ingin menarik Octopress ke dalam direktori tempat Anda menyimpan situs. Tidak seperti kebanyakan situs berbasis-basis data, situs langsung Anda biasanya akan mencerminkan situs lokal Anda, dalam konten dan presentasi. Kami akan menyalin repositori git remote ke folder bernama "mysite" di dalam direktori Sites. (Ini adalah default yang bagus, terutama untuk pengguna Mac.)

Setelah ini selesai, Anda akan ingin mengubah ke direktori dan menginstal bundel.

Ini akan menginstal koleksi gems, jika Anda belum menginstalnya di komputer Anda.

octopress-mysiteoctopress-mysiteoctopress-mysite

Isi direktori Anda akan terlihat seperti ini, pada poin ini ..

Selanjutnya, Anda akan ingin menginstal tema Octopress default.

octopress-mysite-themeoctopress-mysite-themeoctopress-mysite-theme

Isi direktori Anda, ditambah file tema

Perlu diketahui: Rake adalah Ruby script runner. dibaca dari "Rakefile", yang berisi instruksi untuk perintah rake.


setting Konfigurasi Anda

Situs Octopress memiliki gambaran menyeluruh tentang konfigurasi blog, yang ditemukan di _config.yml. Lihat disini. Inilah contohnya:

Ada juga sejumlah plugin yang tersedia, dan banyak lagi konfigurasi untuk Jekyll yang bersifat opsional; kita tidak akan menutupi semuanya, karena kita hanya berusaha turun dari tanah dan berlari.


Third-Party Settings

Pengaturan pihak ketiga tersedia untuk diisi dalam file _config.yml; ini dievaluasi pada saat situs dikompilasi dan memungkinkan integrasi yang mudah dengan layanan eksternal. Sebagai contoh, berikut ini adalah integrasi GitHub sederhana:

Catatan: semua ini sudah ditambahkan ke file _config.yml; cukup isi untuk memanfaatkan fitur bawaan.


Oke, saya Siap Menulis!

Baik! Anda dapat mulai menulis posting dengan sangat cepat. Sintaks untuk membuat posting (per dokumen) sederhana:

Catatan: jika Anda menggunakan ZSH, Anda perlu memeriksa perbaikan ini di GitHub, dan menambahkan alias ke file zshrc Anda.

octopress_mysite-postoctopress_mysite-postoctopress_mysite-post

mysite/source/_posts/2013-03-27-some-awesome-title.markdown

Ini membuat file untuk posting Anda di direktori source / _posts Anda. Secara default, posting akan dibuat sebagai file penurunan harga. Nama posting akan mendefinisikan url (ini adalah hal yang baik untuk SEO, ngomong-ngomong). Jika Anda menavigasi ke file yang baru dibuat, Anda akan melihat beberapa materi depan YAML depan. Di sini, Anda dapat menambahkan satu atau beberapa kategori. Sebagai contoh:

Anda kemudian dapat menambahkan konten Anda di bawah masalah depan.


See it Come Alive!

Untuk melihat posting blog baru Anda, jalankan pratinjau rake pertama, kemudian arahkan browser Anda ke localhost: 4000. Ini akan menampilkan posting Anda di halaman indeks!

octopress-mysite-localhostoctopress-mysite-localhostoctopress-mysite-localhost

Klik di sekitar antarmuka untuk merasakan antarmuka dan fitur-fiturnya. Catatan: tema default responsif! Dalam waktu yang sangat singkat, Anda telah menjalankan blog statis.

Buat Halaman

Untuk membuat halaman (bukan postingan), jalankan sesuatu seperti berikut ini.

octopress-mysite-aboutoctopress-mysite-aboutoctopress-mysite-about

mysite/source/about/index.markdown

Ini membuat halaman di source/ about/ index.markdown. Anda juga dapat menjalankan:

Yang akan memilih .html filetype bukannya penurunan harga. Di dalam halaman ini, Anda dapat melakukan pengeditan dengan cara yang sama seperti posting.

Buat Tautan Eksternal

Ketika Anda membuat posting, Anda dapat menautkannya langsung ke halaman eksternal, mirip dengan halaman yang terhubung ke plugin Wordpress (tetapi jauh lebih sedikit rumit)! Cukup atur materi depan yaml untuk menyertakan yang berikut:

Oke, Ini Bekerja - tetapi bagaimana Semua Karya Penyihir Ini, Tepatnya?

Pertanyaan bagus lainnya. Anda sedang dalam proses.

Seperti yang kami katakan sebelumnya, semua yang dibaca browser adalah HTML, CSS, dan JavaScript (Anda tidak menggunakan Flash atau teknologi eksternal lainnya). Ketika mengandalkan implementasi berorientasi server, HTML, CSS, dan JavaScript dapat berubah saat pengguna memuat halaman; permintaan ke server menjalankan beberapa kode untuk membuat HTML dengan cepat berdasarkan apa pun yang dikembalikan kode.

Misalnya, dengan situs seperti Wordpress, tautan ke laman dan pos mengarah ke tata letak web yang menarik informasi yang tepat dari database MySQL saat pengguna mengakses situs.

Octopress (dan lebih khusus lagi, Jekyll) menjalani proses yang sangat mirip, tetapi alih-alih melakukannya berdasarkan permintaan, mereka melakukannya sekali saja, di komputer lokal Anda.

Begini cara kerjanya. Ada tiga bagian dasar untuk situs Jekyll: konfigurasi, tata letak / termasuk, dan tulisan / halaman. Jika Anda berasal dari dunia Wordpress, ini dapat dipetakan ke opsi, file tema, dan database, masing-masing (dengan beberapa garis kabur di sana-sini).

octopress-basic-confoctopress-basic-confoctopress-basic-conf

Ketika Jekyll berjalan melalui proses menghasilkan situs, itu dimulai pada file indeks, dan membangun semua halaman tertaut yang ditentukan oleh tata letak. Sepanjang buildout, Jekyll menggunakan konfigurasi yang ditentukan oleh file _config.yml, serta materi depan YAML di posting, halaman, dan tata letak. Jekyll menggunakan pos statis dan file halaman sebagai kumpulan objek enumerable, dan mengisi konten ke semua tata letak terkait.

Hasil akhir adalah serangkaian file sumber yang dapat dipertahankan, DRY dalam direktori SOURCE dan konten statis yang dihasilkan seragam dalam direktori PUBLIC.

Folder not so dry Publik

Folder publik akan diisi dengan setiap halaman situs. Ini berarti bahwa setiap kali Anda melihat halaman apa pun, apakah itu daftar posting yang dikecualikan, 404, atau halaman tentang, itu sebenarnya adalah satu halaman HTML yang dapat Anda lihat langsung di folder publik.

octopress-mysite-publicoctopress-mysite-publicoctopress-mysite-public

Dengan melihat sekilas folder publik akan menunjukkan beberapa hal. Pertama, struktur direktori mudah dinavigasi, sebagai default server statis bertenaga Apache akan melayani di url yang setara dengan struktur direktori. Pengamatan kedua adalah bahwa setiap dua file HTML yang diberikan sebagian besar memiliki konten yang sangat mirip; ini adalah hasil dari konten header, footer, dan sidebar duplikat yang ditarik dari Layouts dan includes, yang sepenuhnya dapat diterima. Alasannya adalah sepenuhnya dapat diterima adalah sederhana: konten dalam direktori publik tidak dikelola langsung oleh Anda, melainkan melalui tindakan terprogram, dan karena itu DRY tidak berlaku, karena ini tidak mempengaruhi pemeliharaan atau kinerja situs bahkan sedikit.


Menyesuaikan Layout dan Desain

Sebagai seorang desainer, ini akan menjadi bagian yang Anda tunggu-tunggu.

Layout Customization

Octopress tentu dibangun dengan blogger dalam pikiran; dengan beberapa informasi yang sangat langsung tentang bagaimana Anda harus mengubah tema, mereka telah menjelaskan cara menggunakan file yang ditemukan di Source/custom dalam panduan ini. Panjang dan pendeknya: Octopress dibuat sesuai posting blog dan halaman, dan konten kustom untuk sidebar dan footer. Namun, Anda dapat dengan mudah memperpanjang sidebar. Pola yang didukung adalah untuk membuat file html baru di dalam source / custom / asides / dengan konten yang mengikuti format ini:

Anda juga dapat dengan mudah mengubah header dan footer di source / custom. Ini memudahkan untuk menambahkan lebih banyak file JS / CSS, mengubah atau menghapus font Google default, dan sebagainya.

Design

Octopress dibangun dengan SCSS. Desain dapat dimodifikasi / diganti menggunakan file sass / custom / _styles.scss. File ini termasuk yang terakhir. Untuk benar-benar memahami cara membuat gaya Octopress, kita harus terlebih dahulu menyelami inti template.

Catatan: Jangan mengubah template inti kecuali Anda benar-benar yakin dengan apa yang Anda lakukan, atau Anda siap memecahkan sesuatu. Ini adalah file yang menentukan build akhir dari situs statis Anda!


Menggali ke dalam Core

Octopress hadir dengan kemampuan untuk berpindah tema dengan mudah; secara efektif salinan dari direktori sumber. Di direktori .themes, kita melihat tema "klasik", yang diinstal ketika kami rake install. File source untuk tema disalin ke direktori tingkat atas dan digunakan untuk membangun situs statis.

Di dalam folder source, kita bisa melihat beberapa folder tema yang jelas.

octopress-mysite-sourceoctopress-mysite-sourceoctopress-mysite-source

File-file di dalam folder _layouts mendefinisikan tata letak umum dari posting, halaman, indeks kategori, dan "default", yang merupakan template fallback untuk menangkap apa pun yang bukan salah satu dari tiga yang pertama. Folder _partials memungkinkan hanya sebagian potongan file, seperti navigasi atau hanya artikel, untuk disertakan sendiri. File-file ini adalah template HTML berbasis-cair, yang memungkinkan data dilewatkan. Data ini berasal dari materi depan YAML yang ditetapkan di berbagai tempat di seluruh situs. Misalnya, perhatikan tag cair dari _partials / article.html di bawah ini.

Tag ini mengatakan yang berikut:

Jika pengguna telah menetapkan nama pendek disqus di konfigurasi situs utama, dan komentar diaktifkan untuk halaman atau posting ini, dan situs dikonfigurasi untuk menunjukkan jumlah komentar disqus, kemudian gulirkan tautan pada baris berikutnya. Tautan akan mengarah ke root_url plus post.url jika kita berada di halaman indeks; jika tidak, ia akan mengarahkan langsung ke #disqus_thread, div yang menyimpan komentar.

Memahami hal ini, kita dapat memahami cara menemukan dan mengulang ulang atau memperbaiki bagian tertentu dari situs. Misalnya, jika kami ingin menambahkan kelas ke pos yang merupakan tautan eksternal langsung, kami dapat melakukan sesuatu seperti ini.

Ini hanya memeriksa untuk melihat apakah page.external-link atau post.external-link ada. Jika mereka melakukannya, kita menambahkan div ekstra ke elemen div.entry-content. Ada banyak yang bisa Anda manfaatkan dengan konfigurasi depan-materi YAML sederhana. Pastikan untuk bereksperimen dan menghasilkan solusi baru untuk masalah baru!


Learn More, do More!

Ada begitu banyak kekuatan di Octopress! Lihat dokumentasi lengkap lengkap dan jangan lewatkan daftar ekstensif plugin Octopress pihak ketiga ini; dengan hampir enam puluh plugin, mengintegrasikan dengan layanan pihak ketiga dapat memecahkan banyak permintaan dan masalah implementasi umum.

Berikan komentar di bawah ini dengan ide-ide untuk fitur lain yang juga Anda sukai! Dan ingat, cara terbaik untuk belajar adalah mengotori tangan Anda. Dapatkan ke dalam dokumen dan kode; memecahkan sesuatu, lalu memperbaikinya. Belajar sambil jalan!

Tanyakan di Sini

Memiliki masalah pemahaman? Membutuhkan lebih banyak panduan, atau mencari seseorang untuk melihat kode Anda dan menunjukkan di mana semuanya berjalan salah? Tuts + adalah tempat yang bagus untuk menjadi! Kita semua sudah ada di sana, jadi jangan malu. Masukkan masalah Anda di komentar! Jika Anda merasa murah hati dan Anda melihat seseorang mengalami masalah dalam untaian komentar, jangan ragu untuk membantu mereka!

Useful Resources

  • Octopress homepage
  • @octopress on Twitter
  • Brandon Mathis (maker of) personal site
  • Brandon Mathis on the ShopTalkShow with Chris Coyier and Dave Rupert
  • @imathis on Twitter
  • The Octopress logo, Dribbbled by David Lanham
Advertisement
Did you find this post useful?
Want a weekly email summary?
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.
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.