jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

GitHub Pages tools

Gratis GitHub Pages Workflow Generator

Genereer een GitHub Actions workflow YAML om statische sites naar GitHub Pages te deployen.

Tool laden...

Wat is GitHub Pages Workflow Generator?

Een GitHub Pages-workflow is een GitHub Actions YAML-bestand dat automatisch uw site bouwt en implementeert elke keer dat u naar de main-branch pusht. Beginners hebben vaak een sjabloon nodig met de juiste toestemmingen, concurrency-instellingen, Node-setup, build-stap en artifact-upload. Deze tool genereert een kant-en-klare pages.yml met de standaard implementatiestructuur.

Snel antwoord

Een GitHub Actions-workflow automatiseert het bouwen en implementeren van uw statische site naar GitHub Pages bij elke push. De gegenereerde YAML bevat de standaardtoestemmingen, concurrency-instellingen en build-stappen.

Last updated: 2026-06-11

Beperkingen

  • De gegenereerde workflow is een standaardsjabloon. Aangepaste build-tools, monorepo's of meerstappenpijplijnen kunnen extra jobstappen of aangepaste acties nodig hebben.
  • GitHub Pages-implementatie via Actions werkt alleen voor openbare repositories of priv锟?repository's met GitHub Pro-, Team- of Enterprise-abonnementen.
  • Het CNAME-placeholderbestand moet worden gemaakt of gekopieerd naar de uitvoermap als de site een aangepast domein gebruikt.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Kies de sitetype-preset of voer aangepaste build-instellingen in.
  2. Stel de Node-versie, build-opdracht en uitvoermap voor uw project in.
  3. Kopieer de gegenereerde YAML naar .github/workflows/pages.yml in uw repository.
  4. Schakel GitHub Pages in uw repository-instellingen in om GitHub Actions als bron te gebruiken.

Waarvoor je het kunt gebruiken

  • Geautomatiseerde implementatie instellen voor een gewone HTML-statische site op GitHub Pages.
  • Een build-en-implementatie-workflow maken voor een Vite- of Astro-statisch project.
  • Een CNAME-placeholder-stap toevoegen zodat aangepaste domeinen niet verloren gaan bij implementatie.

Gebruik

Praktische voorbeelden

Voorbeeld

Implementatie van een gewone HTML-site

Een statische HTML-site zonder build-stap heeft de workflow nodig om de root-directory ongewijzigd te uploaden. De generator maakt een minimale workflow zonder build-stap.

Voorbeeld

Vite-projectimplementatie

Een Vite-project heeft npm ci, npm run build en het uploaden van de dist-map nodig. De generator maakt de juiste workflow met artifact-upload.

Veelgemaakte fouten

  • De verkeerde uitvoermap gebruiken, waardoor GitHub Pages een lege of onvolledige site serveert.
  • Vergeten de juiste toestemmingen voor pages en id-token in te stellen in de workflow.
  • De CNAME-placeholder in de workflow laten staan wanneer de site geen aangepast domein gebruikt.

Verificatie

  1. Push het workflowbestand naar uw repository en controleer het tabblad Actions om te bevestigen dat de workflow succesvol wordt uitgevoerd.
  2. Bezoek na een succesvolle uitvoering uw GitHub Pages-URL en controleer of de site-inhoud overeenkomt met de verwachte uitvoer.

FAQ

Vragen over GitHub Pages Workflow Generator

Waar moet het workflowbestand worden opgeslagen?

Sla het op als .github/workflows/pages.yml in uw repository. GitHub Actions detecteert en voert workflowbestanden in die directory automatisch uit.

Moet ik iets configureren in de repository-instellingen?

Ja. Ga naar Instellingen > Pagina's en stel de bron in op GitHub Actions. Dit vertelt GitHub Pages om de workflow-implementatie te gebruiken in plaats van branch-gebaseerde implementatie.

Welke Node-versie moet ik gebruiken?

Gebruik de Node-versie die overeenkomt met uw projectvereisten. Node 20 of 22 zijn veilige keuzes voor de meeste statische sitegenerators. Het versieveld in de gegenereerde workflow kan worden aangepast aan uw lokale of CI-omgeving.

Kan ik pnpm of yarn gebruiken in plaats van npm in de GitHub Actions-workflow?

Ja. Vervang de npm-opdrachten door het equivalent voor uw pakketbeheerder. Gebruik voor pnpm pnpm/action-setup v锟斤拷r de installatiestap. Vervang voor yarn npm install door yarn install --frozen-lockfile en npm run build door yarn build. Zowel pnpm als yarn zijn compatibel met GitHub Actions en kunnen worden gebruikt om statische sites te bouwen en implementeren naar GitHub Pages.

Gerelateerde tools

Meer github pages tools

Probeer ook

Probeer ook