Questo è il secondo post riguardante il progetto di sito di portfolio fotografico. Se vuoi sapere di più circa il progetto, puoi leggere il primo post. In questo post spiegherò le impostazioni iniziali del progetto e la creazione di una pagina home minimale per il sito.
Prima cosa da fare: un nuovo repository GitHub
Ho creato un nuovo repository github per ospitare il progetto. In questo e nei post seguenti sul progetto, farò riferimento a specifici commit di questo repository, in modo che potrai vedere i dettagli del changeset.
Gestire un progetto Haskell: cabal e sandbox
Uso Hakyll per generare il sito web statico, così ho impostato un progetto Haskell vero e proprio:
- creando un cabalized project
con
cabal init, impostando Hakyll come dipendenza e creando un file sorgente con una funzioneMainvuota - creando una sandbox
per lavorare in un ambiente isolato con
cabal sandbox init - installando tutte le dipendenze nella sandbox con
cabal install --only-dependencies - compilando il progetto con
cabal buildper controllare la presenza di errori: eseguendo il programma./dist/build/mtphotosite/mtphotositenon risultavano errori - congelando la versione delle librerie con
cabal-constraints dist/setup-config > .cabal.config(adesso con Cabal 1.20 puoi usarecabal freeze)
Puoi navigare il codice o vedere la commit fatta dopo questi passi.
Creare un sito Hakyll con il template di default
Per verificare il setup iniziale, ho creato un sito Hakyll con il template di default
usando hakyll-init. Ho cambiato le cartelle di default nella configurazione per
mantenere ordinata la cartella radice: site-src per i file originari,
site-pub per il sito generato e .hakyll-cache per i file temporanei di Hakyll.
Dopo aver compilato con cabal build, ho provato il sito con ./dist/build/mtphotosite/mtphotosite watch
e aperto il link http://localhost:8000 con un web browser. Tutto funzionava!
Puoi navigare il codice o vedere la commit fatta dopo questi passi.
Usare Zurb Foundation con la versione Sass
Per usare Zurb Foundation lo dovevo integrare con Hakyll.
Al momento della stesura del post, è disponibile Foundation 5. Si può usare la versione CSS oppure la versione Sass. La seconda permette di fare più personalizzazioni e con i Sass mixins si possono usare dei markup HTML semantici. Non conosco molto Sass, ma mi piace la promessa di flessibilità e la prendo come occasione per impararne di più.
Sfortunatamente la versione Sass di Foundation richiede Ruby, Node.js, Grunt, Bower. Mentre voglio imparare qualcosa di più su Sass, non sono molto interessato ad imparare l’ecosistema Node.js per usare un framework CSS. L’unica dipendenza che posso accettare è con Ruby, dato che ce l’ho già installato per altri progetti. Dopo qualche indagine nei gruppi di discussione di Foundation, ho scoperto che esiste una versione Sass precompilata su Github che è aggiornata frequentemente e che ha un tag per ogni release di Foundation.
Ho creato un git submodule collegato a questo repository e impostato ad un tag di una specifica release.
Per integrare Foundation con Hakyll, ho cancellato il file del template di default e ho modificato il file Main aggiungendo la compilazione dei file Sass e la copy dei file Javascript. Per compilare i file Sass ho installato il compilato Sass di Ruby. Potrei probabilmente rimuovere questa dipendenza passando a libsass. Per quanto riguarda i file javascript, ho copiato la versione minified che contiene tutte le funzionalità di Foundation. Potrei combinare e minimizzare solo il javascript necessario per le funzionalità a cui sono interesato, per ridurre la dimensione del file. Queste ottimizzazioni sono interessanti, ma non essenziali nella prima fase del progetto. Le affronterò in future evoluzioni.
Creare un prototipo della pagina home
Finalmente ho creato un prototipo per la pagina home con una top bar, un footer e una grid con 12 immagini quadrate. Ho creato questa pagina come HTML completo e poi l’ho convertita in un template Hakyll.
Ho provato il sito con ./dist/build/mtphotosite/mtphotosite watch e aperto il link
http://localhost:8000 con il web browser. Tutto funzionava ancora!