Click: la mia galleria d’immagini basata su Photo Stream

| |

Click è un esperimento, un piccolo deposito immagini che sfrutta lo spazio messo a disposizione da GitHub, un software scritto da Tim Van Damme e il servizio erogato da Netlify in maniera gratuita che ti permette di portare in vita una galleria immagini molto leggera, molto immediata, senza nessun tipo di “dettaglio“, solo i tuoi scatti, un feed RSS aggiornato e la possibilità di arrivare a una fotografia in particolare grazie a un URL diretto. So benissimo di avere il mio Photoblog (Gioxx’s Photowall: quell’esperimento partito forse nell’anno sbagliato) ma adoro sperimentare e scoprire sempre qualcosa di nuovo, qualcosa di ospitato su GitHub è davvero molto interessante.

A photograph is something I cherish deeply. It’s a physical piece of a moment in time. Something about that is incredibly beautifully to me. I want to continue to capture moments in life to be remembered.
Photo by Priscilla Du Preez on Unsplash

Photo Stream

Photo stream is a simpler home for your photos by @maxvoltar and friends. Easy to use, self hosted, no tracking, just photos.

Si tratta di un repository GitHub che puoi facilmente clonare e preparare per portare online i tuoi scatti e i tuoi riferimenti, è una bell’idea e l’effort che serve per metterla in piedi e renderla operativa è davvero molto basso. Parte tutto dalla clonazione del lavoro fatto da @maxvoltar che trovi all’indirizzo github.com/maxvoltar/photo-stream. Una volta eseguita l’operazione ti basterà entrare nella cartella photos/original e cancellarne completamente il contenuto. Copia in questa cartella le fotografie che vuoi esporre sul Web, nel frattempo spostiamoci sulla configurazione del software. Nella cartella principale troverai il file _config.yml nel quale modificare:

  • title: il titolo che vuoi dare al tuo Photo Stream.
  • email: il tuo indirizzo di posta elettronica (opzionale, puoi anche eliminare questa riga).
  • author
    • name: il tuo nome.
    • email: il tuo indirizzo di posta elettronica.
    • website: il tuo sito web (potrebbe anche essere l’indirizzo del tuo Photo Stream).
  • description: descrizione del tuo Photo Stream.
  • baseurl: puoi lasciare "" ⚠️ Non cambiare questo parametro se non sai cosa stai facendo.
  • url: l’indirizzo che i tuoi visitatori vedranno nella barra dell’URL (nel mio caso: https://click.gioxx.org).
  • twitter_username: il tuo nome utente su Twitter (senza la chiocciola, quindi nel mio caso semplicemente gioxx).
  • github_username: il tuo nome utente su Github.
  • instagram_username: il tuo nome utente su Instagram.

I collegamenti al tuo profilo GitHub e Instagram sono nascosti da configurazione predefinita di Photo Stream. Modifica il file index.html e togli i commenti applicati alle righe dei due profili. Puoi anche aggiungere altri profili a tuo piacimento semplicemente aggiungendo un punto dell’elenco alla lista <ul class="links"> (con un nuovo <li> con class="link"). Dovresti poter ottenere un file index.html molto simile (se hai tolto i commenti):

<!doctype html>
<html>
{% include head.html %}
<body>
    {% assign target = "target" %}
    <ul class="grid" id="{{ target }}">
        {% assign images = page.images | default: site.static_files | photo_filter %}
        {% include photos.html %}
        </ul>
        <ul class="links">
            <!-- You can add links (to your social media profiles for example) below -->
            <li class="rss"><a rel="alternate" type="application/rss+xml" href="{{ site.url }}feed.xml" title="RSS Feed">RSS Feed</a></li>
            <li class="github"><a rel="me" href="https://github.com/maxvoltar/photo-stream" title="Fork on Github">Github</a></li>
            <li class="link"><a rel="me" href="https://twitter.com/{{ site.twitter_username }}" title="@{{ site.twitter_username }} on Twitter">Twitter</a></li>
            <li class="link"><a rel="me" href="https://github.com/{{ site.github_username }}" title="@{{ site.github_username }} on Github">Github</a></li>
            <li class="link"><a rel="me" href="https://instagram.com/{{ site.instagram_username }}" title="@{{ site.instagram_username }} on Instagram">Instagram</a></li>
        </ul>
        {% include javascript.html %}
        {% if page.image_slug %}
            <script src="{{ '/js/photos.js' | relative_url }}" data-photo-id="{{ page.image_slug }}" data-photo-url="{{ page.image_slug | relative_url }}" data-target-id="{{ target }}"></script>
        {% endif %}
</body>
</html>

Sei ormai pronto per andare online. Fai push delle tue modifiche su GitHub in modo da avere il tuo repository completamente aggiornato e già pronto per la seconda fase. Nel frattempo collegati a Netlify e accedi con l’account di GitHub per tua comodità.

Configurare Netlify

Crea la tua prima applicazione su Netlify e chiedigli di collegarsi ai tuoi repository su GitHub, dai gli accessi necessari e poi seleziona – ovviamente – il repository che hai preparato con il tuo Photo Stream. Lascia tutto invariato ma compila nelle opzioni di Build & deploy i campi relativi al Build command e alla Publish directory rispettivamente con jekyll build e _site/, ottenendo quindi un risultato molto simile a questo:

Click

Lascia che Netlify si occupi di compilare automaticamente una nuova build ogni volta che effettuerai delle modifiche rilasciandole su GitHub, così che tu non debba più preoccuparti di nulla e che il tuo Photo Stream sia sempre aggiornato alla versione più recente (Continuous Deployment, nda).

L’account Netlify è gratuito e di base propone una serie di interessanti caratteristiche per chi vuole sperimentare un po’ (ci sono poi piani a pagamento ben più ricchi per chi necessita più gas):

  • 1 team member (servono 15 dollari per aggiungerne un altro ma non credo ti serva farlo).
  • 1 concurrent build (e basta e avanza, credimi).
  • 100GB bandwidth/month (questo dovrebbe bastarti almeno per qualche tempo, soprattutto perché le tue fotografie vengono ridimensionate prima della pubblicazione e magari agli inizi avrai poche visualizzazioni).
  • 300 build minutes/month (considera che ogni build impiega circa 5 minuti ad andare a buon fine o fallire completamente, ciò vuol dire che teoricamente potresti arrivare fino a 60 modifiche al mese).
  • Continuous deployment.
  • Accesso agli add-ons.

Al termine dell’operazione di build su Netlify potrai accedere alla tua galleria visitando l’URL che ti viene fornito dal servizio. Se vuoi utilizzare un tuo dominio personalizzato (ammesso tu abbia un tuo dominio di primo livello e accesso al tuo pannello DNS) consulta il documento ufficiale all’indirizzo docs.netlify.com/domains-https/custom-domains/configure-external-dns/#configure-a-subdomain.

Il mio risultato è visibile – come forse avrai capito – all’indirizzo click.gioxx.org.

In conclusione

Molto interessante sì, vai a perdere però tutto quello che riguarda i commenti, le visualizzazioni (a meno di abilitare le Analytics di Netlify, a pagamento), la storia che c’è dietro (a meno di proporre le foto in questa maniera e parlarne in un articolo del blog, proponendole al suo interno) ma ehi, non è sempre di vitale importanza. Si tratta come detto di un esperimento, è carino, mi è piaciuto e manterrò quel dominio vivo e con qualche fotografia aggiunta di tanto in tanto.

Fammi sapere se pubblicherai il tuo Photo Stream e a quale indirizzo trovarlo! 🙂

#StaySafe

Gioxx's Wall

Se hai correzioni o suggerimenti puoi lasciare un commento nell'apposita area qui di seguito o contattarmi privatamente.
Ti è piaciuto l'articolo? Offrimi un caffè! Satispay / PayPal / Buy Me A Coffee / Patreon

Condividi l'articolo con i tuoi contatti: