Skip to content

README.fr.md

Latest commit

 

History

History
220 lines (167 loc) · 5.75 KB

README.fr.md

File metadata and controls

220 lines (167 loc) · 5.75 KB

SiteHost

Une plateforme moderne d'hébergement de sites statiques avec gestion de fichiers et déploiement en temps réel. Statix est L'Alternative open-source a Netlify.

🇬🇧 English version

🚀 Fonctionnalités

  • Gestion de sites statiques : Uploadez et gérez facilement vos sites HTML/CSS/JS
  • Interface multilingue : Support du français et de l'anglais (changement de langue en temps réel)
  • Dashboard intuitif : Visualisez vos sites, statistiques et fichiers en un coup d'œil
  • Déploiement instantané : Vos sites sont accessibles immédiatement après upload
  • Routage par sous-domaine : Accédez à vos sites via slug.lvh.me:3000 ou /sites/id/
  • Fichier principal configurable : Choisissez quel fichier HTML servir par défaut
  • Authentification sécurisée : Système de login/register avec JWT
  • Gestion de fichiers : Upload, suppression et organisation de vos fichiers

🛠️ Technologies

Frontend

  • React 18 avec TypeScript
  • Vite pour le build et le dev server
  • Tailwind CSS pour le styling
  • shadcn/ui pour les composants UI
  • Zustand pour la gestion d'état
  • i18next pour l'internationalisation
  • Framer Motion pour les animations

Backend

  • Express.js pour l'API REST
  • SQLite pour la base de données (par défaut), avec support de MySQL/MariaDB et Supabase (Postgres)
  • Multer pour l'upload de fichiers
  • JWT pour l'authentification
  • bcrypt pour le hashage des mots de passe

📦 Installation

Prérequis

  • Node.js 18+ et npm
  • Git

Étapes d'installation

# Cloner le repository
git clone https://github.com/luoxthedev/static-site-host.git
cd static-site-host

# Installer les dépendances du frontend
npm install

# Installer les dépendances du backend
cd server
npm install
cd ..

🚀 Démarrage

Démarrage rapide (les deux serveurs)

# Dans le dossier racine, lancer le backend
npm run server

# Dans un autre terminal, lancer le frontend
npm run dev

Démarrage manuel

Backend (port 3000) :

cd server
npm start

Frontend (port 8080) :

npm run dev

🌐 Accès

⚙️ Configuration

Variables d'environnement

Créez un fichier .env dans le dossier server/ (voir server/.env.example) :

PORT=3000
JWT_SECRET=votre_secret_jwt_ici
SITES_ROOT=uploads

Configuration de la base de données

Statix supporte trois types de bases de données. Définissez DB_TYPE dans votre fichier .env :

SQLite (par défaut – fichier local, aucune installation requise)

DB_TYPE=sqlite
SQLITE_FILE=./database.sqlite

MySQL / MariaDB (VPS)

Installez d'abord le driver :

cd server && npm install mysql2
DB_TYPE=mysql
MYSQL_HOST=127.0.0.1
MYSQL_PORT=3306
MYSQL_USER=root
MYSQL_PASSWORD=votre_mot_de_passe
MYSQL_DATABASE=statix

Supabase (Postgres)

Installez d'abord le driver :

cd server && npm install pg

Utilisez ensuite la chaîne de connexion directe depuis le Dashboard Supabase (Settings → Database) :

DB_TYPE=supabase
SUPABASE_DB_URL=postgresql://postgres:password@db.xxxxx.supabase.co:5432/postgres
SUPABASE_SSL=true

Configuration du serveur

Modifiez server/config.js pour personnaliser :

module.exports = {
  appDomain: 'lvh.me',        // Domaine pour les sous-domaines
  port: 3000,                 // Port du serveur
  sitesRoot: 'uploads',       // Dossier de stockage des sites
  enableSubdomains: true      // Activer le routage par sous-domaine
};

📁 Structure du projet

.
├── src/                    # Code source frontend
│   ├── components/         # Composants React
│   ├── pages/             # Pages de l'application
│   ├── stores/            # State management (Zustand)
│   ├── locales/           # Fichiers de traduction (FR/EN)
│   └── lib/               # Utilitaires
├── server/                # Code source backend
│   ├── routes/            # Routes Express
│   ├── middleware/        # Middleware (auth, etc.)
│   ├── database/          # Adaptateurs de base de données (sqlite, mysql, supabase)
│   ├── uploads/           # Sites hébergés
│   ├── database.js        # Initialisation de la base de données (sélection d'adaptateur)
│   └── index.js           # Point d'entrée backend
└── public/                # Assets statiques

🔑 Fonctionnalités principales

Gestion des sites

  • Créer un nouveau site avec nom et slug
  • Uploader des fichiers (HTML, CSS, JS, images, etc.)
  • Définir un fichier principal personnalisé
  • Supprimer des fichiers
  • Redéployer un site

Authentification

  • Inscription avec nom, email et mot de passe
  • Connexion avec JWT
  • Option "Se souvenir de moi"
  • Mot de passe oublié

Dashboard

  • Vue d'ensemble de tous vos sites
  • Statistiques : nombre de sites, sites actifs, stockage utilisé
  • Recherche et filtrage de sites
  • Accès rapide à la gestion de chaque site

Internationalisation

  • Basculer entre français et anglais
  • Changement de langue en temps réel
  • Persistance de la préférence linguistique

🧪 Scripts disponibles

npm run dev          # Démarrer le frontend en mode développement
npm run build        # Compiler le frontend pour la production
npm run preview      # Prévisualiser le build de production
npm run server       # Démarrer le backend

📝 License

MIT

👨‍💻 Auteur

Développé par luoxthedev