EduBOLT
Google AI Studio + GitHub Pages

Geef je app een openbare link

Publiceer een eenvoudige, statische AI Studio-app op een eigen github.io-adres. De bezoeker heeft geen AI Studio-account nodig.

Auteur: EduBOLT · Inhoudelijk gecontroleerd op

Start het stappenplan ↓
✓Een werkende AI Studio-app
✓Een GitHub-account
✓Microsoft Edge
Belangrijk: alleen voor apps die zonder AI werken GitHub Pages kan alleen statische HTML, CSS en JavaScript publiceren. Gebruik deze route niet wanneer de app tijdens het gebruik Gemini, een andere API, een database, een login of servercode nodig heeft. Zet nooit een API-sleutel in GitHub of in de browsercode.
De website en broncode worden openbaar Gebruik geen namen, leerlinggegevens, wachtwoorden, geheime sleutels of vertrouwelijke informatie. Iedereen op internet kan een openbare GitHub Pages-site en de bijbehorende openbare repository bekijken.

Van AI Studio naar GitHub Pages

1

Controleer of GitHub Pages geschikt is

Kies de juiste kolom. Twijfel je? Behandel de app dan als niet geschikt.

✓ Wel geschiktEen quiz, rekenspel, presentatie, tijdlijn of formulier dat alles direct in de browser doet en niets naar een online dienst verstuurt.
✕ Niet geschiktDe app maakt teksten of afbeeldingen met AI, gebruikt een chatbot, slaat gegevens online op, vraagt om inloggen of heeft een API-sleutel nodig.
Snelle controle in AI StudioOpen Settings en kijk bij Secrets. Staat daar een sleutel die de app nodig heeft? Stop dan. Deze app kan niet met alleen GitHub Pages werken.
2

Laat AI Studio een statische map maken

  1. Open de app in Google AI Studio.
  2. Plak onderstaande tekst in het chatvak.
  3. Klik op Run, Build of de verzendknop.
  4. Wacht totdat AI Studio klaar is.
Maak van deze app een volledig statische versie voor GitHub Pages.

Eisen:
- Maak een map met de naam docs.
- Zet het startbestand in docs/index.html.
- Gebruik in de map docs alleen HTML, CSS en JavaScript.
- Zet alle benodigde HTML, CSS, JavaScript, afbeeldingen en lettertypen in de map docs.
- Gebruik geen React, npm, servercode, database, login, API-aanroepen, Gemini, secrets of environment variables.
- Gebruik geen externe CDN's, lettertypen of andere bestanden van internet.
- Gebruik alleen relatieve paden binnen docs. Gebruik geen ../ en geen paden die met / beginnen.
- De map docs moet direct publiceerbaar zijn, zonder installatie of buildstap.
- Maak ook het lege bestand docs/.nojekyll.
- Zorg dat de app zonder API-sleutel werkt.
- Neem geen persoonsgegevens of vertrouwelijke gegevens op.
- Controleer na afloop of alle knoppen in de statische versie werken.

Verdwijnt een AI-functie?Dat is bewust. Een chatbot of AI-generator kan niet veilig als statische GitHub Pages-site worden gepubliceerd. Kies dan een versie van de app die zonder AI bruikbaar blijft.
3

Controleer de map docs

  1. Klik in het voorbeeldvenster op Code.
  2. Zoek links in de bestandenlijst de map docs.
  3. Open de map en controleer of index.html, .nojekyll en alle benodigde afbeeldingen en andere bestanden erin staan.

Schematische weergave. De precieze plaats van Code en de bestandenlijst kan veranderen.

Zie je een echte API-sleutel, wachtwoord of .env-bestand?Publiceer dan niet. Verwijder een sleutel niet alleen uit het bestand, want oude versies kunnen in de Gitgeschiedenis blijven staan. Trek de sleutel direct in, maak een nieuwe sleutel waar dat nodig is en gebruik voor deze handleiding een nieuwe, schone repository zonder het geheim.
4

Koppel de app aan GitHub

  1. Open in AI Studio Settings.
  2. Klik op het tabblad GitHub.
  3. Kies Create repository, Connect to GitHub of een vergelijkbare knop.
  4. Log zo nodig in bij GitHub en geef Google AI Studio toegang.
  5. Geef de repository een korte naam, bijvoorbeeld palet-rekenspel.
  6. Kies Public en bevestig.

Schematische weergave. Google kan de Engelse knopteksten aanpassen.

Waarom Public?Met een gratis GitHub-account is GitHub Pages beschikbaar voor openbare repositories. De broncode is dan voor iedereen zichtbaar.
Controleer het hele project vóór je doorgaatNiet alleen docs, maar alle bestanden en eerdere commits in deze openbare repository kunnen zichtbaar zijn. Gebruik alleen een project waarin nergens echte sleutels, .env-bestanden, persoonsgegevens of vertrouwelijke inhoud hebben gestaan.
5

Zet de bestanden op GitHub

  1. Blijf in AI Studio bij Settings en GitHub.
  2. Controleer eerst de synchronisatiestatus. Ziet AI Studio wijzigingen van GitHub? Kies dan eerst Pull en beoordeel eventuele conflicten.
  3. Klik daarna op Push, Push changes of Sync to GitHub.
  4. Controleer dat de synchronisatie klaar is.
  5. Klik op de link naar de GitHub-repository.
  6. Controleer op GitHub of de nieuwste commit op main staat. Open daarna de map docs en controleer opnieuw of index.html aanwezig is.
AI Studio→Push changes→GitHub
Later iets aangepast?Laat AI Studio dan ook de statische versie in docs bijwerken en push de veranderingen opnieuw. Anders blijft de oude versie online.
6

Zet GitHub Pages aan

  1. Klik bovenaan de repository op Settings.
  2. Klik links bij Code, planning, and automation op Pages.
  3. Kies bij Source voor Deploy from a branch.
  4. Kies bij Branch voor main.
  5. Kies bij de map voor /docs.
  6. Klik op Save.
GitHub-repository met het tabblad Settings gemarkeerd
1. Klik bovenaan op Settings. Afbeelding: GitHub Docs.
GitHub Pages-instelling met de keuzelijst voor de publicatiebranch gemarkeerd
2. Kies bij de publicatiebron de branch main. Afbeelding: GitHub Docs.
GitHub Pages-instelling met de keuzelijst voor de publicatiemap gemarkeerd
3. Kies daarna de map /docs en klik op Save. Afbeelding: GitHub Docs.
De juiste combinatieDeploy from a branch → main → /docs → Save
7

Open en test de openbare link

  1. Wacht maximaal tien minuten en ververs de pagina Settings → Pages.
  2. Klik bij GitHub Pages op Visit site.
  3. Je link lijkt op het voorbeeld hieronder.
  4. Open in Microsoft Edge een InPrivate-venster met Ctrl + Shift + N.
  5. Plak de link, druk op Enter en test alle belangrijke knoppen.
  6. Test ook alle afbeeldingen, opmaak, knoppen en navigatie. Ververs een geopende vervolgpagina om te controleren of die blijft werken.
  7. Test de link op één echt leerlingapparaat, met een leerlingaccount en via het leerlingnetwerk, voordat je hem breed deelt.
https://jouw-gebruikersnaam.github.io/palet-rekenspel/
GeluktDe app opent via een github.io-adres, zonder AI Studio en zonder GitHub-login.
Schoolfilter controlerenDeze route omzeilt alleen de blokkade van AI Studio. GitHub Pages moet zelf wel toegestaan zijn. Vraag de beheerder zo nodig om *.github.io voor leerlingen toe te staan. Wanneer alles in docs staat en vanaf het github.io-adres wordt geladen, hebben leerlingen geen toegang tot github.com of externe CDN's nodig.

Een app later bijwerken

↻

Publiceer de nieuwste versie

  1. Pas de app aan in AI Studio.
  2. Zeg: Werk ook de volledig statische versie in de map docs bij. Houd alle eerdere GitHub Pages-eisen aan.
  3. Controleer docs/index.html.
  4. Open Settings → GitHub en push de wijzigingen.
  5. Wacht maximaal tien minuten en ververs de openbare link.
  6. Blijft de oude versie zichtbaar? Open op GitHub Actions en controleer of de Pages-publicatie een groen vinkje heeft.

De URL blijft hetzelfde. Je hoeft dus geen nieuwe link naar de leerlingen te sturen.

Lukt het niet?

Ik zie geen map docs
Plak de voorbeeldprompt uit stap 2 opnieuw. Vraag daarna expliciet: Controleer nu of docs/index.html echt bestaat en maak het bestand alsnog aan als het ontbreekt.
Ik zie Settings niet op GitHub
Controleer of je bent ingelogd met het GitHub-account dat eigenaar of beheerder van de repository is. Op een smal scherm kan Settings achter een extra menu staan.
Ik kan /docs niet kiezen
De map is nog niet naar de branch main gepusht. Ga terug naar AI Studio, controleer docs/index.html en voer Push changes opnieuw uit.
De openbare link geeft 404
Controleer bij Settings → Pages of main en /docs zijn gekozen. Controleer ook of docs/index.html bestaat. GitHub vermeldt dat publiceren tot ongeveer tien minuten kan duren. Open daarna Actions en controleer of de Pages-publicatie een groen vinkje heeft.
De pagina opent, maar de opmaak of knoppen werken niet
Vraag AI Studio: Herstel de statische versie in docs voor GitHub Pages. Zet alle bestanden in docs, gebruik geen ../, rootpaden of externe CDN's en test alles vanaf de uiteindelijke github.io/repositorynaam/-link. Push daarna opnieuw. Test ook navigeren en het verversen van een vervolgpagina.
Mijn app gebruikt Gemini of een andere API
Stop met deze route. GitHub Pages heeft geen veilige serveromgeving voor geheime sleutels. Zet nooit een sleutel in JavaScript, HTML of een openbare repository. Maak een versie die volledig zonder AI en externe API werkt.
De app is bijgewerkt, maar ik zie nog de oude versie
Controleer of je na de wijziging ook de map docs hebt laten bijwerken en opnieuw hebt gepusht. Wacht maximaal tien minuten, controleer onder Actions of de Pages-publicatie is geslaagd en ververs daarna zonder cache met Ctrl + F5.

Klaar om te delen?

✓ De app werkt volledig zonder AI, API, login, database of server

✓ docs/index.html staat op GitHub

✓ GitHub Pages gebruikt main en /docs

✓ Er staan geen persoonsgegevens of geheime sleutels in de app

✓ De github.io-link werkt InPrivate én op een leerlingapparaat

Zijn alle vijf gelukt? Dan kun je de openbare link delen.