Usare Notion come CMS headless per creare un blog in Nuxt:parte 2

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.

  import { Client } from "@notionhq/client";

const notion = new Client({
  auth: process.env.NOTION_SECRET_KEY,
});

Integriamo le Api di Notion

Installiamo e utilizziamo l sdk di notion

  npm install @notionhq/client

Recuperiamo i dati nei componenti

Ora non ci resta che recuperare questi dati direttamente nei nostri componenti. Et voilà

  .prova { color: red; }

header {
  background: red;
  color: black;
}

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