Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Aetherinox/cloudflare-publish-action

Github action for publishing to Cloudflare pages.
https://github.com/Aetherinox/cloudflare-publish-action

actions cloudflare cloudflare-pages

Last synced: 18 days ago
JSON representation

Github action for publishing to Cloudflare pages.

Host: GitHub
URL: https://github.com/Aetherinox/cloudflare-publish-action
Owner: Aetherinox
License: mit
Created: 2024-05-02T13:52:53.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-08-04T18:37:49.000Z (5 months ago)
Last Synced: 2024-08-13T07:03:23.655Z (4 months ago)
Topics: actions, cloudflare, cloudflare-pages
Language: JavaScript
Homepage: https://cloudflare-publish-action.pages.dev/
Size: 602 KB
Stars: 4
Watchers: 1
Forks: 0
Open Issues: 6
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

jimsghstars - Aetherinox/cloudflare-publish-action - Github action for publishing to Cloudflare pages. (JavaScript)

README

Cloudflare Pages ☁️ Github Action

A forked copy of the Github action [Cloudflare Pages](https://github.com/cloudflare/pages-action) which is updated to utilize NodeJS 20+ and continues updates.

[![Test Status][badge-tests]][link-tests]
[![Last Commit][badge-commit]][badge-commit]
[![Size][badge-size-gh]][badge-size-gh]
[![All Contributors][badge-all-contributors]](#contributors-)

---

- [About](#about)
- [Usage](#usage)
- [Get Account ID](#get-account-id)
- [Generate an API Token](#generate-an-api-token)
- [Define Branch](#define-branch)
- [Define Working Directory](#define-working-directory)
- [Wrangler v3](#wrangler-v3)
- [Outputs](#outputs)
- [Examples](#examples)
- [Contributors ✨](#contributors-)

---

## About
GitHub Action for creating Cloudflare Pages deployments, using the [Direct Upload](https://developers.cloudflare.com/pages/platform/direct-upload/) feature and [Wrangler](https://developers.cloudflare.com/pages/platform/direct-upload/#wrangler-cli) integration.

This action was originally found on the official Cloudflare Github page, but the action has lacked updates to more recent libraries.

Specifying `wranglerVersion: '3'` will utilize the newer `wrangler deploy` command over v2's deprecated `publish` command.

---

## Usage

1. Create an API token within the [Cloudflare Dashboard](https://dash.cloudflare.com/profile/api-tokens) with the "Cloudflare Pages — Edit" permission.
2. Within the example below, replace `CLOUDFLARE_API_TOKEN` with your given API token.
3. Create a new Github action file `.github/workflows/cfpage-publish.yml` in your repository with the following:

```yml
run-name: "☁️ CF › Deploy"
name: "☁️ CF › Deploy"

on: [push]

jobs:
job-publish:
name: >-
📦 Publish to Cloudflare
runs-on: ubuntu-latest
permissions:
contents: read
deployments: write
steps:

- name: "☑️ Checkout"
id: task_publish_checkout
uses: actions/checkout@v4

- name: "☁️ Publish to Cloudflare Pages"
id: task_publish_push
uses: aetherinox/cloudflare-publish-action@latest
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} # Cloudflare API Token at https://dash.cloudflare.com/profile/api-tokens
accountId: ACCOUNT_ID # Cloudflare account ID available on right side of CF website
projectName: PROJECT_NAME # Project name assigned at creation. view on workers-and-pages section of CF website
directory: BUILD_OUTPUT_FOLDER # Output directory for built website
gitHubToken: ${{ secrets.GITHUB_TOKEN }} # Optional: Enable this if you want to have GitHub Deployments triggered
branch: main # Branch website published to; by default this will be the branch which triggered this workflow
workingDirectory: my-site # Working directory
wranglerVersion: '3' # Optional: Change the Wrangler version, allows you to point to a specific version or a tag such as `beta`
commitMsg: 'Your commit message' # Optional: Commit message to attach
commitDirty: false # Optional: Whether or not the workspace should be considered dirty for this deployment
skipCaching: false # Optional: Skip asset caching which speeds up builds
```

Replace with following variables with your own:
- `ACCOUNT_ID`
- `PROJECT_NAME`
- `BUILD_OUTPUT_FOLDER`

### Get Account ID

To find your account ID, log in to the [Cloudflare Dashboard](https://dash.cloudflare.com/) > select your zone in Account Home > find your account ID in Overview under **API** on the right-side menu. If you have not added a zone, add one by selecting **Add site** . You can purchase a domain from [Cloudflare’s registrar](https://developers.cloudflare.com/registrar/).

If you do not have a zone registered to your account, you can also get your account ID from the `pages.dev` URL. E.g: `https://dash.cloudflare.com//pages`

### Generate an API Token

To generate an API token:

1. Log in to the [Cloudflare Dashboard](https://dash.cloudflare.com/)
2. Select [My Profile](https://dash.cloudflare.com/profile) from the dropdown menu of your user icon on the top right of your dashboard.
3. Select [API Tokens](https://dash.cloudflare.com/profile/api-tokens) > `Create Token`
4. Under `Custom Token`, select `Get Started`
5. Name your API Token in the Token name field
6. Under `Permissions`, select `Account`, `Cloudflare Pages` and `Edit`
7. Select Continue to `Summary` > `Create Token`

More information can be found on [our guide for making Direct Upload deployments with continous integration](https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/#use-github-actions).

### Define Branch

The branch name is used by Cloudflare Pages to determine if the deployment is production or preview. Read more about
[git branch build controls](https://developers.cloudflare.com/pages/platform/branch-build-controls/#branch-build-controls).

If you are in a Git workspace, Wrangler will automatically pull the branch information for you. You can override this
manually by adding the argument `branch: BRANCH_NAME`.

### Define Working Directory

By default Wrangler will run in the root package directory. If your app lives in a monorepo and you want to run Wrangler from its directory, add `workingDirectory: PACKAGE_DIRECTORY`.

Some people may store their website in the root directory of a branch; if so, specify `./` as your working directory.

### Wrangler v3

You can use the newly released [Wrangler v3](https://blog.cloudflare.com/wrangler3/) with the `wranglerVersion` property.

```yaml
- name: "☁️ Publish to Cloudflare Pages"
uses: aetherinox/cloudflare-publish-action@latest
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ACCOUNT_ID
projectName: PROJECT_NAME
directory: BUILD_OUTPUT_FOLDER
wranglerVersion: '3'
```

---

## Outputs
This action will return the following outputs:

| Name | Description |
| ------------- | --------------------------------------------------- |
| `id` | The ID of the pages deployment |
| `url` | The URL of the pages deployment |
| `alias` | The alias if it exists otherwise the deployment URL |
| `environment` | The environment that was deployed to |

---

## Examples
A few examples of this Github action are provided below:

Deploy cloudflare pages on push with deploy outputs

This example allows you to run the action either manually, or on push for the branches `master` or `main`. It includes input declarations when using `workflow_dispatch`.

```yml
run-name: "☁️ CF › Deploy"
name: "☁️ CF › Deploy"

on:
push:
branches:
- main
- master

jobs:
job-publish:
name: >-
📦 Publish to Cloudflare
runs-on: ubuntu-latest
permissions:
contents: read
deployments: write
steps:

- name: "☑️ Checkout"
id: task_publish_checkout
uses: actions/checkout@v4

- name: "☁️ Publish to Cloudflare Pages"
id: task_publish_push
uses: aetherinox/cloudflare-publish-action@latest
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ACCOUNT_ID
projectName: PROJECT_NAME
directory: BUILD_OUTPUT_FOLDER
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
branch: main
workingDirectory: my-site
wranglerVersion: '3'

- name: "📝 Outputs"
run: |
echo "ID ........... ${{ steps.task_publish_push.outputs.id }}"
echo "URL .......... ${{ steps.task_publish_push.outputs.url }}"
echo "Environment .. ${{ steps.task_publish_push.outputs.environment }}"
echo "Alias ........ ${{ steps.task_publish_push.outputs.alias }}"

- name: "📝 Outputs to Summary"
run: |
echo "Deployed to ${{ steps.task_publish_push.outputs.url }}" >> $GITHUB_STEP_SUMMARY
```

Ensure you change the values above to your own.

Run npm, @cloudflare/next-on-pages (Next.js), and deploy to cloudflare pages

[@cloudflare/next-on-pages](https://github.com/cloudflare/next-on-pages) is a CLI tool that you can use to build and develop Next.js applications so that they can run on the Cloudflare Pages platform.

```yml
run-name: "☁️ CF › Deploy"
name: "☁️ CF › Deploy"

on:
push:
branches:
- main
- master

jobs:
job-publish:
name: >-
📦 Publish to Cloudflare
runs-on: ubuntu-latest
permissions:
contents: read
deployments: write
statuses: write
steps:

- name: "☑️ Checkout"
id: task_publish_checkout
uses: actions/checkout@v4

- name: "📦 Install Packages"
id: task_publish_install_packages
run: npm install

- name: "🔨 Build"
id: task_publish_build_nextonpages
run: npx @cloudflare/next-on-pages@1

- name: "☁️ Publish to Cloudflare Pages"
id: task_publish_push
uses: aetherinox/cloudflare-publish-action@latest
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ACCOUNT_ID
projectName: PROJECT_NAME
directory: BUILD_OUTPUT_FOLDER
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
branch: main
workingDirectory: my-site
wranglerVersion: '3'

- name: "📝 Outputs to Summary"
run: |
echo "Deployed to ${{ steps.task_publish_push.outputs.url }}" >> $GITHUB_STEP_SUMMARY
```

Ensure you change the values above to your own.

Run on push + workflow dispatch (with inputs)

This example allows you to run the action either manually, or on push for the branches `master` or `main`. It includes input declarations when using `workflow_dispatch`.

```yml
run-name: "☁️ CF › Deploy"
name: "☁️ CF › Deploy"

on:
push:
branches:
- main
- master

workflow_dispatch:
inputs:
PROJECT_NAME:
description: "Project Name"
required: true
default: 'my-site'
type: string

CLOUDFLARE_ACCOUNT_ID:
description: "Cloudflare Account ID"
required: true
default: 'XXXXXXXXXXXXXXXX'
type: string

DIRECTORY_BUILD_OUTPUT:
description: "Build Output Dir"
required: true
default: './'
type: string

DIRECTORY_WORKING:
description: "Working Dir"
required: true
default: './'
type: string

WRANGLER_VERSION:
description: "Wrangler Version"
required: true
default: '3'
type: string

BRANCH:
description: 'Website Branch'
required: true
default: 'main'
type: choice
options:
- main
- master

jobs:
job-publish:
name: >-
📦 Publish to Cloudflare
runs-on: ubuntu-latest
permissions:
contents: read
deployments: write
steps:

- name: "☑️ Checkout"
id: task_publish_checkout
uses: actions/checkout@v4

- name: "☁️ Publish to Cloudflare Pages"
id: task_publish_push
uses: aetherinox/cloudflare-publish-action@latest
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID || inputs.CLOUDFLARE_ACCOUNT_ID }}
projectName: ${{ inputs.PROJECT_NAME || 'my-site' }}
directory: ${{ inputs.DIRECTORY_BUILD_OUTPUT || './' }}
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
branch: ${{ inputs.BRANCH || 'main' }}
workingDirectory: ${{ inputs.DIRECTORY_WORKING || './' }}
wranglerVersion: ${{ inputs.WRANGLER_VERSION || '3' }}
```

Ensure you change the values above to your own.

Verify & create project using Cloudflare APU, then push to cloudflare (with inputs)

This example adds the usage of the Cloudflare api to first check if your project name actually exists on Cloudflare, creates the project if not, and then pushes to Cloudflare pages.