Creare un blog senza spendere un euro

Eccoci qui al secondo post di questo blog, quasi non ci credo nemmeno io. Vedremo come creare un blog da zero e totalmente configurabile e personalizzabile a piacere, bastano le giuste conoscenze ed i giusti tools:

Competenze/Conoscenze

Terminale
git
HTML/CSS
Javascript ES6 e ReactJS

Tools

Editor (io uso VSCode)
Nodejs e npm
yarn (preferenza personale, potete usare npm)

Cosa è Airtable

Prima di iniziare la parte inerente il codice vediamo di introdurre Airtable, una piattaforma a metà tra un foglio di calcolo (tipo Microsoft Excel o Google SpreadSheet) ed un database, configurabile ed altamente personalizzabile.

Ma cosa lo rende speciale per il nostro blog? Airtable fornisce delle API che lo rendono in pratica il nostro backend perfetto. Abbiamo un database personalizzabile senza bisogno di sporcarci le mani con server, domande tipo quale database scegliere, usare un BaaS o comprare una VPS ed altre questioni di questo genere. Semplice ed efficace per l'utilizzo che dobbiamo farci.

Cosa è GatsbyJS

GatsbyJS è basato su ReactJS e sono entrambi due framework per creare web app. Nello specifico con ReactJS si creano delle single page application, SPA, che hanno notoriamente dei problemi a livello di SEO anche se Google ha dichiarato ultimamente di aver iniziato ad indicizzare anche siti web creati in Javascript, inoltre React è creato da Facebook.

GatsbyJS, creato da Kyle Mathews, fornisce un'astrazione sopra React e porta con sé dei vantaggi, uno su tutti è l'ottimizzazione del SEO posta al centro di Gatsby in quanto il sito viene prima "costruito" (non lo dirò mai compilato) e servito sul web in versione statica, ciò significa che sarà estremamente veloce nel caricamento delle pagine (praticamente pagine html/css statiche) ed i motori di ricerca non avranno problemi nell'indicizzazione dei contenuti perché non devono aspettare javascript che fa il rendering della web app. Per l'utente però non cambierà quasi nulla (a parte la velocità) perché il bundle in javascript verrà comunque caricato ed eseguito, quindi tutte le funzioni che avete programmato lato Gatsby/React rimarranno intatte. Un win-win per tutti.

Iniziamo

Per prima cosa iniziamo ad installare gatsby-cli con

yarn global add gatsby-cli
# OR
npm install -g gatsby-cli

A questo punto siamo pronti per creare un nuovo progetto con gatsby, chiamiandolo blog-airtable, entriamo nella cartella ed apriamo l'editor.

gastby new blog-airtable
cd blog-airtable
# apriamo l'editor, io uso vscode ed il comando è il seguente
code .

Appena avrà finito il comando per la creazione del nuovo progetto in gatsby avremo una cartella che avrà una struttura simile a questa:

> blog-airtable/
    - src
        - components
        - layouts
        - pages
    - gatsby-browser.js
    - gatsby-config.js
    - gatsby-node.js
    - gatsby-ssr.js
    - package.json

A questo punto possiamo passare all'installazione dei plugins di gatsby che ci aiuteranno a sviluppare il nostro blog.

Installiamoli in un colpo solo con il seguente comando

yarn add

Ecco la lista dei pacchetti npm e dei plugins per gatsby installati:

Pacchetti NPM

prismjs
prism-react-renderer
react-helmet
styled-components
styled-normalize
styled-reset
styled-system

Gatsby Source

gatsby-source-airtable
gatsby-source-filesystem e volete utilizzare dei file per creare le pagine del blog)

Gatsby Plugin

gatsby-plugin-collections
gatsby-plugin-fastclick
gatsby-plugin-google-analytics
gatsby-plugin-layout
gatsby-plugin-manifest
gatsby-plugin-mdx
gatsby-plugin-offline
gatsby-plugin-react-helmet
gatsby-plugin-preact
gatsby-plugin-sass
gatsby-plugin-sharp
gatsby-plugin-sitemap
gatsby-plugin-styled-components
gatsby-plugin-typography

Gatsby Remark

gatsby-remark-copy-linked-files
gatsby-remark-images
gatsby-remark-prismjs
gatsby-remark-responsive-iframe
gatsby-remark-smartypants

Gatsby Transformers

gatsby-transformer-remark
gatsby-transformer-sharp

Creiamo il nostro "database" su Airtable

A questo punto dobbiamo innanzitutto entrare su Airtable e creare una nuova Base, lo possiamo fare sia da browser che dall'app mobile.

La nostra nuova base si chiamerà "Blog" ed all'interno avrà la seguente struttura, replicarla è facile e si possono aggiungere altri campi a piacere.

All'interno della base "Blog" avremo una tabella che rinomineremo in "Posts".

Modifichiamo ed aggiungiamo i campi secondo la seguente struttura:

titolo - Single Line Text
data - Created Time (deselezioniamo "include Time field")
contenuto - Long Text
immagine - Attachment

Adesso ci manca l'ultimo step su Airtable: recuperare l'ID della base su airtable e salvarla per riutilizzarla dopo, basterà andare all'interno della base (la nostra si chiama "Blog") e cliccare su Help e subito dopo API Documentation. A questo punto vi si aprirà una nuova pagina che mostra le API della base e come poterle usare. A noi interessa salvare l'ID, troverete scritto qualcosa come:

The ID of this base is appXXXXXXXXXXXXXX

Salviamo l'ID da qualche parte per andarlo ad inserire tra qualche istante su gatsby.

Lavoriamo in locale al Blog

Siamo pronti per iniziare a dare forma al nostro blog, avviamo gatsby in locale e si aprirà una pagina nel browser che punterà su localhost:3000.

yarn develop
# oppure
gatsby develop

EXTRA: Se si vuole visualizzare il sito web su altri dispositivi sulla stessa rete LAN basterà aggiungere il parametro -H al comando come segue gatsby develop -H 0.0.0.0, dopo basterà navigare verso l'indirizzo locale del computer ricordando di aggiungere la porta 3000; l'IP sarà qualcosa come 192.168.1.xx:3000

Adesso possiamo modificare i file di configurazione di gatsby, iniziamo partendo con gatsby-config.js ed andiamo ad aggiungere tutti i plugins di gatsby, focalizzandoci su come configurare il plugin gatsby-source-airtable.

// gatsby-config.js

L'altro file da andare a modificare è gatsby-node.js che serve per creare i vari nodi interni a gatsby, e noi lo utilizzeremo per creare una pagina per ogni post che aggiungeremo alla nostra base su airtable.

// gatsby-node.js

Conclusione

Bonus - Pacchetti extra da tenere a mente

prismjs

link: PrismJS

E' utile per effettuare il rendering di codice permettendo di colorare la sintassi secondo le specifiche del linguaggio da mostrare.

prismjs

link: PrismJS

E' utile per effettuare il rendering di codice permettendo di colorare la sintassi secondo le specifiche del linguaggio da mostrare.