Share
Nella terza parte di questa serie ci sporcheremo le mani e inizieremo a costruire un sito per un sito di podcast fittizio: "Matcha Nerdz". Useremo Middleman, Bourbon, Neat e Bitters. Andiamo!
Iniziamo con un piccolo sopralluogo su dove sta andando. Nel prossimo paio di articoli ho intenzione di costruire un piccolo sito statico per un podcast fittizio chiamato "Matcha Nerdz", un podcast per le persone che vogliono immergersi in tutto il tè verde in polvere. Avrà le seguenti pagine:
Utilizzeremo Middleman per generare il sito statico e la suite Bourbon per tutti gli stili. Spero che tu abbia dato un'occhiata ai miei tutorial precedenti su Bourbon, Neat e Middleman prima di arrivare a questo punto. Altrimenti, ti consiglio di andare a leggerli, a meno che non ti senti già abbastanza sicuro nelle basi.
Per tutto ciò che riguarda lo styling, ho fatto molto affidamento su Bourbon per un po 'di tempo. Inoltre, scrivo davvero la sintassi di Sass con indentazione: lo preferisco di gran lunga al .SCSS sintassi. Il .insolenza la sintassi è l'unico (probabilmente) non familiare che vorrei lanciare ai neofiti, perché sento che vale davvero la pena di conoscerlo.
Iniziamo una nuova app per il nostro sito podcast, inserendo nel terminale:
bash middleman init matcha_nerdz e poi passare alla nostra directory di progetto:
bash cd matcha_nerdz
Ora faremo andare Git:
"bash git init
# => per avviare un nuovo repository Git
git add -all # => aggiunge tutti i file per la gestione temporanea
git commit -m 'Initital commit' # => conferma i cambiamenti "
Successivamente aggiungiamo il modello del blog al mix. Questa è una buona base per il nostro sito di podcast. Successivamente regoleremo gli articoli per visualizzare le tracce audio dei podcast da SoundCloud. Per ora, tuttavia, è solo un blog.
Nel Gemfile aggiungi:
gemma rubino "middleman-blog"
Quindi tramite il terminale:
bash bundle # o bundle exec middleman
bash middleman init --template = blog
Questo aggiornerà la cartella "matcha_nerdz". ".Config.rb" e il tuo modello di indice ottiene anche un piccolo aggiornamento. Inoltre, ottieni nuovi modelli per il feed, la pagina dei tag, la pagina del calendario, un articolo di esempio e un nuovo layout. Controlla l'output dal terminale:
bash identico .gitignore update config.rb esiste source create source / 2012-01-01-example-article.html.markdown crea source / calendar.html.erb crea source / feed.xml.builder aggiorna source / index.html.erb crea source / layout.erb crea source / tag.html.erb esiste source / stylesheets esiste source / javascripts esiste source / images
Idiota:
bash git add --all git commit -m 'Aggiunge il modello del blog'
Ora puoi creare nuovi articoli tramite la riga di comando:
articolo bash middleman 'Il mio nuovo secondo articolo di fantasia' # => crea fonte / 2015-11-22-my-wonderful-second-article.html.markdown
Questo crea un nuovo articolo di markdown sotto "/ source". Questo non è lo stoccaggio ottimale, ma ci arriveremo. Avvia il server per vedere il tuo primo articolo del blog di esempio:
middleman middleman o server middleman
Quindi abbiamo bisogno di avere delle pulizie da fare. Il modello del blog ha creato un nuovo layout sotto "source / layout.erb". Dobbiamo eliminare quello originale in "source / layouts / layout.erb" e spostare quello nuovo lì. Quindi, tramite il terminale:
bash rm source / layouts / layout.erb mv source / layout.erb source / layouts /
Abbiamo anche bisogno di aggiornare il nuovo "layout.erb" con elementi che sono stati cancellati nel file di layout. Aggiungi il seguente al tuo tag in "source / layouts / layout.erb":
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Soprattutto, questo assicura che il tuo JS e le risorse di stile siano disponibili.
Idiota
bash git rm source / layout.erb git add --all git commit -m 'Sposta il nuovo layout in / layouts Aggiunge i link delle risorse Rimuove il vecchio layout'
Per rendere le nostre vite un po 'più convenienti aggiungeremo LiveReload al mix. Dobbiamo prendere la gemma e quindi attivarla nel nostro file "config.rb".
Nel nostro file Gem:
gemma di rubino "middleman-livereload"
Nel terminale:
bundh di bash
Quindi in config.rb:
ruby #uncomment activate: livereload
E infine i nostri comandi Git:
bash git add --all git commit -m 'Attiva LiveReload'
Con questo attivato, riavvia il server e la pagina si aggiornerà automaticamente ogni volta che cambi il contenuto della pagina, gli stili o il comportamento. Salvavita, fidati di me!
Attenzione! Una parola di cautela: se hai un altro server locale in esecuzione, LiveReload potrebbe non giocare a palla. Dovrai uccidere l'altro server per ora.
Quando guardi dove sono archiviati gli articoli in questo momento, ti renderai presto conto che questa organizzazione direttamente in "/ source" diventa noiosa molto rapidamente. Pubblica un paio di articoli e affoghi nei post. Non è necessario essere così disordinati, ma creiamo una directory sotto "/ source" per tutti i nostri post. Sposta i tuoi articoli lì dentro e fai sapere a Middleman dove trovarli.
bash mkdir source / posts mv source / 2012-01-01-example-article.html.markdown sorgente / messaggi / Quindi aggiungiamo "/ posts" come fonte per gli articoli del blog. In config.rb:
ruby blog.sources = "posts /: year-: title.html"
Quindi i nostri comandi Git:
"bash git rm source / 2012-01-01-example-article.html.markdown # Rimuove il file spostato dal repository
git add -all gco -m 'Aggiunge una nuova cartella per i post e aggiunge la fonte in config.rb "
E questo è tutto. Nulla dovrebbe essere cambiato e dovresti vedere l'articolo di esempio come prima. L'archiviazione dei post, tuttavia, è molto più sana. La cosa interessante è che se crei nuovi articoli tramite la riga di comando, i tuoi nuovi post verranno automaticamente salvati in "/ post":
articolo bash middleman 'Il mio fantastico terzo articolo' # => crea fonte / post / 2015-my-awesome-3rd-article.html.markdown
Per me, spingere i siti statici a GitHub Pages è una soluzione così conveniente che non voglio sottoporvi alla distribuzione tramite Heroku o il servizio S3 di Amazon. Facciamo in modo semplice!
Nel file Gemma:
gemma rubino "middleman-deploy"
Quindi nel terminale:
bundh di bash
Abbiamo bisogno di aggiungere un blocco deploy a "config.rb":
ruby activate: deploy do | deploy | deploy.method =: git deploy.branch = 'gh-pages' deploy.build_before = true end
Affinché GitHub Pages trovi le risorse CSS e JS, è necessario attivare anche quanto segue in config.rb:
ruby configure: build do activate: relativo_assets end
Quindi, creare un repository su GitHub, aggiungere il telecomando e distribuire:
"bash git remote aggiungi origine https://github.com/yourusername/repositoryname.git
middleman deploy "
Boom! Il tuo sito è pubblicato sotto "yourusername.github.io/projectname" e le tue risorse dovrebbero essere eliminate. Adoro questo processo: non potrebbe essere più semplice e facile da usare. Ottimo lavoro GitHub!
bash git add --all gco -m 'Aggiunge l'installazione per l'implementazione di GitHub Pages'
Nell'ultimo passaggio prima di entrare nella configurazione di Bourbon, mi piacerebbe sbarazzarmi degli stili che vengono con Middleman e ottimizzare le nostre risorse per ottenere prestazioni migliori nel browser e nella gestione delle risorse e della concatenazione. Vai su "source / stylesheets / all.css" ed elimina il suo contenuto. Mantieni la prima linea:
css @charset "utf-8";
Comandi Git:
bash git add --all git commit -m 'Rimuove gli stili Middleman non necessari'
Quindi vogliamo attivare un paio di opzioni per ottimizzare le prestazioni in "config.rb":
ruby configure: build do activate: asset_hash activate: minify_javascript activate: css activate: gzip end
Quindi, di nuovo, Git comanda:
bash git add --all git commit -m 'Attiva le ottimizzazioni delle prestazioni'
Lascia che ti spieghi rapidamente cosa abbiamo fatto qui:
Al momento, gzip è il metodo di compressione più popolare ed efficace. Il suo algoritmo di compressione trova stringhe simili all'interno di un file e le comprime. Per HTML, che è pieno di spazio bianco e tag corrispondenti, questo è molto efficace e in genere riduce le dimensioni della risposta HTTP di un enorme 70%. Attivando questo non solo gzips il tuo HTML, ma anche i file CSS e JS. Durante una compilazione, Middleman crea i tuoi file come al solito, ma li duplica anche con una versione ".gz". Quando un browser entra in contatto con i tuoi file, può scegliere se preferisce servire file compressi gzip o regolari. gzipping è supportato pesantemente dai browser web e mobile.
Questo processo elimina tutta la spazzatura inutile dai tuoi stili e riduce significativamente le dimensioni del file. In breve, il tuo CSS diventa un grande blob ottimizzato per essere letto da una macchina. Sicuramente non amichevole negli occhi.
Questo è lo stesso di minify_css, ma un po 'più coinvolto e sofisticato.
Questo attiva l'hashing delle tue risorse. Significa che i nomi dei tuoi asset cambiano e ricevono alcune informazioni aggiuntive (durante il processo di compilazione) che informano i browser se devono ri-scaricare risorse o meno. Ora, il nome di un file dipende dal contenuto di quel file. Le risorse tratteggiate vengono memorizzate nella cache dai browser e i tuoi siti vengono renderizzati più velocemente. Un'altra parola per questo è "fingerprinting" perché fornisce una soluzione semplice per informare i browser indipendentemente dal fatto che due versioni di un file siano identiche. La data di implementazione non è importante, ma solo i contenuti. Dai un'occhiata a come appaiono i file degli asset hash:
Screenshots
Questo sembra brutto, ma ora le tue immagini, fogli di stile e file JavaScript ottengono un nome univoco attraverso questo codice "casuale" aggiunto: un hash (unico). Ogni volta che si modifica un asset e si ripassa il processo di costruzione, questo hash cambia, che a sua volta segnala ai browser che quindi, e solo successivamente, devono scaricare nuovamente quel particolare file. Il file è quindi effettivamente scaduto, un processo noto come "busting della cache".
Vale anche la pena ricordare: puoi fare riferimento ai tuoi file allo stesso modo di prima, ma durante la compilazione i riferimenti nel codice HTML vengono aggiornati per utilizzare questi nomi hash. Guarda:
“/Build/index.html(.gz)”:
"html
Accentsconagua