Déployer un site statique gratuitement avec Tebi.io

Bienvenu(e) dans ce nouveau guide où je vous explique, pas à pas et de façon claire, comment mettre en ligne un site web statique en utilisant l’offre gratuite de Tebi.io un stockage en ligne compatible S3 (Simple Storage Service). L’approche présentée couvre la création d'un bucket, la configuration d’accès, la liaison d’un domaine via DNS (CNAME), un test d’upload avec AWS CLI et l’automatisation du déploiement depuis GitHub Actions si vous souhaitez avoir vos changements en un temps record depuis une modification de votre code source (Continuous Deployment).

Introduction

Héberger un site statique consiste à servir des fichiers HTML, CSS, JavaScript et des images tels quels, sans génération de pages côté serveur. Tebi.io fournit un stockage d’objets compatible S3 et une couche d’hébergement statique: vous y déposez juste vos fichiers et ils sont accessibles directement depuis internet ! Cela en fait une solution adaptée aux portfolios, landing pages ou petits blogs statiques. L’unique coût éventuel est l’achat d’un nom de domaine mais si vous en possédez déjà un, l’hébergement peut rester gratuit et cela à vie ! (5GB max pour la version gratuite)

Prérequis

Avant de commencer, assurez-vous d’avoir à disposition :

• Un compte Tebi.io.
• Un nom de domaine ou la possibilité d’utiliser un sous-domaine. (Si vous n’avez pas encore de domaine, c’est le seul élément payant nécessaire pour ce guide.)
• Un dépôt Git (GitHub recommandé).
• Un poste de travail avec AWS CLI installé (ou la possibilité de l’installer).
• Les identifiants de votre registrar pour pouvoir modifier les enregistrements DNS.

Mais c'est quoi un site statique ?

Un site statique délivre directement au navigateur des fichiers préexistants, stockés sur un serveur ou dans un service de stockage d’objets, sans modification au moment de la consultation. À l’inverse, un site dynamique génère ses pages à la volée à l’aide de code exécuté côté serveur, souvent en interaction avec une base de données.

L’hébergement statique se distingue par sa simplicité, ses performances élevées et sa sécurité accrue, grâce à une surface d’attaque réduite. En revanche, il n’est pas adapté aux fonctionnalités nécessitant un traitement serveur complexe, comme l’authentification avancée ou la gestion de bases de données en temps réel.

Avantages et limites succinctes

L’hébergement statique sur Tebi.io offre une mise en ligne rapide, une gestion simplifiée des fichiers et un accès sécurisé via HTTPS automatiquement pris en charge par la plateforme. Ses limites résident toutefois dans l’absence de logique serveur native : pour intégrer des API, mettre en place une authentification avancée ou gérer une base de données, il faudra recourir à des services externes tels que des fonctions serverless ou des API tierces. Ces aspects sortent cependant du cadre de ce guide. Ici, nous allons mettre en place une solution simple, efficace et prête à accueillir votre prochain projet statique.

Création du bucket et génération des clés d'accès

Connectez-vous à la console Tebi et créez un bucket. Il est important de nommer ce bucket exactement comme l’hôte que vous souhaitez utiliser, car Tebi utilise ce nom pour le mode virtual hosting et pour déterminer quel contenu servir selon le header Host des requêtes.

Comme un domaine racine (par exemple kraaakilo.com) ne peut pas avoir d’enregistrement CNAME, nous devons utiliser un sous-domaine pour faire pointer notre DNS vers Tebi. Dans notre exemple, nous choisissons hosting.kraaakilo.com. Le bucket sera donc nommé exactement hosting.kraaakilo.com, et le site sera accessible via https://hosting.kraaakilo.com.

Exemples concrets :

• Sous-domaine pour un domaine existant : si vous possédez domaine-principal.com, vous pouvez créer un bucket hosting.domaine-principal.com et configurer dans votre gestionnaire DNS un enregistrement CNAME hosting pointant vers l’alias fourni par Tebi (par exemple hosting.domaine-principal.com.s3.tebi.io).

Après la création du bucket, générez une paire de clés d’accès (Access Key et Secret Key) depuis l’interface Tebi et conservez-les en lieu sûr. Ces clés seront nécessaires pour authentifier vos commandes AWS CLI et vos workflows GitHub Actions dans la suite du guide.

Une fois le bucket créé, générez une paire de clés d’accès (Access Key et Secret Key) depuis l’interface Tebi. Il est crucial de conserver ces informations en lieu sûr, car elles seront utilisées pour authentifier vos commandes AWS CLI ainsi que vos workflows GitHub Actions dans les étapes suivantes du guide.

HTTPS sur Tebi

Tebi offre une gestion automatique des certificats TLS via Let’s Encrypt pour les buckets configurés en mode hosting virtual. Pour notre domaine hosting.kraaakilo.com, nous allons activer trois options importantes dans l’interface : Enable, HTTPS Certificate et Force HTTPS.

Cette configuration permet d’installer automatiquement un certificat TLS pour votre domaine personnalisé, garantissant que toutes les connexions au site soient sécurisées en HTTPS sans intervention manuelle.

Pour plus de détails, vous pouvez consulter la documentation officielle de Tebi sur le hosting virtual : Tebi Docs – Virtual Hosting.

Comprendre et configurer le CNAME (explication claire)

Le CNAME (Canonical Name) est un enregistrement DNS qui permet de faire d’un nom d’hôte un alias d’un autre nom d’hôte. Pour relier notre sous-domaine à notre bucket Tebi, nous allons créer dans notre gestionnaire DNS un enregistrement CNAME pour hosting (ici mon sous-domaine) qui pointe vers l’hôte fourni par Tebi Tebi Docs – Virtual Hosting.

Lorsque quelqu’un accède à hosting.kraaakilo.com, la résolution DNS renvoie l’alias, mais le header Host reste hosting.kraaakilo.com. Tebi utilise ce header pour identifier et servir le contenu du bucket correspondant.

Comme indiqué précédemment, un domaine principal (ou racine) comme kraaakilo.com ne peut généralement pas avoir d’enregistrement CNAME. Dans ce cas, nous utilisons un sous-domaine, par exemple hosting.kraaakilo.com, pour pointer vers notre bucket Tebi. Nous pouvons ensuite configurer une redirection du domaine principal vers ce sous-domaine, ou utiliser un enregistrement ALIAS/ANAME si le registrar le permet, afin que les visiteurs accédant à kraaakilo.com soient redirigés vers le site hébergé sur Tebi.

Une fois le CNAME configuré, nous pouvons accéder à notre bucket via le sous-domaine hosting.kraaakilo.com. Selon la localisation et la rapidité des serveurs DNS, il peut être nécessaire d’attendre un certain temps pour que la propagation DNS se fasse complètement. Une fois cette propagation terminée, comptez généralement quelques minutes (jusqu’à 5 minutes) pour que Tebi installe automatiquement le certificat TLS pour votre nom de domaine, assurant ainsi un accès sécurisé en HTTPS.

Installer et configurer AWS CLI (profil Tebi)

Pour interagir avec votre bucket Tebi depuis votre poste de travail ou vos workflows CI, nous allons utiliser AWS CLI, l’outil officiel en ligne de commande pour les services compatibles S3. Même si Tebi n’est pas AWS, son stockage est compatible S3, ce qui permet d’utiliser AWS CLI pour l’upload et la synchronisation des fichiers.

Installation

Vous pouvez installer AWS CLI selon votre système d’exploitation en suivant le lien officiel : Installer AWS CLI

Après installation, vérifiez que AWS CLI est correctement installé en ouvrant un terminal et en tapant :

aws --version

Vous devriez obtenir un retour indiquant la version de l’outil.

Configuration du profil Tebi

Pour utiliser AWS CLI avec Tebi, créez un profil dédié dans le fichier ~/.aws/credentials :

[tebi]
aws_access_key_id = VOTRE_ACCESS_KEY
aws_secret_access_key = VOTRE_SECRET_KEY

Remplacez VOTRE_ACCESS_KEY et VOTRE_SECRET_KEY par les clés générées dans l’interface Tebi. Ce profil permettra de différencier vos commandes Tebi d’éventuelles commandes AWS officielles si vous en utilisez également.

Pour tester la configuration, vous pouvez créer et uploader un simple fichier de test dans votre bucket Tebi. Vous pouvez utiliser l’éditeur de votre choix pour créer ce fichier ; pour ma part, j’utilise vim :)

vim test.txt
# puis ajoutez "Hello Tebi" dans le fichier et enregistrez

Ensuite, uploadez-le avec AWS CLI :

aws s3 cp test.txt s3://hosting.kraaakilo.com/ --profile tebi --endpoint-url https://s3.tebi.io

• aws s3 cp : commande AWS CLI pour copier un fichier (cp) vers ou depuis un bucket S3.
• test.txt : le fichier local que nous voulons uploader.
• s3://hosting.kraaakilo.com/ : le chemin du bucket Tebi, en utilisant la syntaxe S3.
• --profile tebi : indique à AWS CLI d’utiliser le profil tebi que nous avons configuré avec nos clés d’accès Tebi.
• --endpoint-url https://s3.tebi.io : redirige AWS CLI vers le service Tebi au lieu d’AWS officiel.

En résumé, même si Tebi n’est pas AWS, son stockage est compatible S3. Nous utilisons donc AWS CLI avec un endpoint personnalisé pour interagir avec Tebi comme s’il s’agissait d’un bucket S3 standard.

Après cette commande, votre fichier test.txt devrait être accessible depuis hosting.kraaakilo.com/test.txt.

une fois la propagation effectuée.

Automatiser le déploiement avec GitHub Actions

Pour simplifier le déploiement de votre site statique sur Tebi, nous allons utiliser GitHub Actions. Cela permettra de publier automatiquement toutes les modifications que vous poussez sur la branche master.

Création du projet

Pour un projet React moderne, utilisez Vite :

npm create vite@latest
# Choisissez React + TypeScript ou React + JavaScript selon vos préférences
cd nom-du-projet
pnpm install

Pour un site statique simple (HTML, CSS, JS), vous pouvez directement créer vos fichiers dans un dossier dédié (public ou autre).

Vérifiez que tout fonctionne localement avant de passer au dépôt GitHub.

Création du dépôt GitHub et push initial

1. Créez un dépôt vide sur GitHub.
2. Dans votre projet local, initialisez git et ajoutez le dépôt distant :

git init
git add .
git commit -m "Initial commit"
git branch -M master
# ici utilisez votre repo
git remote add origin git@github.com:kraaakilo/hosting.git
git push -u origin master

Workflow GitHub Actions

Créez le fichier .github/workflows/deploy.yml dans votre projet avec le contenu suivant :

Attention ! Les secrets TEBI_AWS_ACCESS_KEY_ID et TEBI_AWS_SECRET_ACCESS_KEY doivent être configurés dans Settings > Secrets du dépôt pour sécuriser vos clés avant de lancer le workflow !

name: Deploy to Tebi S3 on Commit

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: Install pnpm
        run: npm install -g pnpm # Supprimez ce bloc pour un site statique simple

      - name: Install dependencies
        run: pnpm install # Supprimez ce bloc pour un site statique simple

      - name: Build project
        run: pnpm run build  # Supprimez ce bloc pour un site statique simple

      - name: Setup AWS config with checksum options
        run: |
          mkdir -p ~/.aws
          cat > ~/.aws/config <<EOF
          [default]
          region = us-east-1
          request_checksum_calculation = WHEN_REQUIRED
          response_checksum_validation = WHEN_REQUIRED
          EOF

      - name: Deploy to Tebi S3
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.TEBI_AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.TEBI_AWS_SECRET_ACCESS_KEY }}
          BUCKET_NAME: hosting.kraaakilo.com
          LOCAL_DIR: dist  # Remplacez par votre dossier pour un site statique simple
          ENDPOINT_URL: https://s3.tebi.io
        run: |
          aws s3 rm s3://$BUCKET_NAME --recursive --endpoint-url $ENDPOINT_URL
          aws s3 cp $LOCAL_DIR s3://$BUCKET_NAME --recursive --endpoint-url $ENDPOINT_URL --acl public-read

Explications

• Le workflow se déclenche à chaque push sur master.
• Pour un projet React/Vite, pnpm run build génère le dossier dist. Pour un site statique simple, supprimez cette étape et indiquez le dossier contenant vos fichiers.
• AWS CLI upload les fichiers dans votre bucket Tebi, rendant le contenu accessible publiquement via votre sous-domaine (hosting.kraaakilo.com).
• L’endpoint https://s3.tebi.io permet à AWS CLI d’envoyer les fichiers vers Tebi plutôt que vers AWS S3 officiel.

Avec ce workflow, chaque modification poussée sur GitHub sera automatiquement déployée sur votre bucket, avec HTTPS actif sur votre sous-domaine.

Conclusion

Héberger un site statique sur Tebi.io permet une mise en ligne rapide, simple et sécurisée grâce au HTTPS automatique et au déploiement automatisé via GitHub Actions. Contrairement à GitHub Pages, qui nécessite un compte pro pour publier des repos privés, cette méthode n’impose aucune contrainte de ce type, ce qui la rend idéale pour tout projet statique, portfolio ou site vitrine.

Ses limites restent liées à l’absence de logique serveur : authentification complète, bases de données ou APIs avancées nécessitent des services externes. Malgré cela, pour un site statique simple, Tebi.io offre une solution efficace, gratuite et facile à maintenir.

Sources

• Tebi.io Documentation
• AWS CLI
• GitHub Actions Documentation
• StaticGen – Static Websites
• ICANN – Domain Registrars