Disclaimer: i contenuti esposti in questo post seguono a una raccolta e a un riadattamento di informazioni fatta qua e là nel web, nella documentazione dei programmi utilizzati, nei forum tematici e così via. Sarà mia cura citare tutte le fonti da cui ho attinto informazioni di qualsiasi tipo.

Step 0: sistema

  • Windows 10
  • Account Bitbucket
  • Account Altervista

Step 1: installare Jekyll in locale

Per prima cosa ho installato ruby+devkit così come descritto nella pagina dedicata di Jekyll:

  • scaricare ruby+devkit dalla pagina del progetto
  • installare il pacchetto sul PC, le impostazioni di default vanno bene
  • al termine dell’installazione aprire una PowerShell (o un prompt dei comandi) e verificare l’installazione di Ruby e RubyGems con i comandi:
ruby -v
gem -v
  • installare Jekyll e verificarne l’avvenuta installazione con i comandi:
gem install jekyll bundler
jekyll -v
  • navigare da terminale fino alla posizione in cui si vuole creare la cartella con il sito (o navigare tramite explorer e poi premere shift+click destro del mouse per aprire una shell in quella cartella) e avviare Jekyll tramite:
jekyll new nome-del-sito

A questo punto, sempre da terminale, è possibile spostarsi all’interno di questa cartella ed avviare la visualizzazione del sito in locale:

cd nome-del-sito
bundle exec jekyll serve

Ora il nuovo sito è visualizzabile in locale all’indirizzo http://localhost:4000. Il comando ‘serve’ permette di visualizzare in tempo reale le modifiche fatte ai post o alle configurazioni del sito (è comunque necessario un refresh della pagina).

Step 2: creare il repository

Dopo aver creato un account su Bitbucket ed installato Git sul PC (usando ad esempio Git for Windows) creare un nuovo repository nome-del-sito, usando Git come Version control system.

  • posizionarsi all’interno della catella nome-del-sito e convertire la cartella che contiene il sito in un repository sincronizzabile agganciata al repository online tramite i comandi:
git init
git remote add origin https://username@bitbucket.org/username/nome-del-sito.git

L’indirizzo del repository verrà visualizzato nella dashbord subito dopo averlo creato o premendo il tasto ‘clone’ sempre sulla dashboard di Bitbucket.

  • aggiungere tutti i file presenti nella cartella al tracciamento (verranno automaticamente esclusi i file e i percorsi specificati nel file’.gitignore’ che viene creato automaticamente
git add .
  • fare il ‘commit’ delle modifiche aggiungendo una descrizione di quello che si è fatto (buona abitudine) e fare il ‘push’ online della copia locale, sincronizzando tutto
git commit -m "Primo caricamento"
git push -u origin master

Step 3: configurare Bitbucket pipelines

A questo punto dobbiamo spiegare a Bitbucket come generare il sito partendo dai sorgenti caricati nel repository. Questo non dovrà fare altro che ripetere i comandi, che solitamente eseguiamo sulla PowerShell, su un docker direttamente in rete. Per fare questo è necessario:

  • creare due cartelle chiamate ‘public’ e ‘upload’ nella root del progetto. Non è possibile creare cartelle vuote quindi credo sia obbligatorio mettere un file, anche vuoto, all’interno di queste cartelle
  • creare nella root del repository un file chiamato bitbucket-pipelines.yml, è possibile crearlo direttamente sul browser o in locale per poi ‘pusharlo’ sul repository online. Il file dovrà contenere il testo di seguito:
image: ruby:2.6.3

pipelines:
  default:
    - step:
        name: Generate the blog with Jekyll
        caches:
          - bundler
        script:
          - gem install bundler:2.0.1
          - bundle install --path vendor/bundle
          - bundle exec jekyll build --destination public
          - mkdir dist
          - tar -czvf dist/package-${BITBUCKET_BUILD_NUMBER}.tar.gz -C public .
        artifacts:
          - dist/**
    - step:
        name: Deploy to Web
        image: alpine
        deployment: production
        trigger: manual
        script:
          - tar -xf dist/package-${BITBUCKET_BUILD_NUMBER}.tar.gz -C upload
          - apk update && apk add lftp
          - lftp -c "set ssl:verify-certificate false; open ftp://nome-utente:password@ftp.nome-utente.altervista.org; lcd ./upload; mirror --reverse --use-cache --verbose --ignore-time --allow-chown --allow-suid --no-umask --parallel=2 --exclude-glob .svn"
definitions:
  caches:
    bundler: vendor/bundle

Avviare una build

A questo punto ogni volta che viene fatto il commit, verrà eseguita la pipeline descritta nello script che non fa altro che autoconfigurare il sistema, generare il sito e inviarlo tramite ftp al servizio di hosting. Un accesso ssh al servizio di hosting sarebbe più efficace, ma nessuno lo offre gratis e c’è da accontentarsi del protocollo ftp.

Si noti come la password dell’account altervista debba comparire in chiaro nello script. Sarebbe opportuno trovare una soluzione. Vorrei aggiungere una descrizione dettagliata del file bitbucket-pipelines.yml, ma prima vorrei approfondire il significato dei vari campi.

Lo step 3 rielabora leggermente quanto descritto nel post di xam.io. La spiegazione dei passi da seguire è molto chiara.

ATTENZIONE: il piano gratuito di bitbucket include 50 minuti di compilazione. L’intera procedura descritta in questo post impiega una manciata di secondi, ma, per non avere sorprese, è consigliabile controllare il tempo residuo sulla pagina del proprio profilo con regolarità.

Aggiornamento Avrete notato che il deploy precedente ricaricava tutti i file tramite ftp mettendoci una quantità di tempo non indifferente e non compatibile con i 50 minuti gratis del piano base di Bitbucket. Sto testando un flag aggiuntivo nella riga del comando lftp per evitare di sovrascrivere files già presenti e di dimensione uguale. Mi riferisco all’opzione –ignore-time. Con questo aggiornamento provo pure se funziona, incrociamo le dita.

Fonti: Jekyll e xam.io