Cara Membuat Blog Statis Menggunakan Cactus [OS X]

Memperbarui: Aplikasi Cactus telah dihentikan.

Jika Anda tidak memerlukan CMS dan lebih suka hanya mendapatkan situs atau blog statis, maka Jekyll adalah alat yang bagus untuk mengambil risiko. Namun, jika Anda lebih suka alat dengan GUI, daripada bekerja dengan alat baris perintah, maka Anda mungkin ingin memeriksa Kaktus.

Kaktus gratis generator situs statis dilengkapi dengan alat-alat canggih yang dapat membantu Anda membangun situs web secara lokal, lebih cepat dan lebih mudah dengan teknologi web modern. Ini memberi Anda titik awal dalam proyek Anda dengan 4 templat yang telah dirancang sehingga Anda dapat mulai beroperasi.

Saat mengerjakan proyek Anda, Cactus akan melakukannya pantau setiap perubahan yang Anda buat pada proyek Anda dan secara otomatis me-refresh browser sehingga Anda dapat melihat perubahan dengan segera, di Mac atau perangkat seluler Anda. Ini juga mendukung SASS / SCSS dan Coffescript di luar kotak, sehingga setiap perubahan pada file ini juga dihasilkan secara otomatis.

Memulai

Pertama-tama, Anda perlu mengunduh Cactus dari beranda, lalu jalankan instalasi. Setelah selesai, buka, Anda akan melihat empat tombol: tombol Buat, Menyebarkan, Edit, dan Pratinjau.

Untuk membuat proyek baru, klik Membuat. Anda akan melihat 4 templat yang tersedia di sana. Untuk tutorial ini, kita akan menggunakan templat Blog. Klik Membuat.

Anda akan diminta untuk memberikan nama proyek Anda dan memilih lokasi di mana proyek itu berada. Di sini saya memberi nama “Blog Luar Biasa Saya” untuk proyeknya. Setelah itu, Anda akan melihat proyek Anda sudah ada di Cactus.

Memodifikasi File

Proyek yang dihasilkan menggunakan template Blog sekarang ada di Finder Anda. Kami sekarang akan memeriksa elemen yang diperlukan untuk membangun Blog kami. Kepala ke direktori tempat file Anda disimpan. Direktori utama yang akan kami gunakan adalah Templat, Halaman, dan Statis direktori. Mari kita lewati yang lain untuk saat ini.

Agar semuanya singkat, inilah tujuan setiap direktori:

• Templat: Berisi file HTML yang berperilaku sebagai templat, digunakan oleh file HTML pada halaman yang akan dibangun.
• Halaman: Berisi semua file HTML yang akan menjadi halaman dengan jalur yang sama. misalnya: hello.html di sini akan menjadi http://yoursite.com/hello.html
• Statis: Berisi semua sumber daya statis seperti CSS, Javascript dan gambar.

Sekarang, kami akan mengedit tiga file utama dari direktori: base.html dan post.html dalam direktori Templates dan index.html dalam direktori Pages.

Penggunaan kaktus Mesin Templat Django untuk bahasa templating. Dengan ini, Anda dapat memasukkan elemen HTML dari file HTML lainnya, jadi Anda tidak perlu menduplikasi kode. Fitur yang paling banyak digunakan di sini adalah warisan templat dan variabel.

Untuk melihat cara kerjanya, pertama buka base.html di direktori Templat.

             % blokir konten% Konten utama % konten endblock% ---   

base.html adalah file html sederhana yang kami gunakan sebagai templat 'kerangka'. Ini mengandung elemen umum dari situs kami. Anda dapat melihat beberapa “blok” di sana; kami akan menggunakan template anak untuk mengganti blok ini.

Sekarang buka post.html terletak di direktori yang sama dengan base.html.

 % extends "base.html"% % judul blok% title | Cactus % endblock title% % blok konten% --- 
 
title
 
headline 
 
 
 % block body% Di sinilah isi kiriman. % endblock body% 
 --- % endblock content% 

Itu post.html berisi markup untuk halaman entri blog kami. Di baris pertama Anda bisa melihatnya post.html memperpanjang base.html. Ini berarti kami akan mengganti blok pada base.html dengan blok di sini.

Kami juga dapat menemukan variabel di sini, seperti title dan headline. Kami akan menentukan nilai-nilai variabel ini dalam posting entri blog nanti.

Sekarang, mari kita lihat % block body% blok. Ini akan ditimpa oleh template anak yang berisi entri posting dari blog kami.

Pergi ke direktori halaman / posting. Berikut ini adalah entri tulisan kami yang lain.

 judul: Judul Entri Entri Saya: Entri Utama Entri Saya: Agus tanggal: 15-01-2015 % extends "post.html"% % block body% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pada dasarnya, Anda dapat menemukan kembali dan menjalankan kembali sementara waktu, dengan asumsi, lebih baik dari sekarang, dengan jumlah maksimum pada saat yang sama. --- % endfilter% % endblock body% 

Dalam entri posting, kami memberikan nilai pada variabel, seperti judul, judul, penulis, dan tanggal. Nilai ini akan berlalu ketika kita memanggil nama variabel pada templat induk. Lalu kami menulis konten blog kami dengan Markdown.

Sekarang kita akan menuju ke halaman indeks blog kita, buka index.html dalam halaman direktori. Ini berisi daftar entri blog kami dan tautan ke setiap entri. Kode utama terlihat seperti di bawah ini:

 % extends "base.html"% % blokir konten% -- 
 % untuk posting di posting% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

Pada titik ini kita memiliki blog sederhana dengan dua halaman utama, yaitu halaman indeks yang berisi entri blog, dan halaman entri blog diri.

Pergi ke jendela Cactus, dan klik tombol pratinjau untuk memulai server. Ini akan secara otomatis membuka browser dan membuka situs web Anda.

Mendesain Blog menggunakan SCSS

Fitur hebat dari Cactus adalah ia bekerja dengan SASS / SCSS di luar kotak. Hanya letakkan file .sass atau .scss Anda ke dalam statis direktori dan setiap kali Anda mengedit dan menyimpan file, Cactus akan secara otomatis menghasilkan CSS.

Di sini saya akan memberikan contoh menggunakan bootstrap-sass untuk menata blog kita. Dengan asumsi Anda menggunakan bower, buka terminal, dan arahkan ke menu statis direktori proyek kami menggunakan CD perintah. Kemudian instal bootstrap-sass menggunakan perintah ini:

$ bower instal bootstrap-sass-official

Setelah unduhan selesai, Anda akan melihat a komponen bower_ direktori di dalam direktori statis yang berisi bootstrap-sass-official.

Sekarang buka direktori ini: statis / css. Buat file scss, beri nama syle-bs.scss dan masukkan kode ini.

 @import "... / bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap"; 

Apa yang dilakukan oleh kode adalah mengimpor semuanya dari bootstrap-sass. Setelah Anda menyimpan style-bs.scss, Anda akan melihat style-bs.css dihasilkan pada direktori yang sama yang berisi semua gaya dari bootstrap.

Sebarkan Proyek Anda

Terakhir, ketika proyek Anda siap, Anda dapat menggunakan proyek Anda ke versi langsung dengan mudah menggunakan Amazon S3.