{"id":19732697,"url":"https://github.com/grayside/gh-page-previews","last_synced_at":"2026-06-11T12:31:14.543Z","repository":{"id":37833202,"uuid":"469883818","full_name":"grayside/gh-page-previews","owner":"grayside","description":"Showing a way to have GH Page PR Previews with one repository and GitHub Actions.","archived":false,"fork":false,"pushed_at":"2022-11-03T21:54:48.000Z","size":38,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-28T03:59:44.696Z","etag":null,"topics":["example","github-actions","github-pages","preview"],"latest_commit_sha":null,"homepage":"https://grayside.github.io/gh-page-previews/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grayside.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-14T19:52:45.000Z","updated_at":"2022-04-15T20:58:50.000Z","dependencies_parsed_at":"2022-08-19T06:01:01.033Z","dependency_job_id":null,"html_url":"https://github.com/grayside/gh-page-previews","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/grayside/gh-page-previews","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grayside%2Fgh-page-previews","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grayside%2Fgh-page-previews/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grayside%2Fgh-page-previews/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grayside%2Fgh-page-previews/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grayside","download_url":"https://codeload.github.com/grayside/gh-page-previews/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grayside%2Fgh-page-previews/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34199516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["example","github-actions","github-pages","preview"],"created_at":"2024-11-12T00:27:34.387Z","updated_at":"2026-06-11T12:31:14.507Z","avatar_url":"https://github.com/grayside.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GitHub Page Previews\n\nThis repository shows an implementation of GitHub Page PR previews using\na single repository and GitHub Actions.\n\n**\"Production\" Site**: https://grayside.github.io/gh-page-previews/\n\n## Story\n\nWhen working on making changes to content that will be deployed to GitHub Pages,\nit's valuable to have a quick and easy preview of how a change will look\nin the site when it's deployed. GitHub Pages does not support branch previews.\n\nI've found many ideas floating around, such as spinning up another repository\nper Pull Request or using another hosting provider. Those options are complex.\n\nI realized that GitHub Pages serves a directory of static web resources.\nIt doesn't care what they are: you can serve HTML, CSS, JavaScript.\nYou can host CSV and JSON files. You can have subdirectories to build out a\nURL structure.\n\nSubdirectories can also represent other versions of the site. `/home`, `/v2/home`,\nand `/preview/PR-42/home` don't all have the same path structure, but it's close\nenough for my purposes.\n\n**This repository presents a set of GitHub Actions that micromanages a GitHub Pages\nsubdirectory on behalf of your Pull Requests, and then makes sure folks working\non the PR know how to find the preview of their work.**\n\n## Visualizing the Flow\n\n### Preview Content\n\n```mermaid\nflowchart LR;\n  commit(Commit Content)\n  push(Push Branch)\n  open(Open Pull Request)\n  gha(GitHub Actions)\n  comment(Comment on PR)\n  deploy(Deploy Preview Site)\n\n  commit--\u003epush\n  push--\u003eopen\n  open--\u003egha\n  gha--\u003edeploy\n  gha--\u003ecomment\n```\n\n### Clean-up Content\n\n```mermaid\nflowchart LR;\n  close(Close Pull Request)\n  gha(GitHub Actions)\n  clean(Remove preview site)\n  comment(Comment on PR)\n  \n  close--\u003egha\n  gha--\u003eclean\n  gha--\u003ecomment\n```\n\n## Features\n\n* **Production Deploy** a static site to gh-pages on merge to main.\n* **PR Preview Deploy** a static site to a sub-directory of the gh-pages site\nwhen a PR is opened or new code commits. (`BASE_URL/previews/PR-NN`)\n* **Cleanup a preview site** when the PR is closed by deleting the preview code\nfrom the gh-pages branch\n* **Preview status updates** are commented on the PR, linking to the deployed\npreview site and notifying when the site is deleted after the PR is closed.\n(There may be a lag between updating gh-pages branch and site deployment)\n* Hacky **Build Step** showcasing how to adjust theming and inject source code\nlinks into the deployed site.\n\n### Limitation\n\nIf your production site ever needs to remove outdated files (such as CSS with cache-buster filenames), this example won't automatically clean that up. This\nwould be much easier with https://github.com/peaceiris/actions-gh-pages/issues/273.\n\n## Methodology\n\nGitHub Pages serves content from a designated GitHub branch. Content in an\nunreferenced subdirectory of that branch is also served. In this repository,\nPRs are built and deployed to `previews/PR-NN`.\n\nUnlike production, the preview site doesn't sit at the root URL.\n\n## Dependencies\n\n* [peaceiris/actions-gh-pages](https://github.com/peaceiris/actions-gh-pages)\nis used to deploy production \u0026 preview sites.\n* [actions/github-script](https://github.com/actions/github-script) is used to\ncomment on the PR with preview environment status changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrayside%2Fgh-page-previews","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrayside%2Fgh-page-previews","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrayside%2Fgh-page-previews/lists"}