Share
Questa è la prima parte di una piccola serie su Middleman, "un generatore di siti statici che utilizza tutte le scorciatoie e gli strumenti nel moderno sviluppo web". I primi due tutorial copriranno le basi, dopo di che metteremo in pratica ciò che abbiamo appreso con un progetto pratico. Middleman richiede l'uso di Ruby, ma non esitare a leggere se questo ti è estraneo; questa serie è completamente newbie-friendly.
Qual è la confusione ultimamente con i siti statici? Bene, sono veloci, abbastanza semplici da configurare e leggeri. Dato che non stai servendo nulla di collegato al database, i siti statici sono abbastanza affidabili e veloci. HTML, CSS e, se necessario, JS: tutto qui.
Molte persone utilizzano siti Web statici per impostare i propri blog e pagine personali. Anche le pagine di destinazione colpite dal traffico sono un buon candidato. HealthCare.gov dell'amministrazione Obama ha usato notoriamente Jekyll, un altro generatore di siti statici, per il loro sito. Se hai bisogno di qualcosa di semplice e veloce, che è in grado di scalare fuori dalla scatola, i siti statici possono essere sorprendenti. Soprattutto perché puoi ospitarli gratuitamente su GitHub Pages o Heroku.
Probabilmente l'intera atmosfera statica del sito è iniziata qualche anno fa quando Jekyll è arrivato. Naturalmente, i siti statici sono vecchi quanto il primo "Hello World!" Di Sir Tim Berners-Lee, ma negli ultimi 15 anni le app supportate dal database sono diventate "tutto ciò che contava". Un paio di anni fa, uno dei co-fondatori di GitHub aveva bisogno di un modo migliore per scrivere blog e ha inventato Jekyll, questo generatore di siti statico per "Blogging like a hacker". L'ho usato in un paio di occasioni e ho solo cose buone da segnalare. Anche la squadra principale è fantastica. Ad ogni modo, per questa serie il mio editore e io abbiamo concordato che sarebbe stato più interessante coprire Middleman. Potrebbe essere corretto dire che Middleman è un po 'meno "consapevole del blog", ma allo stesso tempo altrettanto potente e di qualità.
Middleman usa Ruby, offrendo una serie piuttosto ampia di funzionalità per creare cose interessanti. Se hai mai usato Rails o Sinatra ti sentirai come a casa. Sembra che Middleman e Jekyll siano le opzioni go-to per i siti statici nella comunità di Ruby. Ho anche sentito che sempre più designer sostengono che a loro piace usarli per la prototipazione e per creare le proprie pagine personali. Quello che molti di questi framework di siti statici hanno in comune è che sono piuttosto semplici da usare.
In questo articolo assumerò che tu sia almeno un po interessato a Ruby e averlo installato sul tuo sistema. Se hai bisogno di aiuto, dai un'occhiata a Ruby for Newbies: Installazione di Ruby e Guida introduttiva di Andrew Burgess.
Anche sapere come gestire RubyGems è necessario, e, di nuovo, Ruby for Newbies di Andrew Burgess: Working with Gems ti aiuterà a iniziare se necessario. Farò del mio meglio per non andare oltre la tua testa con i concetti di programmazione, ma non parlerò delle basi di programmazione come loop, blocchi di codice e così via. Per i neofiti tra voi, non preoccupatevi, Middleman non ha molte parti mobili e dimostrerò quanto sia facile imparare.
Quindi hai Ruby e RubyGems sotto la cintura? Fantastico, allora siamo a posto.
Apri il tuo terminale e inserisci:
bash gem installa middleman
Se ti è stato negato il permesso di farlo, dovrai anteporre il comando a sudo e inserisci la password dell'amministratore di sistema. Al termine di questo processo, sarai in grado di utilizzare un paio di comodi comandi di middleman tramite il prompt dei comandi.
Questo comando avvia un nuovo progetto. Dovrai fornirgli il nome della tua app, quindi premere invio.
bash middleman init your_fancy_app Richiede anche argomenti aggiuntivi come il modello che si desidera iniziare. Questo rende davvero pratico personalizzare le tue app con i modelli fin dall'inizio, riducendo alquanto le attività di configurazione ripetitive! Discuteremo di più sui modelli in un tutorial successivo.
bash middleman init your_fancy_blog --template = blog
bash middleman init your_fancy_mobile_app --template = mobile
Middleman ha un server locale per il tuo sviluppo. L'avvio ti consente di vedere il tuo sito all'indirizzo http: // localhost: 4567 / **. Se inserisci solo ** intermediario senza ulteriori argomenti, questo attiverà anche il tuo server. Spegni il tuo server con CTRL-C.
Una volta che hai qualcosa che sei pronto a mettere su un server con connessione internet, devi farlo costruire il tuo sito. Ciò significa che qualunque cosa tu abbia preparato nel tuo /fonte la cartella verrà elaborata e l'output finale verrà inviato a /costruire cartella che middleman crea anche per te. Tutti i tuoi file che usano i preprocessori come Slim, Haml, Sass, CoffeeScript verranno elaborati nelle rispettive controparti e inseriti nella directory / build.
Una volta che il tuo sito è pronto per affrontare Internet, questo comando distribuisce il tuo /costruire cartella sul tuo server web. Ogni aggiornamento che fai passerà attraverso questo processo.
Fatti un favore e attiva LiveReload per aggiornare automaticamente le tue pagine dopo le modifiche ai tuoi file HTML, Sass o JS. Questo è di grande convenienza durante lo sviluppo, non te ne pentirai! Middleman in questi giorni offre LiveReload fuori dalla scatola, devi solo aggiungere
gemma di rubino "middleman-livereload"
alla tua Gemfile e rimuovere il commento dalla riga seguente config.rb:
ruby # Ricarica automaticamente il browser ogni volta che si attiva il cambio di file: livereload
Quindi impacchetta Middleman
bundle di base # o bundle exec middleman
Quindi iniziamo con /fonte e /costruire cartelle. Tra di loro c'è la linea divisoria che separa le sezioni di sviluppo e produzione. Quando usi il tuo server web locale per lo sviluppo, / source viene usato per servire la tua app. La cartella / build viene utilizzata dai server non locali per servire le pagine statiche. / build viene creato ogni volta che si utilizza build di middleman nella tua riga di comando. Pertanto, dovresti stare attento a non perdere tempo accidentalmente a programmare in / build perché questo lavoro sparirà dopo il processo di compilazione. In generale, tutto il tuo sviluppo dovrebbe avvenire in / source.
Il processo di compilazione crea i siti statici che il tuo server deve ospitare. Ogni file nel tuo /fonte la cartella verrà elaborata e quindi archiviata /costruire. Come accennato in precedenza, il tuo Sass, CoffeeScript, Slim / Haml e partial verranno elaborati nelle rispettive controparti disponibili. Anche tutti i layout verranno messi insieme. Se hai attivato la compressione per questi file, questo è il momento in cui diventano "ugrificati". Durante questo intero shabang, la cartella / build viene ringiovanita eliminando i file che non hanno più riferimenti in / source. Durante build di middleman, qualsiasi modifica apportata ai file in / source attiverà una rigenerazione di nuovi file statici corrispondenti per / build.
Il processo di distribuzione è l'ultimo passo. Con il /costruire directory in cui hai tutto ciò che ti serve per mettere la tua app là fuori. La mia raccomandazione è di farlo presto per evitare di sorprendere.
Diamo un'occhiata alla struttura di base di un'app di Middleman. I componenti principali sono:
Come puoi vedere qui sotto, la maggior parte del Jazz va nel /fonte cartella. Quello che mi piace delle app di Middleman è la loro semplice organizzazione. La navigazione nella struttura del documento è semplice, anche per i principianti.
Se non sei soddisfatto della denominazione di alcune di queste cartelle, puoi modificarlo nelle tue configurazioni (config.rb). Gli stessi nomi saranno usati per il tuo finito /costruire cartella.
"set di rubini: css_dir, 'custom_folder_name'
set: js_dir, 'custom_folder_name'
set: images_dir, 'custom_folder_name "
Una volta che il tuo server è in esecuzione, puoi controllare altre opzioni per configurare Middleman direttamente nel tuo browser: http: // localhost: 4567 / __ middleman / config /. Non tutti potrebbero avere senso, o sono persino importanti da sapere in questa fase. Dagli un'occhiata e un segnalibro mentale è assolutamente sufficiente per ora.
Uno che corri build di middleman puoi sbirciare dentro /costruire cartella. Tutti i semplici file HTML, CSS e JS necessari per pubblicare il tuo sito statico.
Questo è tutto ciò che devi sapere per iniziare e orientarti.
Suggerimento: A questo punto sarebbe molto sensato se inizi a mettere insieme un'app di prova. Guardati intorno e scopri come sono organizzate le cose e come si inseriscono i pezzi.
Il termine Front Matter deriva dalla pubblicazione di libri e si riferisce alle informazioni nella parte anteriore di un libro. Nel caso di file statici di siti Web, fa riferimento a blocchi di informazioni che sono memorizzati in YAML. Ogni pagina ti consente di avere variabili che possono essere memorizzate direttamente in alto all'interno di un trattino triplo iniziale e finale. Ad esempio, ecco la parte superiore di un file fittizio chiamato: some.html.erb.
layout: Titolo obbligazionario: Nome ragazza preferita dei bond data: 2015-11-09 tags: bond, 007
some_secret: non verrò reso fino a quando non mi userete.
bond_girls: - Strawberry Fields - Jill Masterson - Tiffany Case
"
Le variabili YAML sembrano proprio come un hash. È possibile accedere a tali dati locali attraverso il pagina corrente oggetto:
ruby current_page.data.some_variable
Lo usi spesso per memorizzare tag, date, titoli e opzioni di configurazione, ad esempio il layout che desideri utilizzare per determinate pagine. La materia anteriore è un negozio YAML per le tue variabili. Puoi anche usare JSON se preferisci questo. Consideralo come un luogo in cui inserire dati che potrebbero normalmente risiedere in un database. Discuterò le varie opzioni e gli usi lungo la strada quando arrivano.
Questa è una buona opportunità per passare brevemente su ERB. ERB ti consente di creare modelli dinamici che contengono codice incorporato. I tuoi nomi di file devono avere un .erb estensione e devi inserire il tuo codice nei seguenti due "contenitori".
Per il codice che viene esecrato ma non "stampato" sulla pagina, usi questo:
html <% %>
Pensalo come "solo calcolo".
In caso contrario, per i valori di ritorno che si desidera visualizzare visualizzati "stampati" sulla pagina, è necessario aggiungere anche un segno di uguale. Questo è tutto.
html <%= %>
I concetti di layout e partial sono strettamente correlati. Lascia che ti faccia un piccolo tour vorticoso nel caso tu non abbia mai giocato con Rails, Sinatra o simili. Penso che dovrei iniziare con layout primo.
I layout forniscono la struttura per condividere il markup comune tra pagine diverse, che appartengono alla stessa "famiglia" di pagine. È uno strumento per evitare duplicazioni e accelerare il tuo lavoro. Invece di scrivere lo stesso scheletro HTML ovunque componi i layout per casi d'uso particolari. Esempi popolari sono due layout diversi sia per un amministratore che per un utente "normale". Di solito hanno un'esperienza molto diversa guardando la "stessa" pagina.
Quando avvii una semplice app middleman, otterrai automaticamente un layout.erb file in source / layout. Prendi nota che questo file termina in .erb e non .html.erb. I layout non devono essere visualizzati in HTML e Middleman genera un errore se si creano layout con un'estensione .html. Se usi un linguaggio di template diverso come Slim o Haml, i layout potrebbero avere le loro estensioni. Come suggerisce il default, dovresti inserire tutti i tuoi layout nel / layout cartella in fonte.
Ecco un esempio di source / layouts / layout.erb:
"html
"
Questo layout predefinito è piuttosto barebone, ma fornisce tutto ciò che serve per iniziare. Diamo un'occhiata:
E da lì puoi personalizzare questo layout per ogni tua esigenza. Un aspetto potenzialmente confuso per i neofiti di Ruby è il dare la precedenza parola chiave: significa solo che passa attraverso il resto del contenuto che crei. In altre parole, dare la precedenza è un segnaposto per le tue visualizzazioni che verrà visualizzato in esso. Se questo concetto è completamente estraneo a te, ricorda di non toccarlo per ora o la tua app potrebbe non funzionare come previsto. Ogni volta che crei i tuoi layout, avendo dare la precedenza in là è essenziale, altrimenti il contenuto non verrà mostrato. Lo imparerai in poco tempo, lo prometto.
Se hai creato layout diversi, puoi specificare tramite la parte anteriore il layout che desideri utilizzare in base alla pagina. Supponiamo che tu abbia un layout speciale per accogliere gli utenti che è un po 'più commerciale. Qui abbiamo welcome.html.erb.
layout: vendite -
"
In alternativa è possibile specificare i layout nel file config.rb.
pagina ruby "/welcome.html",: layout => "vendite"
Se vuoi evitare di farlo manualmente per ogni pagina, puoi raccoglierli in un unico posto. Di nuovo, in config.rb, usi un carattere jolly (** \ ***) per raccogliere un mucchio di pagine che utilizzano lo stesso layout.
ruby page "/ sales / *",: layout => "vendite"
Personalmente mi piace mettere queste informazioni di layout nella parte anteriore. È molto esplicito e non troppo ripetitivo. Se ne avessi un sacco, comunque, preferirei usare l'approccio jolly.
Parziali ti forniscono i mezzi per incapsulare il codice di vista che puoi riutilizzare ovunque ti serva. Devi solo dirlo al tuo vista dove inserire un partial e viene visualizzato direttamente lì. I partial sono una tecnica molto comune per DRY-up del tuo codice.
Esempi molto comuni includono navbar, piè di pagina e sezioni di testa, che non si vorrebbe duplicare dappertutto. I file per partial iniziano con un trattino basso. Per i principianti è possibile posizionarli sotto /fonte. I tuoi layout sono un buon punto di partenza con la raccolta del codice da estrarre in partial. Ogni volta che trovi qualcosa che devi riutilizzare, Parziale sarà un amico a portata di mano.
Ecco un esempio di /source/layouts/layout.erb.
"html
<%= partial "head" %> <%= partial "navbar" %> <%= yield %> <%= partial "footer" %>"
E la fonte parziale / _head.html.erb:
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
A volte ti consigliamo di estrarre un partial non solo per evitare la duplicazione ma per rendere le tue visualizzazioni più leggibili. Nel corso del tempo, le sezioni di testa sono famose per essere abbastanza caricate, per esempio. Dentro di loro puoi avere altro parziali che trattano solo con stile o file JS.
Ti renderai conto di quanto siano convenienti i partial una volta che puoi applicare le modifiche che ricorrono nell'intera app, ovunque tu abbia incluso il partial. Non è necessario passare attraverso una serie di file per applicare lo stesso cambiamento più e più volte.
Gli helper sono metodi che puoi utilizzare per molte attività quotidiane nelle tue visualizzazioni. Credo che questo sia stato pionieristico nella terra di Rails e che sia diventato rapidamente onnipresente per lo sviluppo di siti web moderni. Hai già visto helper che includono fogli di stile e file JavaScript. C'è molto di più da dove viene questo però.
Ecco di nuovo il nostro /source/_head.html.erb partial:
"html
<%= stylesheet_link_tag "normalize", "all" %> <%= javascript_include_tag "all" %>"
Questi helper hanno lo scopo di aiutarti a scrivere un codice di visualizzazione più pulito e più conciso. Nella lista degli aiutanti qui sotto troverai molte cose utili che escono dalla scatola. Non sei limitato da questi però. Scrivi i tuoi metodi di supporto in config.rb o raccogliili separatamente in un modulo.
Funziona così: Nel tuo file config.rb puoi creare un aiutanti blocca e metti dentro tutti i tuoi metodi di supporto. Questo è tutto. Ora le tue opinioni hanno accesso a loro.
Esempio: /source/_navbar.erb.
"html
"
E in config.rb:
"Gli aiutanti rubino fanno
def random_username "# lorem.first_name # lorem.last_name" fine
def random_image image_tag "# lorem.image ('30x40',: background_color => '333',: color => 'fff')" fine
fine"
Questi helper potrebbero rivelarsi utili quando voglio rapidamente prototipare qualcosa e voglio evitare di creare personalmente immagini e testo fittizi. Nel complesso, dovresti cercare codice che ti piacerebbe essere più conciso o duplicato più e più volte. Gli aiutanti sono spesso una buona casa per questo.
Dentro questi aiutanti personalizzati ho usato altri aiutanti di Middleman per la creazione img tag attraverso image_tag così come il lorem oggetto per alcuni nomi utente casuali e segnaposto immagine. Questi elementi lorem possono essere personalizzati per soddisfare le tue esigenze.
Tuttavia, utilizzando l'approccio del modulo, è necessario un file separato per il modulo. Crea una directory "lib" nella tua cartella root (allo stesso livello di "source" e "build") e crea un file per i tuoi aiutanti.
Qui abbiamo /lib/helpers.rb:
"modulo ruby PrototypingHelpers def random_image image_tag" # lorem.image ('300x400',: background_color => '333',: color => 'fff') "fine
def random_username "# lorem.first_name # lorem.last_name" end end "
Dovrai quindi consentire al file config.rb di sapere che desideri utilizzare questi helper:
ruby richiede aiutanti "lib / helper" PrototypingHelpers
Boom! Sei pronto a lanciare. In generale, andrei subito con l'approccio al modulo. Mi sembra molto più pulito, inoltre eviti di inquinare il tuo file di configurazione con troppe cose.
Mi piacerebbe anche esaminare gli helper di output e content_for in particolare, dal momento che possono essere un po 'di confusione per i principianti. Ciò ti consente di catturare un sacco di contenuti che puoi produrre / riutilizzare altrove. È un po 'parziale di sorta. Personalmente, con la maggior parte del tempo partirò personalmente, ma ogni tanto quando si desidera applicare le modifiche on-off più chirurgicamente è utile sapere:
Ecco index.html.erb:
"html <% content_for :navigation do %>
<% end %>
... "
E admin_index.html.erb:
"html <% content_for :admin_navigation do %>
<% end %>
<% content_for :admin_javascript do %> <%= javascript_include_tag “admin” %> <%= javascript_include_tag “some_library” %> <% end %>
... "
Quindi in layout.erb:
"html
<% if content_for?(:admin_javascript) %> <%= yield_content :admin_javascript %> <% else %> <%= javascript_include_tag "all" %> <% end %> <%= yield %> <%= partial "footer" %>"
La chiave sta usando yield_content che sta mettendo il contenuto raccolto dalla singola pagina nel layout, se trovato. Non è necessario usarli solo con i layout. Quando hai bisogno di renderlo un po 'più complicato, usa content_for? per verificare specifici blocchi di contenuto prima di inserirli. È utile quando si desidera eseguire piccoli adattamenti per sezioni che differiscono solo leggermente. È fantastico poter salvare questo contenuto un po 'come una configurazione sulle pagine pertinenti e "attivarlo" solo dove necessario. Probabilmente non dovresti diventare troppo furbo con queste cose.
Una parola sul Collegamento a aiutante che ho usato sopra. Questo è probabilmente quello in cui ti imbatterai più spesso. In pratica, si alimenta il metodo con un nome e un url o percorso in cui questo link dovrebbe puntare. Ho sostituito l'ultima parte con un segnaposto per brevità.
Di seguito è riportata una panoramica di quali helper sono pronti all'uso. Penso che i nomi siano per lo più auto-esplicativi e non dovrei andare oltre quello che ognuno di questi può aiutarti. Crea un segnalibro mentale di ciò che è là fuori e controlla la documentazione se ti danno problemi.
Accentsconagua
etichettaCollegamento ainput_tagfavicon_tagstylesheet_link_tagjavascript_include_tagcontent_forcontent_for?capture_htmlyield_contentconcat_contentform_taglabel_tagselect_tagsubmit_tagfield_set_tagtext_field_tagcheck_box_tagpassword_field_tagtroncarepluralizeword_wrapescape_htmlsimple_formatjs_escape_htmltime_ago_in_wordsdistance_of_time_in_wordslorem.datelorem.wordlorem.namelorem.emaillorem.imagelorem.wordslorem.sentencelorem.last_namelorem.paragraphlorem.first_namelorem.paragraphsCredo che questa sia una buona base per iniziare a giocare con un'app giocattolo. Dovresti avere un buon senso di ciò che Middleman offre e come navigare nel framework. Nella prossima parte di questa serie faremo ulteriori cose e ci addentreremo un po 'più nel framework. Il team di Middleman ha davvero fatto un ottimo lavoro nel progettare l'API e nel mantenere le cose semplici.
Si spera che ora si possa vedere perché questo framework ha guadagnato popolarità e perché è una buona scelta per tutti i tipi di progetti statici.
