jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

GitHub Pages Tools

GitHub Pages Workflow Generator

Choose your site type, enter the build command and output directory, and get a complete pages.yml workflow file. Includes CNAME placeholder and id-token write for deployment.

Loading tool...

What is GitHub Pages Workflow Generator?

A GitHub Pages workflow is a GitHub Actions YAML file that automatically builds and deploys your site every time you push to the main branch. Beginners often need a template that includes the correct permissions, concurrency settings, Node setup, build step, and artifact upload. This tool generates a ready-to-use pages.yml with the standard deployment structure.

Quick answer

A GitHub Actions workflow automates building and deploying your static site to GitHub Pages on every push. The generated YAML includes the standard permissions, concurrency settings, and build steps.

Limitations

  • The generated workflow is a standard template. Custom build tools, monorepos, or multi-step pipelines may need additional job steps or custom actions.
  • GitHub Pages deployment via Actions only works for public repositories or private repositories with GitHub Pro, Team, or Enterprise plans.
  • The CNAME placeholder file must be created or copied into the output directory if the site uses a custom domain.

How to use this tool

  1. Choose the site type preset or enter custom build settings.
  2. Set the Node version, build command, and output directory for your project.
  3. Copy the generated YAML into .github/workflows/pages.yml in your repository.
  4. Enable GitHub Pages in your repository settings to use GitHub Actions as the source.

What you can use it for

  • Set up automated deployment for a plain HTML static site on GitHub Pages.
  • Create a build-and-deploy workflow for a Vite or Astro static project.
  • Add a CNAME placeholder step so custom domains are not lost on deployment.

Use cases

Practical examples

Example

Plain HTML site deployment

A static HTML site with no build step needs the workflow to upload the root directory as-is. The generator creates a minimal workflow without a build step.

Example

Vite project deployment

A Vite project needs npm ci, npm run build, and the dist folder uploaded. The generator creates the correct workflow with artifact upload.

Common mistakes

  • Using the wrong output directory, which causes GitHub Pages to serve an empty or incomplete site.
  • Forgetting to set the correct permissions for pages and id-token in the workflow.
  • Leaving the CNAME placeholder in the workflow when the site does not use a custom domain.

Verification

  1. Push the workflow file to your repository and check the Actions tab to confirm the workflow runs successfully.
  2. After a successful run, visit your GitHub Pages URL and verify the site content matches the expected output.

FAQ

Questions about GitHub Pages Workflow Generator

Where should the workflow file be saved?

Save it as .github/workflows/pages.yml in your repository. GitHub Actions automatically detects and runs workflow files in that directory.

Do I need to configure anything in the repository settings?

Yes. Go to Settings > Pages and set the source to GitHub Actions. This tells GitHub Pages to use the workflow deployment instead of branch-based deployment.

What Node version should I use?

Use the Node version that matches your project requirements. Node 20 or 22 are safe choices for most static site generators. The version field in the generated workflow can be adjusted to match your local or CI environment.

Related tools

More github pages tools

Also try

Also try