Cum de a crea un blog static folosind Cactus [OS X]

Actualizați: Aplicația Cactus a fost întreruptă.

Dacă nu aveți nevoie de un CMS și preferați să obțineți doar un site sau un blog static, atunci Jekyll este un instrument bun pentru a avea o șansă. Cu toate acestea, dacă preferați un instrument cu un GUI, mai degrabă decât să lucrați cu unelte de linie de comandă, atunci este posibil să doriți să verificați Cactus.

Cactusul este gratuit generator de site static echipat cu instrumente puternice care vă pot ajuta construi site-uri locale, mai rapid și mai ușor cu tehnologiile web moderne. Acesta vă oferă un punct de plecare în proiectul dvs. cu 4 șabloane predefinite, astfel încât să puteți lovi terenul în desfășurare.

În timp ce lucrați la proiectul dvs., Cactus va să monitorizați fiecare schimbare pe care o faceți pe proiectul dvs. și reîmprospătați automat browserul astfel încât să puteți vedea imediat modificările, pe Mac sau pe dispozitive mobile. De asemenea, suportă SASS / SCSS și Coffescript din cutie, astfel încât fiecare schimbare din acest fișier să fie generată automat.

Incepe

Mai întâi de toate, trebuie să descărcați Cactus de pe pagina de pornire, apoi să rulați instalarea. După finalizare, deschideți-l, veți vedea patru butoane: Creare, Implementare, Editare și Examinare.

Pentru a crea un nou proiect, faceți clic pe Crea. Veți vedea 4 șabloane disponibile acolo. Pentru acest tutorial, vom merge cu șablonul Blog. Clic Crea.

Vi se va cere să dați numele proiectului dvs. și să alegeți locul în care există proiectul. Iată numele “Blogul meu minunat” pentru proiect. După aceea, veți vedea proiectul dvs. deja în Cactus.

Modificarea fișierelor

Proiectul generat folosind șablonul de blog există acum pe Căutare. Vom inspecta acum elementele necesare pentru a construi Blogul nostru. Treceți la directorul unde sunt păstrate fișierele. Directoarele principale pe care le vom folosi sunt Template-uri, Pagini, și Static director. Să omitem pe ceilalți pentru moment.

Pentru a menține lucrurile scurte, iată în ce direcție este fiecare director:

• Template-uri: Conține fișiere HTML care se comportă ca șablon, utilizate de fișierele HTML în paginile pe care se construiește.
• Pagini: Conține toate fișierele HTML care vor deveni o pagină cu aceeași cale. de exemplu: hello.html aici va deveni http://yoursite.com/hello.html
• Static: Conține toate resursele statice cum ar fi CSS, Javascript și imagini.

Acum, vom edita trei fișiere principale din directoare: base.html și post.html în directorul Șabloane și index.html în directorul Pages (Pagini).

Cactus folosește Django Template Engine pentru limba templantă. Cu aceasta puteți include elemente HTML din alte fișiere HTML, deci nu este nevoie să copiați codurile. Caracteristicile cele mai utilizate aici sunt moștenirea șablonului și variabil.

Pentru a vedea cum funcționează, deschideți mai întâi base.html pe directorul Template.

             % content block% Conținutul principal % endblock content% ---   

base.html este fișierul html simplu pe care îl folosim ca șablon "schelet". Acesta conține elemente comune ale site-ului nostru. Puteți vedea unele “blocuri” acolo; vom folosi șablonul pentru copii pentru a suprascrie aceste blocuri.

Deschide acum post.html aflate în același director cu base.html.

 % extinde "base.html"% % titlul blocului% title | Cactus % cap de blocare% % conținut bloc% --- 
 
 titlu 
 
titlu 
 
 
 % block body% Aici este conținutul postului. % body endblock% 
 --- % content endblock% 

post.html conține marcajul pentru pagina noastră de intrare pe blog. La prima linie puteți vedea asta post.html extinde base.html. Asta înseamnă că vom trece peste blocuri base.html cu blocurile de aici.

De asemenea, putem găsi variabile aici, cum ar fi titlu și titlu. Vom defini postul mai târziu valorile acestor variabile în postările din blog.

Acum, vă puteți uita la % bloc corp% bloc. Acest lucru va fi anulat de șablonul copil care conține intrările post ale blogului nostru.

Accesați directorul pagini / mesaje. Iată restul postărilor noastre.

 Titlu: Titlurile mele Post Titlu: Anunțul meu Titlu principal: Agus data: 15-01-2015 % extends "post.html"% % bloc body% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipis elit. În acest caz, inventatorul nu poate fi recunoscut și nu poate fi considerat ca fiind un factor important. --- % endfilter% % body endblock% 

În înregistrările postului, oferim valorii variabilei, cum ar fi titlul, titlul, autorul și data. Această valoare va trece când vom apela numele variabilei pe șablonul părinte. Apoi scriem conținutul blogului nostru cu Markdown.

Acum vom merge la pagina index a blogului nostru, deschisă index.html în pagini director. Acesta conține lista intrărilor de blog și link-ul pentru fiecare intrare. Codul principal arată mai jos:

 % extinde "base.html"% % conținut bloc% -- 
 % pentru post în postări% 
  post.title 
post.headline 
 % endfor% 
 -- % content endblock% 

În acest moment avem un blog simplu, cu două pagini principale pagina index care conține intrările de blog și pagina de intrare pe blog în sine.

Accesați fereastra Cactus și faceți clic pe butonul de previzualizare pentru a porni serverul. Acesta va deschide automat browserul și va deschide site-ul.

Styling Blog folosind SCSS

O caracteristică extraordinară a Cactus este că funcționează cu SASS / SCSS din cutie. Doar aruncați fișierele .sass sau .scss în static și de fiecare dată când editați și salvați fișierele, Cactus va genera automat CSS.

Aici voi da un exemplu folosind bootstrap-sass pentru a modela blogul nostru. Presupunând că folosești bower, deschide terminalul și navighezi la static directorul proiectului nostru CD comanda. Apoi instalează bootstrap-sass folosind această comandă:

$ bower instalează bootstrap-sass-official

După ce descărcarea este finalizată, veți vedea a bower_components director din interiorul directorului static care conține bootstrap-Sass-oficial.

Acum mergeți la acest director: static / css. Creați fișierul scss, dați-i numele SYLE-bs.scss și introduceți acest cod.

 @import "... / bower_components / bootstrap-sass-oficial / active / foi de stil / _bootstrap"; 

Ceea ce face codul este importul de tot, de la bootstrap-sass. Odată ce salvați stilul bs.scss, veți vedea stilul bs.css generat în același director care conține toate stilurile din bootstrap.

Implementați Proiectul

În cele din urmă, atunci când proiectul dvs. este gata, puteți implementa proiectul în versiunea live cu ușurință folosind Amazon S3.