De l’application locale au site Web public en quelques minutes

je vais vous montrer 3 façons entièrement gratuites de déployer rapidement une application Web simple afin qu’elle soit accessible au public sur Internet. Par « simple », j’entends une application Web statique, c’est-à-dire une application qui n’a pas de base de données back-end, de comptes d’utilisateurs ou de logique côté serveur.

Même si cela peut sembler un peu limitatif, vous pouvez encore faire beaucoup de choses avec uniquement du HTML, du CSS et du JavaScript.

Puisque l’accent est mis sur différentes méthodes de déploiement, je ne consacrerai pas beaucoup de temps à l’application Web elle-même.

Je voulais un petit projet simple, mais suffisamment réel pour être déployé et partagé. J’ai donc demandé à Codex de créer un jeu par navigateur, un simple jeu de tir de style Space Invaders que l’agent a décidé d’appeler Défenseur Starline.

Le jeu est facile à jouer. Vous déplacez un petit vaisseau de gauche à droite avec les touches fléchées, tirez sur les extraterrestres entrants en utilisant la barre d’espace, vous cachez derrière des boucliers, perdez des vies lorsque vous êtes touché et vous déplacez à travers des vagues plus rapides à mesure que le score augmente. Il fonctionne avec les commandes clavier sur ordinateur et les commandes tactiles sur mobile. Je laisserai à la fin les liens vers les trois URL d’application sur lesquelles j’ai déployé, afin que vous puissiez jouer avec elles vous-même.

Voici l’invite que j’ai utilisée.

Créez une application Web simple contenant du HTML, du CSS et du javascript qui est un simple jeu de type Space Invaders.

Après environ 16 minutes, le Codex a craché ceci.

Worked for 16m 45s

I'll build this as a single self-contained HTML file with embedded CSS and 
JavaScript, using canvas so it runs anywhere without a build step. I'll keep 
the existing downloader file untouched and add a new game page.
I'm going to include the whole game in one file: canvas rendering, alien 
waves, shields, scoring, lives, levels, keyboard controls, and on-screen 
controls for touch devices. After that I'll open it locally through the 
existing localhost server and do a quick visual sanity check.
Created 1 file

The game file is in place. I'm checking it through localhost now so we can 
catch blank canvas issues, script errors, or layout problems before I hand it 
over.
Verify game page

The page loads over localhost. The browser's read-only page check couldn't 
inspect canvas pixels directly, so I'm switching to a screenshot and 
console-log check, which is the right kind of sanity test for this 
canvas-heavy page.
Screenshot game

The screenshot found one layout wrinkle: on a short viewport the game board 
shrinks but hugs the left side, leaving dead space to the right. I'm centering 
and constraining the board dimensions so it looks intentional on both 
mobile-sized and desktop-sized panes.
Edited 1 file

I've patched the responsive sizing. I'm reloading the page now and doing 
one interaction pass: start the game, confirm the canvas updates, and check 
that there are no console errors.
Verify updated game
Done. I created the single-file SPA here:
starline-defenders.html
You can play it in the in-app browser at:
http://127.0.0.1:8765/starline-defenders.html

I also verified it loads, starts, renders the canvas, and has no browser 
console errors.

J’ai testé le jeu localement et cela a bien fonctionné. Alors maintenant, déployons-le sur le Web pour que le monde puisse s’émerveiller de sa génialité !

Les systèmes de déploiement que nous examinerons sont : –

1. Pages GitHub
2. ici.maintenant
3. Étreindre les espaces du visage

Pour éviter tout doute, outre le fait d’être un utilisateur de ces systèmes, je n’ai aucune association, affiliation ou lien avec l’une des sociétés mentionnées ci-dessus.

Pré-requis généraux

La plupart des hôtes statiques s’attendent à ce que la page d’accueil soit nommée index.html, la première chose à faire est donc de renommer notre fichier starline-defenders.html. Pour ce projet, c’est tout ce dont nous avons besoin, car tous nos actifs et notre code se trouvent dans ce seul fichier.

Créez un dossier vide sur votre système local, par exemple starline-defenders/ et copiez-y le fichier index.html.

Méthode 1 : déployer avec les pages GitHub

GitHub Pages est un choix classique pour les petits sites statiques et les applications Web comme celui-ci. Si votre projet réside déjà dans GitHub, il s’agit généralement du déploiement permanent le plus simple.

Les pages GitHub peuvent servir du HTML, CSS, JavaScript, des images et d’autres ressources statiques directement à partir d’un référentiel. Pour un jeu à un seul fichier, comme celui-ci, c’est toute l’infrastructure dont vous avez besoin.

Ce dont vous avez besoin

Les conditions préalables à l’installation de GitHub sont : –

• Un compte GitHub
• Git Bash installé localement
• Un référentiel GitHub public. Ceci est essentiel pour un déploiement gratuit.

Étape 1 : Créez un compte GitHub

Aller à https://github.com et cliquez sur le bouton S’inscrire en haut à droite de l’écran.

Étape 2 : Installez l’application git bash

Git, via son interface de ligne de commande Bash, vous permet d’interagir avec GitHub, par exemple en copiant des fichiers dans des référentiels.

Obtenez-le en cliquant :

https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

et en suivant les instructions d’installation appropriées à votre système local.

Étape 3 : Créer un nouveau référentiel

Connectez-vous à votre compte GitHub et créez un nouveau référentiel appelé, par exemple :

défenseurs starline

Assurez-vous qu’il s’agit d’un référentiel public.

Étape 4 : placez votre fichier index.html dans le référentiel public

Pour ce faire, ouvrez le terminal de ligne de commande Git Bash, puis modifiez le répertoire vers le dossier local contenant votre fichier index.html. Tapez maintenant les commandes suivantes dans Git Bash.

git init
git config --global user.email "[email protected]"
git config --global user.name "Your Name"
git add index.html
git commit -m "Add space invaders type game"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/starline-defenders.git
git push -u origin main

Remplacez `YOUR_USERNAME` par votre nom d’utilisateur GitHub.

Étape 5 : Activer les pages GitHub

Ouvrez le nouveau dépôt sur GitHub, puis :

1. Accédez à Paramètres.
2. Ouvrez Pages dans la barre latérale gauche.
3. Sous Création et déploiement, choisissez Déployer à partir d’une branche.
4. Définissez la branche source sur « main ».
5. Définissez le dossier sur « /root ».
6. Cliquez sur Enregistrer.

GitHub commencera à publier le site. Cela prend généralement une minute ou deux, et votre URL finale ressemblera à ceci :

https://YOUR_USERNAME.github.io/starline-defenders/

Pour information, si vous devez apporter des modifications à votre application Web à l’avenir, apportez simplement les modifications requises à votre fichier index.html local, validez-le et appuyez à nouveau :

git add index.html
git commit -m "Update game"
git push

Votre application mise à jour se redéployera automatiquement.

Méthode 2 : déployer en utilisant here.now

here.now est un service conçu pour publier rapidement des sites et des fichiers statiques. Il peut héberger du HTML, CSS, JavaScript, des images, des documents et d’autres fichiers statiques en direct. `*.ici.maintenant` URL. Bien que here.now soit conçu pour un accès agent, vous pouvez également vous y connecter manuellement, ce que je vais montrer ici.

Il existe deux manières de publier ici maintenant. Les deux sont gratuits. La première méthode est appelée mode anonyme et ne nécessite aucune inscription ni inscription. Dans ce mode, here.now hébergera votre application sur une URL temporaire pendant 24 heures.

Pour une URL here.now permanente, que nous utiliserons, vous devez publier avec une clé API.

Le flux est :

1. Inscrivez-vous/inscrivez-vous ici.maintenant
2. Obtenir une clé API
3. Enregistrez-le localement
4. Exécutez des scripts de ligne de commande pour publier l’application
5. L’URL renvoyée est permanente sur votre compte

Les conditions préalables au déploiement here.now sont : –

• Un compte here.now
• Une clé API here.now

Étape 1 : Inscrivez-vous ici.maintenant

Cliquez ici.maintenant/tableau de bord et utilisez le bouton Se connecter en haut à droite de l’écran.

Vous recevrez un lien dans votre e-mail sur lequel cliquer, qui vous connectera correctement à here.now.

Étape 2 : Obtenez une clé API

Une fois connecté, il y aura un lien API dans la barre de menu de gauche. Cliquez dessus, puis copiez la clé générée dans votre presse-papiers.

Étape 3 : Publiez votre site

Sur un PC Windows comme celui que j’utilise, la publication de votre application implique l’exécution de certaines commandes PowerShell. Il existe un processus similaire pour les utilisateurs de Linux et d’autres systèmes d’exploitation.

# Create a folder to hold your API key if required
#
New-Item -ItemType Directory -Force "$env:USERPROFILE\.herenow" | Out-Null

# Save the API key
#
Set-Content "$env:USERPROFILE\.herenow\starlinedefenders-credentials" "YOUR_API_KEY"

# publish the web app
#

cd "$env:USERPROFILE\projects\starlinedefenders"

$apiKey = Get-Content "$env:USERPROFILE\.herenow\starlinedefenders-credentials" -Raw
$file = Get-Item ".\index.html"

$body = @{
  files = @(
    @{
      path = "index.html"
      size = $file.Length
      contentType = "text/html; charset=utf-8"
    }
  )
  spaMode = $true
} | ConvertTo-Json -Depth 5

$create = Invoke-RestMethod `
  -Uri "https://here.now/api/v1/publish" `
  -Method Post `
  -Headers @{
    "Authorization" = "Bearer $apiKey"
    "X-HereNow-Client" = "manual/powershell"
  } `
  -ContentType "application/json" `
  -Body $body

$upload = $create.upload.uploads[0]

Invoke-WebRequest `
  -Uri $upload.url `
  -Method Put `
  -ContentType $upload.headers."Content-Type" `
  -InFile $file.FullName

$finalBody = @{
  versionId = $create.upload.versionId
} | ConvertTo-Json

$final = Invoke-RestMethod `
  -Uri $create.upload.finalizeUrl `
  -Method Post `
  -Headers @{
    "Authorization" = "Bearer $apiKey"
  } `
  -ContentType "application/json" `
  -Body $finalBody

"Permanent Site URL: $($create.siteUrl)"

Une fois le script ci-dessus exécuté, il affichera une URL que vous pourrez utiliser pour accéder à votre application Web.

La mise à jour de votre application est également simple. Après avoir modifié le code dans index.html selon les besoins, réexécutez simplement le script de déploiement ci-dessus.

Méthode 3 : Déployer avec Hugging Face Spaces

Hugging Face (HF) Spaces est surtout connu pour ses démos d’apprentissage automatique, mais il prend également en charge les applications HTML statiques.

Ce dont vous avez besoin

• Un compte Hugging Face
• Un nouvel Espace HF
• Votre fichier index.html
• Un fichier README.md contenant des métadonnées Space

Étape 1 : Créer un compte HF

Cliquez https://huggingface.co/ et utilisez le bouton S’inscrire en haut à droite de la page.

Étape 2 : Créer un nouvel espace

Une fois connecté, cliquez sur le bouton Espaces en haut, puis cliquez sur Créer un nouvel espace et choisissez un nom pour celui-ci, par exemple, starline-defenders-game. Remplissez une description et choisissez la durée de licence souhaitée.

Pour le SDK Space, choisissez Statique et pour le modèle, choisissez vide. Choisissez Public comme visibilité de l’application, puis cliquez sur le bouton Créer un espace en bas.

Étape 3 : Écrasez le fichier index.html pré-créé

Une fois l’espace créé, cliquez sur le lien Fichiers en haut de la page ; c’est entre les liens de l’application et de la communauté. Vous devriez voir un écran qui ressemble un peu à un dépôt GitHub, avec quatre fichiers que HF a pré-créés pour vous. Le seul dont nous devons nous préoccuper est le fichier index.html. Vous devez copier votre index.html local pour écraser celui HF existant. Faites cela en utilisant Git Bash, comme nous l’avons fait avec les pages GitHub.

Notez que lors de l’exécution de la commande git push finale présentée ci-dessous, une fenêtre contextuelle apparaîtra dans laquelle vous devrez saisir votre nom d’utilisateur HF et un jeton d’accès pour que la commande réussisse. Vous obtenez votre jeton d’accès en accédant à la page de paramètres suivante.

https://huggingface.co/settings/tokens

Cliquez sur le bouton Créer un jeton. Sous Type de jeton, cliquez sur Écrire. Donnez un nom à votre jeton et créez-le. Gardez une note de la valeur du jeton. Tapez maintenant les commandes suivantes dans Git Bash. Remplacez YOUR_USERNAME et YOUR_SPACE_NAME par vos propres valeurs HF.

# go the folder where your index.html lives
cd ~/projects/starlinedefenders

git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
cd YOUR_SPACE_NAME
cp ~/projects/starlinedefenders/index.html ./index.html
git add index.html
git commit -m "Replace index with a space invaders type game"
# After the following push command, you'll have to enter
# your HF username and the access token you created previously
# before the command will succeed
git push

Hugging Face construira et publiera l’espace en arrière-plan. Après environ une minute, votre application sera prête à fonctionner. Pour l’exécuter, recherchez votre nom d’utilisateur HF et tous vos espaces disponibles devraient être renvoyés. Cliquez sur le lien Space approprié et votre application devrait s’exécuter immédiatement.

Pour mettre à jour l’application ultérieurement, modifiez votre index.html local, puis appuyez à nouveau :

git add index.html
git commit -m "Update game"
git push

Comparaison des méthodes de déploiement

Les trois fonctionnent bien pour ce genre de projet. Les différences concernent principalement le flux de travail et le public.

Pages GitHub

GitHub Pages est le meilleur choix par défaut si votre projet est déjà sur GitHub. Il est stable, bien documenté et familier aux développeurs.

Avantages :

• Gratuit pour les référentiels publics
• HTTPS inclus
• Très facile à mettre à jour avec Git
• Idéal pour les portfolios et les démonstrations de projets
• Pas de verrouillage spécial de la plate-forme au-delà de GitHub

Inconvénients :

• La publication gratuite signifie généralement un référentiel public
• Non destiné à un hébergement commercial intensif
• Les paramètres de déploiement peuvent dérouter les débutants du premier coup
• Moins instantané qu’un outil de style glisser-publier

ici.maintenant

here.now est le moyen le plus rapide de transformer une application locale en une URL en direct. Il est particulièrement adapté aux petites applications statiques réalisées avec un agent ou un assistant de codage.

Avantages :

• Flux de publication très rapide
• Idéal pour les démos et les aperçus rapides
• Le compte gratuit prend en charge les sites statiques permanents
• Peut héberger du HTML brut, du CSS, du JavaScript et des ressources telles que des images

Inconvénients :

• Vous avez besoin d’un compte ou d’un flux de réclamation pour un hébergement permanent
• Plus récent et moins largement reconnu que les pages GitHub
• Vous devez vérifier les limites actuelles du plan avant de l’utiliser pour des projets à fort trafic

Étreindre les espaces du visage

Hugging Face Spaces est l’option la plus spécialisée. C’est excellent si vous souhaitez que votre application cohabite avec des démos, des expériences ou des projets liés à l’IA.

Avantages :

• Prend en charge les espaces HTML statiques
• Des espaces gratuits soutenus par le processeur sont disponibles
• Bon ajustement si vous utilisez déjà Hugging Face
• Peut facilement devenir une application basée sur Gradio, Streamlit, Docker ou ML ultérieurement

Inconvénients :

• Les étapes de déploiement sont un peu plus complexes que les deux autres.
• Nécessite un bloc de métadonnées README.md ainsi que le fichier index.html
• L’URL publique est une page Hugging Face Space plutôt qu’une URL de site statique à usage général.
• Plus spécifique à la plateforme que les pages GitHub

Résumé

Le développement d’une page Web ou d’une application ne représente généralement que la moitié de la bataille. Lorsque vous souhaitez partager votre travail avec d’autres, le déploiement devient l’aspect le plus important. Bien sûr, il existe de nombreux services payants qui vous permettront d’être opérationnel, mais pour une application ou une démo très simple, la possibilité de déployer gratuitement est une aubaine.

J’ai montré 3 méthodes différentes pour déployer gratuitement une application statique sur le Web. Pour être honnête, ils ont tous des flux de travail de déploiement et des efforts de mise en œuvre similaires, et je ne pense pas que vous vous tromperiez en choisissant l’un d’entre eux.

Gardez simplement à l’esprit que ces méthodes ne sont pas conçues pour gérer votre application ayant des milliers d’utilisateurs simultanés. Après tout, ils sont gratuits. Si vous recherchez cela, vous devrez chercher ailleurs et sortir votre carte de crédit.

Pour référence, voici les trois URL gratuites que j’ai créées pour « Défenseur Starline »

Défenseurs GitHub Starline

ici.maintenant Starline Defenders

Étreignant les espaces du visage Starline Defenders