add deployment workflows for GitHub Pages (primer#2028)

.github/workflows/deploy_preview.yml

@@ -1,47 +1,18 @@
 name: Deploy
 on:
-  push:
-    branches-ignore:
-      - 'main'
+  pull_request:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
 
 jobs:
   deploy-preview:
     if: ${{ github.repository == 'primer/react' }}
     name: Preview
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Create GitHub deployment
-        uses: chrnorm/[email protected]
-        id: deployment
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          environment: Preview
-
-      - name: Deploy with Vercel
-        uses: amondnet/vercel-action@v20
-        id: vercel-action
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }}
-          github-comment: false
-          vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }}
-          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
-
-      - name: Update deployment status (success)
-        if: success()
-        uses: chrnorm/[email protected]
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          environment_url: ${{ steps.vercel-action.outputs.preview-url }}
-          state: 'success'
-          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
-
-      - name: Update deployment status (failure)
-        if: failure()
-        uses: chrnorm/[email protected]
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          state: 'failure'
-          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+    uses: primer/.github/.github/workflows/deploy_preview.yml@main
+    with:
+      node_version: 16
+      build: npm run build:docs:preview
+      output_dir: docs/public

.github/workflows/deploy_production.yml

@@ -1,8 +1,15 @@
 name: Deploy
+
 on:
   push:
     branches:
-      - 'main'
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 jobs:
   guard:
     name: Guard
@@ -16,55 +23,21 @@ jobs:
 
       - id: changeset-count
         run: echo "::set-output name=change_count::$(ls .changeset/*.md | grep -v README | wc -l | xargs)"
-        
+
       # Log changeset count for debugging purposes
       - name: Log changeset count
         run: echo ${{ steps.changeset-count.outputs.change_count }}
 
-  deploy:
-    name: Production
-    needs: [guard]
-    #if: ${{ needs.guard.outputs.should_deploy == true }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-
       # Log guard output for debugging purposes
       - name: Log guard output
         run: echo ${{ needs.guard.outputs.should_deploy }}
 
-      - name: Create GitHub deployment
-        uses: chrnorm/[email protected]
-        id: deployment
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          environment: Production
-
-      - name: Deploy with Vercel
-        if: ${{ steps.changeset-count.outputs.CHANGE_COUNT == 0 }}
-        uses: amondnet/vercel-action@v20
-        id: vercel-action
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }}
-          vercel-args: '--prod'
-          github-comment: false
-          vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }}
-          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
-
-      - name: Update deployment status (success)
-        if: success()
-        uses: chrnorm/[email protected]
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          environment_url: ${{ steps.vercel-action.outputs.preview-url }}
-          state: 'success'
-          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
-
-      - name: Update deployment status (failure)
-        if: failure()
-        uses: chrnorm/[email protected]
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          state: 'failure'
-          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+  deploy:
+    name: Production
+    needs: [guard]
+    #if: ${{ needs.guard.outputs.should_deploy == true }}
+    uses: primer/.github/.github/workflows/deploy.yml@main
+    with:
+      node_version: 16
+      build: npm run build:docs
+      output_dir: docs/public

contributor-docs/CONTRIBUTING.md

@@ -186,13 +186,13 @@ If everything looks great, the design systems team member will approve the pull
 
 ### Deploying
 
-All of our documentation sites use the [Now integration](https://github.com/organizations/primer/settings/installations/1007619) to deploy documentation changes whenever code is merged into main. The integration also creates a preview site every time you commit code to a branch. To view the preview site, navigate to the PR and find the comment from the `now` bot. This will include a link to the preview site for your branch.
+All of our documentation sites use GitHub Pages to deploy documentation changes whenever code is merged into main. The integration also creates a preview site every time you commit code to a branch. To view the preview site, navigate to the PR and find the comment from the `GitHub Actions` bot. This will include a link to the preview site for your branch.
 
 Once you merge your branch into main, any changes to the docs will automatically deploy. No further action is necessary.
 
 ### Path aliasing
 
-This site is served as a subdirectory of [primer.style] using a [path alias](https://zeit.co/docs/features/path-aliases) configured in that repo's [`rules.json`](https://github.com/primer/primer.style/tree/master/rules.json). If you change the production deployment URL for this app, you will also need to change it there and re-deploy that app; otherwise, Now will automatically route requests from [primer.style/components](https://primer.style/components/) to the new deployment whenever you alias this one to `primer-components.now.sh`.
+This site is served as a subdirectory of [primer.style] using a [path alias](https://zeit.co/docs/features/path-aliases) configured in that repo's [`rules.json`](https://github.com/primer/primer.style/tree/master/rules.json). If you change the production deployment URL for this app, you will also need to change it there and re-deploy that app; otherwise, Now will automatically route requests from [primer.style/components](https://primer.style/components/) to the new deployment whenever you alias this one to `https://primer.github.io/react/`.
 
 ### Publishing
 

docs/package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "clean": "gatsby clean",
     "develop": "gatsby develop",
-    "build": "pushd .. && npm install && popd && cross-env NODE_ENV=production gatsby build --prefix-paths && npm run build:storybook",
-    "build:storybook": "cd .. && ./script/build-storybook"
+    "build": "cross-env NODE_ENV=production gatsby build --prefix-paths",
+    "build:preview": "cross-env NODE_ENV=production gatsby build"
   },
   "engines": {
     "node": ">=12",

package.json

@@ -39,14 +39,17 @@
     "start": "concurrently npm:start:*",
     "start:docs": "cd docs && npm run develop",
     "start:storybook": "start-storybook -p 6006",
-    "build:storybook": "build-storybook",
+    "build:storybook": "script/build-storybook",
+    "build:docs": "script/build-docs",
+    "build:docs:preview": "script/build-docs preview",
     "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
     "test:type-check": "tsc --noEmit",
     "release": "npm run build && changeset publish",
     "size": "size-limit",
+    "postinstall": "cd docs && npm i",
     "prepare": "husky install"
   },
   "repository": "primer/react",

script/build-docs

@@ -0,0 +1,11 @@
+#!/bin/bash
+set -e
+
+if [ -n "$1" ]; then
+  cd docs && npm run build:preview && cd ../ && npm run build:storybook preview
+else
+  cd docs && npm run build && cd ../ && npm run build:storybook
+fi
+
+
+

script/build-storybook

@@ -1,7 +1,12 @@
 #!/bin/bash
+set -e
 
 # Add base url to be able to serve static files
-echo '<base href="/react/storybook/" />' >> .storybook/manager-head.html
+if [ -n "$1" ]; then
+  echo '<base href="/storybook/" />' >> .storybook/manager-head.html
+else
+  echo '<base href="/react/storybook/" />' >> .storybook/manager-head.html
+fi
 
 # Build storybook inside docs
 ./node_modules/.bin/build-storybook -o docs/public/storybook -s docs/public/static