Projet MRS — Site du restaurant avec Jekyll et Firebase

🌐 Site en ligne : https://mrss-33d14.web.app/

Présentation du projet

MRS est un site statique réalisé pour un restaurant local, destiné à présenter le menu hebdomadaire ainsi que les actualités du restaurant.
Le site a été développé avec Jekyll, un générateur de sites statiques très populaire, et est hébergé sur Firebase Hosting, garantissant une mise en ligne rapide, sécurisée et fiable.

Ce projet vise à fournir une interface simple, esthétique et facile à mettre à jour pour les clients, sans passer par des systèmes complexes.

Objectifs du projet

• Créer un site statique simple à maintenir et à mettre à jour.
• Utiliser Jekyll pour générer automatiquement les pages à partir de fichiers Markdown.
• Héberger le site sur Firebase pour bénéficier d’une infrastructure scalable et rapide.
• Afficher le menu hebdomadaire avec une mise à jour régulière facile.
• Intégrer des animations et un design moderne pour une meilleure expérience utilisateur.

Architecture du projet

1. Génération statique avec Jekyll

Le site est construit autour de fichiers Markdown et templates Liquid qui permettent de générer des pages HTML statiques.
Chaque semaine, je mets à jour le menu dans un fichier Markdown spécifique, puis je recompile le site avec Jekyll.

Exemple d’un fichier menu-semaine.md :

1
2
3
4
5
6
7

---
title: "Menu de la semaine"
date: 2025-06-01
---
- Entrée : Salade de saison
- Plat : Poulet rôti, légumes grillés
- Dessert : Tarte aux pommes maison

2. Structure Jekyll

Le site utilise la puissance des templates pour automatiser la génération du contenu :

1
2
3
4
5
6
7
8
9

{% for menu in site.menus %}
  <div class="menu-card">
    <h3>{{ menu.title }}</h3>
    <p class="date">{{ menu.date | date: "%d/%m/%Y" }}</p>
    <div class="content">
      {{ menu.content }}
    </div>
  </div>
{% endfor %}

Cette approche permet de :

• Séparer le contenu de la présentation : le restaurant peut modifier les menus sans toucher au code
• Automatiser la génération : Jekyll compile automatiquement toutes les pages
• Maintenir la cohérence : un seul template pour tous les menus

3. Hébergement Firebase Hosting

Le déploiement sur Firebase Hosting offre plusieurs avantages cruciaux :

1
2
3
4

# Déploiement simple avec Firebase CLI
firebase init hosting
jekyll build
firebase deploy

Avantages de Firebase Hosting :

• Performance : CDN mondial pour un chargement rapide partout
• Sécurité : HTTPS automatique et certificats SSL gratuits
• Scalabilité : Gestion automatique du trafic
• Simplicité : Déploiement en une commande

🛠️ Technologies utilisées

• Jekyll : Générateur de sites statiques en Ruby
• Sass/SCSS : Préprocesseur CSS pour un code maintenable
• Firebase Hosting : Plateforme d’hébergement rapide et sécurisée
• Firebase CLI : Outil de déploiement en ligne de commande
• Git/GitHub : Versioning et collaboration

🚀 Processus de développement et déploiement

Workflow de mise à jour hebdomadaire

1. Création du menu : Édition d’un nouveau fichier Markdown
2. Test local : jekyll serve pour prévisualiser les modifications
3. Génération : jekyll build pour compiler le site
4. Déploiement : firebase deploy pour mettre en ligne

📈 Apprentissages techniques

Ce projet m’a permis de maîtriser :

Générateurs de sites statiques

• Compréhension approfondie de Jekyll et de son écosystème
• Maîtrise des templates et de leur syntaxe
• Configuration avancée avec _config.yml et plugins

DevOps et déploiement

• Utilisation de Firebase CLI pour l’automatisation
• Mise en place de pipelines de déploiement efficaces
• Gestion des variables d’environnement et configurations

🌟 Points forts du projet

1. Solution adaptée : Architecture simple mais professionnelle, parfaite pour les besoins du restaurant
2. Maintenabilité : Code propre et structure claire permettant des évolutions faciles
3. Performance exceptionnelle : Site ultra-rapide grâce à l’approche statique
4. Économique : Solution peu coûteuse avec hébergement Firebase gratuit
5. Évolutif : Base solide pour ajouter de nouvelles fonctionnalités