Een statische website publiceren

Een statische website is gewone HTML/CSS/JS, of de build-uitvoer van een framework als Astro, SvelteKit, Vue of React. CloudQube serveert hem vanaf een EU-only CDN met een gratis SSL-certificaat.

1. Voeg een statische website toe aan een project, vanuit de catalogus of een sjabloon.

2. Publiceer je gebouwde bestanden (de inhoud van je map dist/build). Elke publicatie wordt in je geschiedenis bewaard, zodat je naar een eerdere terug kunt.

3. Je site gaat live met HTTPS, op het domein van je project of, als het project nog geen domein heeft, op een gegenereerd webadres.

Tip

Publiceer de uitvoer van je build, niet je broncode. Draai het build-commando van je framework lokaal (of in CI) en upload wat het oplevert.

Single-page apps

Een single-page app (React, Svelte, Vue en vergelijkbare) levert één index.html en tekent elk scherm in de browser, dus er staat geen bestand op een pad als /dashboard. Standaard geeft dat pad “niet gevonden”.

Open de site in het dashboard en zet Single-page app-routing aan. Paden zonder eigen bestand serveren dan index.html, en je app tekent het juiste scherm op basis van de adresbalk. Agents zetten hetzelfde met spa_routing op site.deploy.

Laat het uit als elke pagina op je site een echt bestand is. Staat het aan, dan toont een typefout of dode link je homepage met een geslaagd antwoord, wat zoekmachines lezen als een kapotte pagina.

Automatisch publiceren vanuit je CI

Zodra de statische website bestaat, kun je hem bij elke push publiceren. Je eigen CI bouwt de site en uploadt het resultaat, en CloudQube komt helemaal niet aan je repository. Elke CI werkt: GitHub Actions en GitLab CI, maar ook in de EU gehoste runners zoals Forgejo/Codeberg of Woodpecker.

1. Maak de statische website aan met de stappen hierboven, als je dat nog niet gedaan hebt. Een deploy-token hoort bij één specifieke site.

2. Open de site in het dashboard, zoek de sectie CLI / CI deploy en kies Generate deploy token. Het token wordt één keer getoond, dus kopieer het meteen.

3. Sla het token op in je CI als geheim met de naam CQ_DEPLOY_TOKEN, en houd het uit je repository.

4. Voeg een deploy-taak voor je CI toe uit de tabbladen hieronder. Elke variant bouwt de site, zipt de uitvoermap (standaard dist) en uploadt hem. Pas het build-commando en de uitvoermap aan op je project.

   Shell / elke CI

   # Zet eerst CQ_DEPLOY_TOKEN in je omgeving / CI-geheimen.
   npm ci && npm run build
   cd dist && zip -r ../site.zip . && cd ..
   curl -X POST https://cloudqube.eu/api/v1/projects/PROJECT_ID/cloudqube/SITE_ID/deploy-cli \
     -H "Authorization: Bearer $CQ_DEPLOY_TOKEN" \
     -F file=@site.zip

   Forgejo / Codeberg

   .forgejo/workflows/deploy.yml

   name: Deploy to CloudQube
   on:
     push:
       branches: [main]
   jobs:
     deploy:
       runs-on: docker
       steps:
         - uses: actions/checkout@v4
         - uses: actions/setup-node@v4
           with:
             node-version: 20
         - run: npm ci && npm run build
         - run: cd dist && zip -r ../site.zip . && cd ..
         - run: |
             curl -X POST https://cloudqube.eu/api/v1/projects/PROJECT_ID/cloudqube/SITE_ID/deploy-cli \
               -H "Authorization: Bearer ${{ secrets.CQ_DEPLOY_TOKEN }}" \
               -F file=@site.zip

   Woodpecker

   .woodpecker.yml

   steps:
     deploy:
       image: node:20
       secrets: [cq_deploy_token]
       when:
         branch: main
       commands:
         - npm ci && npm run build
         - cd dist && zip -r ../site.zip . && cd ..
         - curl -X POST https://cloudqube.eu/api/v1/projects/PROJECT_ID/cloudqube/SITE_ID/deploy-cli -H "Authorization: Bearer $CQ_DEPLOY_TOKEN" -F file=@site.zip

   GitHub Actions

   .github/workflows/deploy.yml

   name: Deploy to CloudQube
   on:
     push:
       branches: [main]
   jobs:
     deploy:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
         - uses: actions/setup-node@v4
           with:
             node-version: 20
         - run: npm ci && npm run build
         - run: cd dist && zip -r ../site.zip . && cd ..
         - run: |
             curl -X POST https://cloudqube.eu/api/v1/projects/PROJECT_ID/cloudqube/SITE_ID/deploy-cli \
               -H "Authorization: Bearer ${{ secrets.CQ_DEPLOY_TOKEN }}" \
               -F file=@site.zip

   GitLab CI

   .gitlab-ci.yml

   deploy:
     image: node:20
     rules:
       - if: $CI_COMMIT_BRANCH == "main"
     script:
       - npm ci && npm run build
       - cd dist && zip -r ../site.zip . && cd ..
       - curl -X POST https://cloudqube.eu/api/v1/projects/PROJECT_ID/cloudqube/SITE_ID/deploy-cli -H "Authorization: Bearer $CQ_DEPLOY_TOKEN" -F file=@site.zip

5. Push je wijzigingen, en je CI bouwt en uploadt de site. Elke upload verschijnt in de Deploy history van de site, zodat je op elk moment naar een eerdere versie terug kunt.

Tip

Het dashboard toont onder Deploy from your CI het exacte commando voor jouw site, met het echte endpoint en de project- en site-ID’s ingevuld. Kopieer het daar in plaats van PROJECT_ID / SITE_ID met de hand aan te passen.

Opmerking

De build draait op je eigen runner. De upload is een gewone POST met een token, dus het werkt vanuit elke CI-aanbieder. Het token is beperkt tot deze ene site; roteer of trek het op elk moment in vanuit de sectie CLI / CI deploy. De limieten per publicatie zijn gelijk aan die van de upload in het dashboard.