Come creare un blog statico usando Cactus [OS X]

Aggiornare: L'app Cactus è stata interrotta.

Se non hai bisogno di un CMS e preferiresti semplicemente ottenere un sito o un blog statico, allora Jekyll è un buon strumento con cui cogliere un'opportunità. Tuttavia, se si preferisce uno strumento con una GUI, piuttosto che lavorare con gli strumenti della riga di comando, allora si potrebbe voler controllare Cactus.

Cactus è gratuito generatore di siti statici dotato di potenti strumenti che possono aiutarti costruire siti Web localmente, più veloce e più facile con le moderne tecnologie web. Ti dà un punto di partenza nel tuo progetto con 4 modelli predefiniti in modo da poter iniziare a pieno ritmo.

Cactus funzionerà durante il tuo progetto monitora ogni cambiamento che apporti al tuo progetto e aggiorna automaticamente il browser in modo che tu possa vedere immediatamente le modifiche, sul tuo Mac o dispositivo mobile. Supporta inoltre SASS / SCSS e Coffescript immediatamente, quindi anche ogni modifica su questo file viene generata automaticamente.

Iniziare

Prima di tutto, è necessario scaricare Cactus dalla sua homepage, quindi eseguire l'installazione. Una volta completato, aprilo, vedrai quattro pulsanti: pulsante Crea, Distribuisci, Modifica e Anteprima.

Per creare un nuovo progetto, fare clic su Creare. Vedrai 4 modelli disponibili lì. Per questo tutorial, stiamo andando con il modello Blog. Clic Creare.

Ti verrà chiesto di dare il nome del tuo progetto e scegliere la posizione in cui il progetto esiste. Qui do il nome “My Awesome Blog” per il progetto. Dopodiché, vedrai il tuo progetto già in Cactus.

Modifica dei file

Il progetto generato utilizzando il modello Blog ora esiste sul Finder. Ora esamineremo gli elementi necessari per costruire il nostro blog. Dirigiti verso la directory in cui sono conservati i tuoi file. Le principali directory che useremo sono Modelli, pagine, e Statico directory. Saltiamo gli altri per ora.

Per mantenere le cose brevi, ecco a cosa serve ciascuna directory:

• Modelli: Contiene file HTML che si comportano come modelli, utilizzati dai file HTML sulle pagine su cui costruire.
• pagine: Contiene tutti i file HTML che diventeranno una pagina con lo stesso percorso. ad esempio: ciao.html qui diventerà http://yoursite.com/hello.html
• Statico: Contiene tutte le risorse statiche come CSS, Javascript e immagini.

Ora, modificheremo tre file principali dalle directory: base.html e post.html nella cartella Modelli e index.html nella directory Pages.

Cactus usa Django Template Engine per il linguaggio dei template. Con questo, è possibile includere elementi HTML da altri file HTML, quindi non è necessario duplicare i codici. Le caratteristiche che sono più utilizzate qui sono modello ereditario e variabile.

Per vedere come funzionano, prima apri il base.html sulla directory dei modelli.

             % block content% Contenuto principale % endblock content% ---   

base.html è il semplice file html che usiamo come modello 'skeleton'. Contiene elementi comuni del nostro sito. Puoi vedere alcuni “blocchi” lì dentro; useremo il modello figlio per sovrascrivere questi blocchi.

Ora apri il post.html situato nella stessa directory con base.html.

 % estende "base.html"% % block title% title | Cactus % endblock title% % block content% --- 
 
title
 
titolo 
 
 
 % block body% Qui si trova il contenuto del post. % endblock body% 
 --- % endblock content% 

Il post.html contiene il markup per la nostra pagina di blog entry. Alla prima riga puoi vederlo post.html estende il base.html. Ciò significa che sostituiremo i blocchi su base.html con i blocchi qui.

Possiamo anche trovare variabili qui, come ad esempio title e titolo. Definiremo i valori di queste variabili negli articoli del blog post dopo.

Ora, guardiamo il % block body% bloccare. Questo verrà sovrascritto dal modello secondario che contiene le voci del post del nostro blog.

Vai alla directory Pagine / messaggi. Ecco il resto delle nostre voci di post.

 titolo: My Post Entries titolo: My Post Headline autore: Agus data: 15-01-2015 % extends "post.html"% % block body% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perferendis inventore dolorem rerum et tempora sint nemo illum ab saepe, assumenda, amet illo deleniti officiis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock body% 

Nelle voci del post, diamo valore alla variabile, come titolo, titolo, autore e data. Questo valore passerà quando chiameremo il nome della variabile sul modello principale. Quindi scriviamo il contenuto del nostro blog con Markdown.

Ora andremo alla pagina indice del nostro blog, aperta index.html nel pagine directory. Contiene l'elenco delle voci del nostro blog e il link a ciascuna voce. Il codice principale ha il seguente aspetto:

 % estende "base.html"% % block content% -- 
 % per post nei post% 
   titolo del post  
post.headline 
 % endfor% 
 -- % endblock content% 

A questo punto abbiamo un semplice blog con due pagine principali, il pagina indice che contiene le voci del blog e il pagina di blog si.

Vai alla finestra di Cactus e fai clic sul pulsante di anteprima per avviare il server. Aprirà automaticamente il browser e aprirà il tuo sito web.

Disegnare il blog usando SCSS

Una grande caratteristica di Cactus è che funziona con SASS / SCSS out of the box. Appena rilascia i tuoi file .sass o .scss nel statico directory e ogni volta che modifichi e salvi i file, Cactus genera automaticamente il CSS.

Qui darò un esempio usando bootstrap-sass per lo styling del nostro blog. Supponendo che stai usando bower, apri terminale e navighi su statico directory del nostro progetto usando CD comando. Quindi installare bootstrap-sass utilizzando questo comando:

$ bower installa bootstrap-sass-official

Una volta completato il download, vedrai a bower_components directory all'interno della directory statica contenente bootstrap-sass-ufficiale.

Ora vai in questa directory: static / css. Crea il file scss, dagli il nome syle-bs.scss e inserisci questo codice.

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

Quello che fa il codice è che importa tutto da bootstrap-sass. Una volta salvato style-bs.scss, vedrai style-bs.css generato nella stessa directory che contiene tutti gli stili dal bootstrap.

Distribuisci il tuo progetto

Infine, quando il tuo progetto è pronto, puoi implementare facilmente il tuo progetto nella versione live usando Amazon S3.