Créer son blog qui ne sert à rien, avec Sanity.io et Vite.js

Aujourd'hui, on va voir comment mettre en place un blog avec Sanity.io et Vite.js, puis le balancer sur AWS S3, le tout sans se prendre la tête, dans la joie et la bonne humeur

Pourquoi cette stack ?

C'est simple : Sanity.io pour gérer le contenu parce que c'est gratuit (enfin, dans la limite du raisonnable), et Vite.js parce que c'est rapide et qu'on a pas que ça à faire d'attendre que notre environnement de dev se lance.

Et parce que ça peut ouvrir vos chakras pour certains projets que vous voulez lancer en mode POC avant d'installer Nest et de mettre en place du DDD pour un truc qui n'en vaut (probablement) pas la peine.

La mise en place du bousin

1. Le Studio Sanity

Première étape, créez votre compte sur Sanity.io.

Une fois fait, vous allez pouvoir créer un studio localement :

npm create sanity@latest -- --template blog
cd mon-super-blog
npm install

Un studio, c'est un environnement spécifique à votre projet, que vous allez donc executer en local, et qui vous permet :

- d'avoir votre CMS en local

- de modifier son comportement et ajouter des fonctionnalités

- créer et modifier vos schemas

2. Les schemas, parlons-en

Dans votre Studio Sanity, vous allez devoir définir vos schemas.

// schemas/post.ts
import {defineArrayMember, defineField, defineType} from 'sanity'

export default defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: Rule => Rule.required()
    },
    {
      name: 'body',
      title: 'Body',
      type: 'array',
      of: [
        {type: 'block'},
        {
          type: 'code',
          options: {
            withFilename: true,
          }
        }
      ]
    }
  ]
})

Ici, c'est méga simple, on a un titre et un body (qui est un rich text editor basique mais qui fait le taff les trois quarts du temps)

Rien ne vous empêche de créer un schema avec d'autres types de champs, y compris des champs files / images, des champs date... le choix est assez large et customisable.

3. Vite.js, la partie front

Parce que jusqu'ici, on a juste créé et configuré notre source de données, mais on a encore rien pour les faire découvrir aux gens

On installe un client vite avec react

npm create vite@latest front -- --template react-ts
cd front
npm install @sanity/client

On créé le client Sanity :

// src/lib/sanity.ts
import { createClient } from '@sanity/client'

export const client = createClient({
  projectId: 'votre-project-id',
  dataset: 'production',
  useCdn: true,
  apiVersion: '2024-01-03'
})

Le project id est récupérable sur votre compte sanity.io

4. Les requêtes GROQ

Le truc cool avec Sanity, c'est GROQ. Je vous laisse naturellement le soin de le dire tout haut, en français, dans votre open space, en appuyant bien sur la dernière lettre.

Bref, groQ (oui, je sais, je suis lourd), c'est comme GraphQL mais en plus simple (enfin, une fois qu'on sait, c'est simple) :

// src/pages/Blog.tsx
import { useState, useEffect } from 'react'
import { client } from '../lib/sanity'

export default function Blog() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
        const fetchPosts = async () => {
            try {
                const result = await client.fetch(queries.posts);
                setPosts(result);
            } catch (error) {
                console.error('Erreur lors du chargement des articles:', error);
            } finally {
                setLoading(false);
            }
        };
        fetchPosts();
  }, [])

  return (
    <div>
      {/* Votre mise en page ici */}
    </div>
  )
}

Bien sûr, ici, on récupère juste la liste des posts. Si on voulait faire un vrai blog avec une page article, on ajouterait react-router-dom, on créerait un router, et on ajouterait aussi un slug dans le schema Sanity pour avoir un truc qui tient la route.

Si vous avez déjà une fois dans votre vie utilisé react-router-dom, ca devrait se faire sans problème.

Si vous venez de Next sans jamais avoir utilisé react-router-dom comme quelqu'un de normalement constitué, et bien, bah, c'est le moment d'apprendre.

Une fois que vous aurez une page qui tient la route, pensez à build, car on va avoir besoin du dist dans une minute pour le déploiement.

npm run build
npm run preview

Déploiement sur S3

Maintenant qu'on a notre petit bijou qui tourne en local, on va le balancer sur S3 parce que c'est pas cher et que ça marche bien.

1. Créez votre bucket S3
2. Activez l'hébergement statique dans les propriétés du bucket.
3. Buildez votre app :
4. Envoyez le build sur votre bucket
5. Si vous avez des soucis d'access denied, c'est que vous avez mal configuré votre bucket

Les limitations, parlons-en

Comme dans la vie, rien n'est parfait :

• L'offre gratuite de Sanity vous limite à 250k requêtes
• Deux utilisateurs max en gratuit (mais si comme moi, vous êtes seul, abandonné de tous, vous n'aurez pas de souci)
• AWS S3, c'est pas gratuit mais franchement, pour un blog, ça va pas vous ruiner

Pour conclure

Voilà, vous avez un blog qui tourne, qui coûte trois fois rien, et qui vous permet de vous concentrer sur ce qui compte vraiment : écrire du contenu ou tester une idée de projet / produit sans lancer l'artillerie lourde.

A vous de jouer maintenant