add deployment workflows for GitHub Pages (primer#258)

* add deployment workflows for GitHub Pages

* add eslintignore for node_modules

* peg lint node version to 14

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public/

.github/workflows/deploy.yml

@@ -0,0 +1,63 @@
+name: Deploy to production environment
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v2
+        with:
+          version: 12
+
+      - name: Set up Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '12'
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build
+        run: yarn build
+
+      - name: Archive build output
+        run: 'tar --dereference --directory public/ -cvf artifact.tar .'
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@main
+        with:
+          name: github-pages
+          path: artifact.tar
+
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: paper-spa/deploy-pages@main
+        with:
+          preview: false

.github/workflows/deploy_preview.yml

@@ -0,0 +1,61 @@
+name: Deploy to preview environment
+
+on:
+  pull_request:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout PR
+        uses: actions/checkout@v2
+        with:
+          version: 12
+
+      - name: Set up Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '12'
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build
+        run: yarn build:preview
+
+      - name: Archive build output
+        run: 'tar --dereference --directory public/ -cvf artifact.tar .'
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@main
+        with:
+          name: github-pages
+          path: artifact.tar
+
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: paper-spa/deploy-pages@main
+        with:
+          preview: true

.gitignore

@@ -1,3 +1,5 @@
+node_modules/
+
 # Logs
 logs
 *.log

README.md

@@ -3,22 +3,23 @@
 Documentation for UI patterns and interaction guidelines.
 
 ## Status
+
 This is currently a work in progress! Follow along on our [project board](https://github.com/primer/design/projects/1).
 
 ## Local development
 
 1. Clone this repo, e.g. with:
 
-    ```sh
-    git clone https://github.com/primer/design
-    ```
+   ```sh
+   git clone https://github.com/primer/design
+   ```
 
 1. In the terminal, navigate (`cd`) to the repo directory
 
 1. `yarn` to install dependencies
 
-2. `yarn start` to start the dev server
+1. `yarn start` to start the dev server
 
 ## Deployment
 
-We deploy this site using [Vercel](https://vercel.com). Every push to a branch other than `main` will deploy to a URL unique to the branch name, i.e.: `primer-design-{branch}.now.sh`. Merges to `main` will automatically deploy the site to `primer-design.now.sh`.
+We deploy this site using [GitHub Pages](https://pages.github.com/). Every push to a branch other than `main` will deploy to a URL unique to the preview environment. Merges to `main` will automatically deploy the site to `https://primer.github.io/design/`.

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "start": "gatsby develop",
     "build": "gatsby build --prefix-paths",
+    "build:preview": "gatsby build",
     "now-build": "yarn build",
     "lint": "eslint ."
   },