Deployer Astro sur Vercel

Deployer Astro sur Vercel

Pourquoi Deployer Astro sur Vercel ?

Deployer Astro sur Vercel est une démarche qui peut être bénéfique pour plusieurs raisons :

1. Vitesse et Performances : Vercel propose un réseau de distribution mondial, ce qui signifie que votre site sera rapidement accessible à partir de n'importe quel endroit du monde.
2. Facilité d'utilisation : L'intégration avec Vercel est très simple et intuitive, permettant aux développeurs de déploiement d'être moins qualifiés à réussir un déploiement réussi.
3. Optimisation automatique : Vercel offre des outils d'optimisation automatiques pour améliorer la performance de votre site web sans avoir à faire de modifications manuelles.

Un cas d'utilisation concret serait l'hébergement d'une application web statique, comme un blog, une documentation ou même un site e-commerce.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des connaissances suivantes :

• Connaissance de base d'Astro
• Compréhension des concepts de JavaScript/TypeScript
• Access à Vercel et compte GitHub (ou autre gestionnaire de dépôt)

Les outils que vous aurez besoin d'installer sont :

• Node.js v14.0.0 ou plus tard
• npm 6.0.0 ou plus tard

Vous pouvez vérifier si ces outils sont installés en exécutant les commandes suivantes dans votre terminal :

node -v
npm -v

Concepts fondamentaux

Création d'un projet Astro

Pour commencer, nous allons créer un nouveau projet Astro. Ouvrez votre terminal et exécutez la commande suivante :

npx create-astro my-site
cd my-site

Cette commande va créer un nouveau dossier my-site contenant une structure de base pour un projet Astro.

Lancement du développement

Pour démarrer le serveur de développement, exécutez :

npm run dev

Un navigateur s'ouvrira automatiquement et vous verrez votre site en cours de développement.

Mise en pratique : projet fil rouge

Nous allons créer un mini-projet complet : un simple blog avec des articles. Voici les étapes pour le réaliser :

1. Création des composants

Créez deux fichiers dans le dossier src/components :

• Article.astro
• Blog.astro

<!-- src/components/Article.astro -->
---
const { title, content } = props;
---

<article>
  <h2>{title}</h2>
  <p>{content}</p>
</article>
astro
<!-- src/components/Blog.astro -->
---
import Article from './Article.astro';
const articles = [
  { title: 'Mon premier article', content: 'Contenu de mon premier article' },
  { title: 'Mon deuxième article', content: 'Contenu de mon deuxième article' }
];
---

<main>
  <h1>Blog</h1>
  {articles.map(article => (
    <Article {...article} />
  ))}
</main>

2. Configuration du routeur

Astro utilise un système basé sur les fichiers pour le routing. Créez un fichier src/pages/index.astro :

<!-- src/pages/index.astro -->
---
import Blog from '../components/Blog.astro';
---

<Blog />

3. Ajout de styles

Ajoutez des styles globaux dans src/styles/global.css :

/* src/styles/global.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

Et importez ces styles dans src/pages/index.astro :

<!-- src/pages/index.astro -->
---
import Blog from '../components/Blog.astro';
import '../styles/global.css';
---

<Blog />

4. Vérification du projet

Assurez-vous que tout fonctionne en exécutant à nouveau le serveur de développement :

npm run dev

Ouvrez votre navigateur et allez sur http://localhost:3000. Vous devriez voir votre blog avec deux articles.

Erreurs frequentes et debugging

Erreur 1 : Le composant n'est pas affiché correctement

Code incorrect :

<!-- src/components/Article.astro -->
---
const { title, content } = props;
---

<article>
  <h2>{title}</h2>
  <p>{content}</p>
</article>

Correction :

Astro utilise des tags <component> pour les composants :

<!-- src/components/Article.astro -->
---
import { Component } from 'solid-js/web';
const Article: Component<{ title: string, content: string }> = ({ title, content }) => (
  <article>
    <h2>{title}</h2>
    <p>{content}</p>
  </article>
);
export default Article;

Erreur 2 : L'importation des fichiers échoue

Code incorrect :

<!-- src/pages/index.astro -->
---
import Blog from '../components/Blog';
---

<Blog />

Correction :

Astro nécessite l'extension du fichier lors de l'importation :

<!-- src/pages/index.astro -->
---
import Blog from '../components/Blog.astro';
---

<Blog />

Erreur 3 : Le serveur ne démarre pas

Code incorrect :

npm run dev

Correction :

Assurez-vous que vous êtes dans le bon dossier et que tous les fichiers nécessaires sont présents.

Pour aller plus loin

1. Intégration avec CMS (Content Management System) : Vous pouvez intégrer votre blog avec un CMS comme Notion ou Strapi pour gérer facilement vos articles.
2. Ajout d'une authentification utilisateur : Ajoutez une interface d'authentification pour permettre aux utilisateurs de poster des commentaires.
3. Optimisation SEO : Utilisez les balises <meta> et les tags <title> pour améliorer la visibilité de votre site sur les moteurs de recherche.

Défi pratique

Créez un simple portfolio en utilisant Astro et Vercel. Incluez des sections comme une présentation, un projet récent, une formation et un contact. Assurez-vous que le design est attrayant et que toutes les fonctionnalités (contact form, navigation) sont correctement implémentées.

Ce tutoriel vous a appris comment déployer un site web Astro sur Vercel en utilisant les concepts de base d'Astro et en abordant des erreurs courantes.