-
Fork this repository to your GitHub account.
-
Configure GitHub Actions secrets and variables.
Secret Description How to Obtain CLOUDFLARE_API_TOKENCloudflare API token used by GitHub Actions to deploy Workers and Pages. 1. Open Cloudflare Dashboard and go to My Profile -> API Tokens.
2. ClickCreate Tokenand selectCreate Custom Token.
3. Grant account-level permissions:Cloudflare Pages:Edit,Workers Scripts:Edit, andWorkers Routes:Edit.
4. InAccount Resources, include the target account.CLOUDFLARE_ACCOUNT_IDCloudflare account identifier used by deployment actions. 1. Open Cloudflare Dashboard in your browser.
2. Copy the account ID directly from the URL path, for example:https://dash.cloudflare.com/<ACCOUNT_ID>/home/overview.UI_GALLERY_GITHUB_TOKENToken used by ui-galleryto fetch and parse GitHub repository information (repository name, stars, and forks) for the Git Info UI.1. Create a GitHub personal access token with read access to target repositories.
2. Add it as repository secretUI_GALLERY_GITHUB_TOKENinSettings -> Secrets and variables -> Actions.Variable Description How to Obtain CLOUDFLARE_PAGES_PROJECTCloudflare Pages project name used to publish the ui-gallerybundle.1. Open Cloudflare Dashboard and go to Workers & Pages.
2. Create a new Pages project first (an empty project is fine for initialization).
3. Set a custom project name, andproject-gallery-ui-galleryis recommended.
4. Use that exact project name as the value ofCLOUDFLARE_PAGES_PROJECT.CLOUDFLARE_TARGET_HOST_URL_MAPJSON object that maps incoming Worker hosts to the source URLs of target frontend project websites you want to proxy. Must add this variable in Productionenvironment. -
Set
CLOUDFLARE_TARGET_HOST_URL_MAPas a valid JSON object, for example:{ "custom-domain.configured-in-workers.com": "https://source-url.target-frontend-project-website.com" }- For the first deployment, pre-set this value before triggering
Deploy Cloudflare. - key: The request host that users access on your Worker custom domain. When users open this domain, project gallery will render and display the mapped target frontend project website.
- value: The source URL of the target frontend project website you want to proxy, including
http://orhttps://. - You can define multiple host-to-source-URL mappings.
- For the first deployment, pre-set this value before triggering
-
After the first deployment, configure Worker custom domains manually in the Cloudflare dashboard:
[!IMPORTANT]
Make sure every custom domain exactly matches a key in
CLOUDFLARE_TARGET_HOST_URL_MAP.- Open
Workers & Pages. - Select the Worker service
project-gallery-edge-proxy. - Go to
Settings -> Domains & Routes(orTriggers) and add custom domains.
- Open
-
Run deployment manually from GitHub Actions:
- Open
Actionsand runDeploy Cloudflare. - Must use branch
masterfor deployment.
- Open
Configure metadata in each target frontend project's index.html (<head>), because these metadata values directly affect project gallery global navigation bar UI behavior.
| Metadata Rule | Global Navigation Bar Behavior |
|---|---|
<title>...</title> |
Controls the title text shown. |
<link rel="icon" href="..."> |
Controls the logo shown. |
<meta name="git" content="https://github.com/<owner>/<repo>.git"> |
Enables Git Info UI and displays repository name, stars, and forks. |
<meta name="menu-<id>" content="<label>, <url>"> |
Adds a primary menu item. Multiple menu items are displayed in the order they appear in the HTML source.<id> is a unique identifier.<label> is the displayed text.<url> is the link destination. |