GitHub Pages

For an easier and recommended way to publish your Plasmic project, consider Plasmic hosting.

Set up GitHub Pages

Note this workflow depends on github-pages-deploy-action by JamesIves.

Create an empty branch called gh-pages. We recommend following this GitHub Gist from ramnathv.
Navigate to your GitHub Pages settings. In your repository, click “Settings” and, under “Code and automation”, click “Pages”.
Set up your “Build and deployment” information.
- For “Source”, choose “Deploy from a branch”.
- For “Branch”, choose your newly created gh-pages branch and the ”/ (root)” directory.
- Click “Save”.
Enter your custom domain name and follow the GitHub Pages instructions for configuring a custom domain and click “Save”.
(Recommended) Check “Enforce HTTPS”.
Add a .github/workflows/plasmic-push.yml file with the following content to the main branch:

Copy

name: Build and deploy Plasmic app

on:
  push:
    branches:
      - main

jobs:
  job:
    name: Build and deploy
    runs-on: ubuntu-latest
    steps:
      - id: checkout
        name: Check out repository
        uses: actions/checkout@v2
        with:
          persist-credentials: false
          fetch-depth: 0
      - id: node
        name: Set up node v16
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - id: cache
        name: Recover cache
        uses: actions/cache@v2
        with:
          key: lock-${{ hashFiles('package-lock.json', 'yarn.lock') }}
          path: node_modules
      - id: build
        name: Build Plasmic app
        uses: plasmicapp/plasmic-action@master
        with:
          run: build
          branch: main
          skip_if_plasmic: true
      - id: gh-pages
        name: Publish to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@4.1.0
        if: ${{ steps.build.outputs.publish_dir }}
        with:
          branch: gh-pages
          folder: ${{ steps.build.outputs.publish_dir }}

Was this page helpful?

Have feedback on this page? Let us know on our forum.