Von der lokalen App zur öffentlichen Web site in wenigen Minuten

zeige ich Ihnen drei völlig kostenlose Möglichkeiten, eine einfache Internet-App schnell bereitzustellen, sodass sie im Web öffentlich verfügbar ist. Mit „einfach“ meine ich eine statische Webanwendung, additionally eine, die kein Datenbank-Backend, Benutzerkonten oder serverseitige Logik hat.

Auch wenn dies ein wenig einschränkend erscheinen magazine, können Sie mit HTML, CSS und JavaScript dennoch viel erreichen.

Da der Fokus auf verschiedenen Bereitstellungsmethoden liegt, werde ich nicht viel Zeit auf die Internet-App selbst verwenden.

Ich wollte ein kleines Projekt, das unkompliziert, aber dennoch actual genug ist, um es umzusetzen und zu teilen. Additionally ließ ich Codex ein Browserspiel entwickeln, einen einfachen Shooter im Area Invaders-Stil, den der Agent nennen wollte Starline-Verteidiger.

Das Spiel ist einfach zu spielen. Sie bewegen ein kleines Schiff mit den Pfeiltasten nach hyperlinks und rechts, schießen mit der Leertaste auf ankommende Aliens, verstecken sich hinter Schilden, verlieren Leben, wenn Sie getroffen werden, und bewegen sich mit steigender Punktzahl durch schnellere Wellen. Es funktioniert mit Tastatursteuerungen auf dem Desktop und Contact-Steuerungen auf Mobilgeräten. Am Ende hinterlasse ich Hyperlinks zu allen drei App-URLs, auf denen ich bereitgestellt habe, damit Sie selbst damit experimentieren können.

Hier ist die Eingabeaufforderung, die ich verwendet habe.

Erstellen Sie eine einfache Internet-App mit HTML, CSS und Javascript, die einem einfachen Area-Invaders-Spiel ähnelt

Nach etwa 16 Minuten spuckte Codex dies aus.

Labored for 16m 45s

I am going to construct this as a single self-contained HTML file with embedded CSS and 
JavaScript, utilizing canvas so it runs anyplace with out a construct step. I am going to preserve 
the prevailing downloader file untouched and add a brand new sport web page.
I'll embrace the entire sport in a single file: canvas rendering, alien 
waves, shields, scoring, lives, ranges, keyboard controls, and on-screen 
controls for contact gadgets. After that I am going to open it domestically by way of the 
present localhost server and do a fast visible sanity examine.
Created 1 file

The sport file is in place. I am checking it by way of localhost now so we are able to 
catch clean canvas points, script errors, or format issues earlier than I hand it 
over.
Confirm sport web page

The web page hundreds over localhost. The browser's read-only web page examine could not 
examine canvas pixels immediately, so I am switching to a screenshot and 
console-log examine, which is the correct of sanity check for this 
canvas-heavy web page.
Screenshot sport

The screenshot discovered one format wrinkle: on a brief viewport the sport board 
shrinks however hugs the left facet, leaving useless house to the proper. I am centering 
and constraining the board dimensions so it appears to be like intentional on each 
mobile-sized and desktop-sized panes.
Edited 1 file

I've patched the responsive sizing. I am reloading the web page now and doing 
one interplay cross: begin the sport, verify the canvas updates, and examine 
that there are not any console errors.
Confirm up to date sport
Achieved. I created the single-file SPA right here:
starline-defenders.html
You'll be able to play it within the in-app browser at:
http://127.0.0.1:8765/starline-defenders.html

I additionally verified it hundreds, begins, renders the canvas, and has no browser 
console errors.

Ich habe das Spiel lokal getestet und es hat einwandfrei funktioniert. Additionally, jetzt stellen wir es im Web bereit, damit die Welt seine Großartigkeit bestaunen kann!

Die Bereitstellungssysteme, die wir uns ansehen werden, sind:

1. GitHub-Seiten
2. hier.jetzt
3. Gesichtsräume umarmen

Um Zweifel auszuschließen: Abgesehen davon, dass ich Benutzer dieser Systeme bin, habe ich keine Verbindung, Zugehörigkeit oder Verbindung zu einem der oben genannten Unternehmen.

Allgemeine Voraussetzungen

Die meisten statischen Hosts erwarten, dass die Homepage index.html heißt. Daher müssen wir als Erstes unsere Datei von starline-defenders.html umbenennen. Für dieses Projekt ist das alles, was wir brauchen, da sich alle unsere Belongings und unser Code in dieser einen Datei befinden.

Erstellen Sie einen leeren Ordner auf Ihrem lokalen System, z. B. starline-defenders/, und kopieren Sie die Datei index.html dorthin.

Methode 1: Bereitstellung mit GitHub-Seiten

GitHub Pages ist eine klassische Wahl für kleine statische Web sites und Internet-Apps wie diese. Wenn Ihr Projekt bereits in GitHub vorhanden ist, ist dies normalerweise die einfachste dauerhafte Bereitstellung.

GitHub Pages kann HTML, CSS, JavaScript, Bilder und andere statische Belongings direkt aus einem Repository bereitstellen. Für ein Ein-Datei-Spiel wie dieses ist die gesamte Infrastruktur erforderlich.

Was Sie brauchen

Die Voraussetzungen für die GitHub-Set up sind:-

• Ein GitHub-Konto
• Git Bash lokal installiert
• Ein öffentliches GitHub-Repository. Dies ist für die kostenlose Bereitstellung unerlässlich.

Schritt 1: Erstellen Sie ein GitHub-Konto

Gehe zu https://github.com und klicken Sie oben rechts auf dem Bildschirm auf die Schaltfläche „Anmelden“.

Schritt 2: Installieren Sie die Git-Bash-App

Git ermöglicht Ihnen über seine Bash-Befehlszeilenschnittstelle die Interaktion mit GitHub, z. B. das Kopieren von Dateien in Repositorys.

Holen Sie es sich, indem Sie auf klicken:

https://git-scm.com/ebook/en/v2/Getting-Began-Putting in-Git

und befolgen Sie die Installationsanweisungen für Ihr lokales System.

Schritt 3: Erstellen Sie ein neues Repository

Melden Sie sich bei Ihrem GitHub-Konto an und erstellen Sie ein neues Repository mit dem Namen, zum Beispiel:

Starline-Verteidiger

Stellen Sie sicher, dass es sich um ein öffentliches Repository handelt.

Schritt 4: Legen Sie Ihre index.html-Datei im öffentlichen Repository ab

Dazu öffnen Sie das Git Bash-Befehlszeilenterminal und wechseln dann in das Verzeichnis in den lokalen Ordner, der Ihre index.html-Datei enthält. Geben Sie nun die folgenden Befehle in Git Bash ein.

git init
git config --global consumer.electronic mail "(electronic mail protected)"
git config --global consumer.title "Your Identify"
git add index.html
git commit -m "Add house invaders kind sport"
git department -M foremost
git distant add origin https://github.com/YOUR_USERNAME/starline-defenders.git
git push -u origin foremost

Ersetzen Sie „YOUR_USERNAME“ durch Ihren GitHub-Benutzernamen.

Schritt 5: GitHub-Seiten aktivieren

Öffnen Sie das neue Repository auf GitHub und gehen Sie dann wie folgt vor:

1. Gehen Sie zu Einstellungen.
2. Öffnen Sie Pages in der linken Seitenleiste.
3. Wählen Sie unter „Construct and Deployment“ die Choice „Deploy from a department“ aus.
4. Setzen Sie den Quellzweig auf „foremost“.
5. Legen Sie den Ordner auf „/root“ fest.
6. Klicken Sie auf Speichern.

GitHub beginnt mit der Veröffentlichung der Web site. Normalerweise dauert es ein bis zwei Minuten und Ihre endgültige URL sieht folgendermaßen aus:

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

Zu Ihrer Info: Wenn Sie in Zukunft Änderungen an Ihrer Internet-App vornehmen müssen, nehmen Sie einfach die erforderlichen Änderungen an Ihrer lokalen index.html-Datei vor, übertragen Sie sie und pushen Sie sie erneut:

git add index.html
git commit -m "Replace sport"
git push

Ihre aktualisierte App wird automatisch erneut bereitgestellt.

Methode 2: Bereitstellung mit right here.now

Right here.now ist ein Dienst, der für die schnelle Veröffentlichung statischer Web sites und Dateien entwickelt wurde. Es kann HTML, CSS, JavaScript, Bilder, Dokumente und andere statische Dateien stay hosten `*.hier.jetzt` URL. Obwohl Right here.now für den Agentenzugriff konzipiert ist, können Sie auch manuell darauf zugreifen, was ich hier zeige.

Es gibt zwei Möglichkeiten, wie Sie hier.now veröffentlichen können. Beide sind kostenlos. Die erste Methode heißt anonymer Modus und erfordert keine Anmeldung oder Registrierung. In diesem Modus hostet right here.now Ihre App 24 Stunden lang unter einer temporären URL.

Für eine permanente Right here.now-URL, die wir verwenden werden, müssen Sie mit einem API-Schlüssel veröffentlichen.

Der Ablauf ist:

1. Melden Sie sich jetzt hier an
2. Besorgen Sie sich einen API-Schlüssel
3. Speichern Sie es lokal
4. Führen Sie Befehlszeilenskripts aus, um die App zu veröffentlichen
5. Die zurückgegebene URL ist dauerhaft in Ihrem Konto gespeichert

Die Voraussetzungen für die Right here.now-Bereitstellung sind:-

• Ein Right here.now-Konto
• Ein Right here.now-API-Schlüssel

Schritt 1: Melden Sie sich jetzt hier an

Klicken hier.now/dashboard und verwenden Sie die Schaltfläche „Anmelden“ oben rechts auf dem Bildschirm.

Sie erhalten in Ihrer E-Mail einen Hyperlink, auf den Sie klicken können, um sich ordnungsgemäß bei right here.now anzumelden.

Schritt 2: Holen Sie sich einen API-Schlüssel

Sobald Sie angemeldet sind, wird in der linken Menüleiste ein API-Hyperlink angezeigt. Klicken Sie darauf und kopieren Sie dann den generierten Schlüssel in Ihre Zwischenablage.

Schritt 3: Veröffentlichen Sie Ihre Web site

Auf einem Home windows-PC wie dem, den ich verwende, erfordert die Veröffentlichung Ihrer App die Ausführung einiger PowerShell-Befehle. Für Benutzer von Linux und anderen Betriebssystemen gibt es einen ähnlichen Prozess.

# Create a folder to carry your API key if required
#
New-Merchandise -ItemType Listing -Pressure "$env:USERPROFILE.herenow" | Out-Null

# Save the API key
#
Set-Content material "$env:USERPROFILE.herenowstarlinedefenders-credentials" "YOUR_API_KEY"

# publish the online app
#

cd "$env:USERPROFILEprojectsstarlinedefenders"

$apiKey = Get-Content material "$env:USERPROFILE.herenowstarlinedefenders-credentials" -Uncooked
$file = Get-Merchandise ".index.html"

$physique = @{
  information = @(
    @{
      path = "index.html"
      measurement = $file.Size
      contentType = "textual content/html; charset=utf-8"
    }
  )
  spaMode = $true
} | ConvertTo-Json -Depth 5

$create = Invoke-RestMethod `
  -Uri "https://right here.now/api/v1/publish" `
  -Technique Submit `
  -Headers @{
    "Authorization" = "Bearer $apiKey"
    "X-HereNow-Consumer" = "guide/powershell"
  } `
  -ContentType "utility/json" `
  -Physique $physique

$add = $create.add.uploads(0)

Invoke-WebRequest `
  -Uri $add.url `
  -Technique Put `
  -ContentType $add.headers."Content material-Sort" `
  -InFile $file.FullName

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

$ultimate = Invoke-RestMethod `
  -Uri $create.add.finalizeUrl `
  -Technique Submit `
  -Headers @{
    "Authorization" = "Bearer $apiKey"
  } `
  -ContentType "utility/json" `
  -Physique $finalBody

"Everlasting Web site URL: $($create.siteUrl)"

Nachdem das obige Skript ausgeführt wurde, wird eine URL angezeigt, über die Sie auf Ihre Internet-App zugreifen können.

Auch das Aktualisieren Ihrer App ist einfach. Nachdem Sie den Code in index.html nach Bedarf geändert haben, führen Sie einfach das obige Bereitstellungsskript erneut aus.

Methode 3: Bereitstellung mit Hugging Face Areas

Hugging Face (HF) Areas ist vor allem für Demos zum maschinellen Lernen bekannt, unterstützt aber auch statische HTML-Apps.

Was Sie brauchen

• Ein Hugging Face-Konto
• Ein neuer HF-Raum
• Ihre index.html-Datei
• Eine README.md-Datei mit Area-Metadaten

Schritt 1: Erstellen Sie ein HF-Konto

Klicken https://huggingface.co/ und verwenden Sie die Schaltfläche „Anmelden“ oben rechts auf der Seite.

Schritt 2: Erstellen Sie einen neuen Area

Sobald Sie angemeldet sind, klicken Sie oben auf die Schaltfläche „Areas“, dann auf „Neuen Area erstellen“ und wählen Sie einen Namen dafür, z. B. „Starline-Defenders-Recreation“. Geben Sie eine Beschreibung ein und wählen Sie die gewünschte Lizenzlaufzeit aus.

Wählen Sie für das Area SDK „Statisch“ und für die Vorlage „Leer“ aus. Wählen Sie „Öffentlich“ als App-Sichtbarkeit und klicken Sie dann unten auf die Schaltfläche „Bereich erstellen“.

Schritt 3: Überschreiben Sie die vorab erstellte Datei index.html

Nachdem der Area erstellt wurde, klicken Sie oben auf der Seite auf den Hyperlink „Dateien“. Es befindet sich zwischen den App- und Neighborhood-Hyperlinks. Sie sollten einen Bildschirm sehen, der ein bisschen wie ein GitHub-Repo aussieht, mit vier Dateien, die HF für Sie vorab erstellt hat. Das Einzige, um das wir uns kümmern müssen, ist die Datei index.html. Sie müssen Ihre lokale index.html kopieren, um die vorhandene HF-Datei zu überschreiben. Machen Sie das mit Git Bash, wie wir es mit GitHub-Seiten gemacht haben.

Beachten Sie, dass während der Ausführung des unten gezeigten letzten Git-Push-Befehls ein Popup-Fenster erscheint, in dem Sie Ihren HF-Benutzernamen und ein Zugriffstoken eingeben müssen, damit der Befehl erfolgreich ausgeführt werden kann. Sie erhalten Ihr Zugriffstoken, indem Sie auf die folgende Einstellungsseite gehen.

https://huggingface.co/settings/tokens

Klicken Sie auf die Schaltfläche „Token erstellen“. Klicken Sie unter Tokentyp auf Schreiben. Geben Sie Ihrem Token einen Namen und erstellen Sie ihn. Notieren Sie sich den Wert des Tokens. Geben Sie nun die folgenden Befehle in Git Bash ein. Ersetzen Sie YOUR_USERNAME und YOUR_SPACE_NAME durch Ihre eigenen HF-Werte.

# go the folder the place your index.html lives
cd ~/tasks/starlinedefenders

git clone https://huggingface.co/areas/YOUR_USERNAME/YOUR_SPACE_NAME
cd YOUR_SPACE_NAME
cp ~/tasks/starlinedefenders/index.html ./index.html
git add index.html
git commit -m "Exchange index with an area invaders kind sport"
# After the next push command, you will should enter
# your HF username and the entry token you created beforehand
# earlier than the command will succeed
git push

Hugging Face wird den Area im Hintergrund aufbauen und veröffentlichen. Nach etwa einer Minute ist Ihre App betriebsbereit. Um es auszuführen, suchen Sie nach Ihrem HF-Benutzernamen. Alle verfügbaren Areas sollten zurückgegeben werden. Klicken Sie auf den entsprechenden Area-Hyperlink und Ihre App sollte sofort ausgeführt werden.

Um die App später zu aktualisieren, bearbeiten Sie Ihre lokale index.html und drücken Sie dann erneut:

git add index.html
git commit -m "Replace sport"
git push

Vergleich der Bereitstellungsmethoden

Alle drei funktionieren intestine für diese Artwork von Projekt. Die Unterschiede liegen hauptsächlich im Arbeitsablauf und der Zielgruppe.

GitHub-Seiten

GitHub Pages ist die beste Standardauswahl, wenn Ihr Projekt bereits auf GitHub ist. Es ist stabil, intestine dokumentiert und den Entwicklern vertraut.

Vorteile:

• Kostenlos für öffentliche Repositories
• HTTPS inklusive
• Sehr einfach mit Git zu aktualisieren
• Intestine für Portfolios und Projektdemos
• Keine spezielle Plattformbindung außer GitHub

Nachteile:

• Unter kostenloser Veröffentlichung versteht man im Allgemeinen ein öffentliches Repository
• Nicht als anspruchsvolles kommerzielles Internet hosting gedacht
• Die Bereitstellungseinstellungen können Anfänger beim ersten Mal verwirren
• Weniger schnell als ein Software im Drag-and-Publish-Stil

hier.jetzt

Right here.now ist der schnellste Weg, eine lokale App in eine Stay-URL umzuwandeln. Es eignet sich besonders intestine für kleine statische Apps, die mit einem Agenten oder einem Codierungsassistenten erstellt werden.

Vorteile:

• Sehr schneller Veröffentlichungsablauf
• Intestine für schnelle Demos und Vorschauen
• Das kostenlose Konto unterstützt permanente statische Web sites
• Kann einfaches HTML, CSS, JavaScript und Belongings wie Bilder hosten

Nachteile:

• Für dauerhaftes Internet hosting benötigen Sie ein Konto oder einen Anspruchsablauf
• Neuer und weniger bekannt als GitHub-Seiten
• Sie sollten die aktuellen Plangrenzen überprüfen, bevor Sie es für Projekte mit hohem Datenverkehr verwenden

Gesichtsräume umarmen

Das Umarmen von Gesichtsräumen ist die speziellste Choice. Es eignet sich hervorragend, wenn Sie möchten, dass Ihre App neben Demos, Experimenten oder KI-bezogenen Projekten läuft.

Vorteile:

• Unterstützt statische HTML-Leerzeichen
• Es stehen kostenlose CPU-gestützte Areas zur Verfügung
• Gute Passform, wenn Sie Hugging Face bereits verwenden
• Kann später problemlos zu einer Gradio-, Streamlit-, Docker- oder ML-basierten App werden

Nachteile:

• Die Bereitstellungsschritte sind etwas komplexer als die anderen beiden.
• Erfordert einen README.md-Metadatenblock sowie die Datei index.html
• Bei der öffentlichen URL handelt es sich um eine Hugging Face Area-Seite und nicht um eine allgemeine URL für eine statische Web site
• Plattformspezifischer als GitHub-Seiten

Zusammenfassung

Die Entwicklung einer Webseite oder App ist meist nur die halbe Miete. Wenn Sie Ihre Arbeit mit anderen teilen möchten, wird die Bereitstellung zum wichtigsten Aspekt. Natürlich gibt es zahlreiche kostenpflichtige Dienste, mit denen Sie loslegen können, aber für eine wirklich einfache App oder Demo ist die Möglichkeit der kostenlosen Bereitstellung ein Segen.

Ich habe drei verschiedene Methoden gezeigt, um eine statische App kostenlos im Internet bereitzustellen. Um ehrlich zu sein, haben sie alle ähnliche Bereitstellungsabläufe und Implementierungsaufwände, und ich glaube nicht, dass Sie mit der Wahl eines davon einen Fehler machen würden.

Bedenken Sie jedoch, dass diese Methoden nicht dafür ausgelegt sind, mit Tausenden gleichzeitigen Benutzern Ihrer App zurechtzukommen. Sie sind schließlich frei. Wenn Sie danach suchen, müssen Sie sich woanders umsehen und Ihre Kreditkarte zücken.

Als Referenz sind hier die drei kostenlosen URLs, für die ich erstellt habe „Starline Defender“

GitHub Starline Defenders

hier.jetzt Starline Defenders

Umarmendes Gesicht Areas Starline Defenders