Usare Notion come CMS headless per creare un blog in Nuxt:parte 1
Come primo articolo del mio blog non potevo non partire sul raccontare le tecnologie che ho utilizzato per svilupparlo.
Scelte tecnologiche
Partiamo dallâinizio, lâidea era quella di non pagare nessun costo per hosting, database ecc⌠(sono pur sempre genovese đ) quindi la scelta dellhosting è ricaduta su Netlify che permette il deploy di siti statici e ha un ottimo piano gratuito.
Per sviluppare il blog ho deciso di sperimentare lâultima versione di Nuxtjs, per chi non lo conoscesse, ĂŠ un framework basato su Vuejs che grazie al server side rendering o alla generazione statica dellâapplicazione ci aiuta a risolvere i problemi legati alla SEO quando sviluppiamo in vuejs.
Per i contenuti dinamici, come gli articoli del blog per lâappunto, avevo bisogno di qualcosa di comodo, semplice e soprattutto gratuito đ , lâidea di utilizzare file in markdow, anche se Nuxt ha un modulo che facilitare lâintegrazione, non mi faceva impazzire, i vari cms headless presenti sul mercato avevano piani gratuiti che non soddisfavano le miei esigenze.
Essendo che utilizzo motion anche per decidere cosa mangiare la sera ho pensatoâŚperchĂŠ non usare Notion per i contenuti del mio blog?
Che cosâè Notion?
Notion è un applicazione gratuita che ci permettere di fare un poâ di tutto.
à inoltre possibile creare dei veri è proprio database con tabelle, anche relazionate fra di loro.
Creazione del database
Prima di tutto creiamo una pagina nella quale creare il nostro database.
Creiamo la tabella e inseriamoci le colonne di cui abbiamo bisogno.
Creazione dellâapi key
Per sfruttare le Api di Notion dobbiamo prima creare unâintegrazione e generare lâapi key.
A questo assegnamo la nostra integrazione al database creato in precedenza.
Creare Api custom in Nuxt
Nuxt essendo un framework full stack ci permette di effettuare chiamate Api sia lato client che lato server.
Inoltre nella sua ultima versione e grazie al server engine Nitro ha introdotto la possibilitĂ di creare le proprie Api direttamente allâinterno della cartella server.
Questo è molto interessante perchĂŠ nel caso in cui le nostre richieste Api abbiamo delle informazioni sensibili, come in questo caso lâapi key di Notion, possiamo creare le nostre api che facciano da âproxyâ verso il server di Notion.
Integriamo le Api di Notion
Installiamo e utilizziamo l sdk di notion
Recuperiamo i dati nei componenti
Ora non ci resta che recuperare questi dati direttamente nei nostri componenti. Et voilĂ
Conclusioni
Notion è un tool potentissimo e funziona molto bene come CMS Headless. In questo modo abbiamo ottenuto uno progetto completamente gratuito! Dal frontend, backend fino al deploy dellâapplicazione! đĽł
Prossimo step? Recuperare e creare una pagina per ogni singolo articolo, ma per questo ho deciso di dedicare u. Articolo a parte.
Fatemi sapere cosa ne pensate nei commenti, a presto