Add tutorial section

.github/workflows/delete-preview.yml

@@ -0,0 +1,32 @@
+name: Delete PR Preview
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  delete-preview:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Make empty directory
+        run: mkdir -p public
+
+      - name: Delete preview folder
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./public
+          destination_dir: "PR${{ github.event.number }}"
+
+      - name: Comment on PR
+        uses: hasura/comment-progress@v2.2.0
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          repository: ${{ github.repository }}
+          number: ${{ github.event.number }}
+          id: deploy-preview
+          message: "🪓PR closed, deleted preview."

.github/workflows/deploy.yml

@@ -4,6 +4,8 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
+  pull_request:
 
 jobs:
   deploy:
@@ -12,6 +14,7 @@ jobs:
       contents: write
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
+    if: ${{ github.ref == 'refs/heads/main' }}
     steps:
       - uses: actions/checkout@v4
 
@@ -35,3 +38,55 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./build
           cname: revisit.dev
+
+  pr-deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+      cancel-in-progress: true
+    if: ${{ github.event_name == 'pull_request' }}
+
+    steps:
+      - name: Comment on PR
+        uses: hasura/comment-progress@v2.2.0
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          repository: ${{ github.repository }}
+          number: ${{ github.event.number }}
+          id: deploy-preview
+          message: "Starting deployment of preview ⏳..."
+
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build PR preview
+        run: yarn build
+        env:
+          BASE_URL: "/PR${{ github.event.number }}/"
+
+      - name: Push PR deploy preview
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build
+          destination_dir: "PR${{ github.event.number }}"
+          keep_files: true
+
+      - name: Update comment
+        uses: hasura/comment-progress@v2.2.0
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          repository: ${{ github.repository }}
+          number: ${{ github.event.number }}
+          id: deploy-preview
+          message: "A preview of ${{ github.sha }} is uploaded and can be seen here:\n\n ✨ https://revisit.dev/PR${{ github.event.number }} ✨\n\nChanges may take a few minutes to propagate."

docs/getting-started/installation.md

@@ -4,12 +4,31 @@ ReVISit project is open-source – meaning anyone can see the entire codebase. M
 
 For most users, the best place to start is the template repository (first option below). If you want all demos and tighter upstream parity, or are considering contributing to reVISit, we recommend you fork the repository instead.
 
+## Before you start
+
+Install these tools before cloning and running a study locally:
+
+- [Git](https://git-scm.com/downloads), so you can clone the template repository and share changes with collaborators.
+- [Visual Studio Code](https://code.visualstudio.com/), or another editor with JSON support. 
+- The Active LTS version of [Node.js](https://nodejs.org/).
+- [Yarn](https://yarnpkg.com/), which reVISit uses to install dependencies and run the local server.
+
+You can check whether Git, Node, and Yarn are already installed with:
+
+```bash
+git --version
+node --version
+yarn --version
+```
+
 ## Starting from the Template Repository (Recommended)
 
 Navigate to the [template repository](https://github.com/revisit-studies/template), and click the "Use this template" button. This will create a new repository in your GitHub account with the same files as the template repository, based on the latest stable release of reVISit.
 
 ![Use this template button](./img/template-repo.png)
 
+![Create a new repository from the template](./img/create-new-repo.png)
+
 :::info
 You can choose a name for the repository to suit your needs, but if you choose anything other than `study`, you also need to adjust the `VITE_BASE_PATH` in your [`.env`](https://github.com/revisit-studies/study/blob/main/.env) file to reflect that change.
 :::
@@ -25,6 +44,21 @@ Most likely, you will **receive a warning from GitHub about a potential security
 You can safely ignore this warning. The reason for this is that the Firebase API key is not a secret key, and it is intended to be shared publicly in client-side code. For more information, see the [Firebase documentation on API keys](https://firebase.google.com/docs/projects/api-keys#api_key_security_recommendations).
 :::
 
+### Clone your template repository
+
+After GitHub creates your repository from the template, open the repository page and click "Code". Copy the clone URL from the HTTPS and clone it to your computer:
+
+```bash
+git clone https://github.com/your-github-name/your-repository-name.git
+cd your-repository-name
+```
+
+![Copy the repository clone URL from GitHub](./img/clone-repo.png)
+
+:::note
+If you have not configured GitHub authentication locally, you can use "Download ZIP". 
+:::
+
 ## Forking Repository (Advanced Alternative to Template Repository)
 
 Forking the repository is a more advanced option that allows you to have a copy of the entire `study` repository in your GitHub account. This means that you will have access to all the demo studies and that you can choose to follow the latest changes from the main repository (e.g., by following the `dev` branch). However, it also means that your repository will be linked to the upstream repository's fork network, which can make it more complex to manage.
@@ -49,7 +83,7 @@ After the repository is on your local machine, you will have the entire codebase
 
 ## Installing Required Software
 
-To continue, you will need the Active LTS [Node.js](https://nodejs.org/) version, and [Yarn](https://yarnpkg.com/) installed. If you already have Yarn installed, you can go to Step 2 below.
+If you already have Git, Node.js, Yarn, and a code editor installed, you can go to Step 2 below.
 
 :::info
 Yarn requires that you have the package manager NPM installed. If you do not have NPM installed, please review the [NPM documentation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to get started. These docs will also direct you on how to install Node – a prerequisite of NPM.
@@ -59,6 +93,14 @@ Yarn requires that you have the package manager NPM installed. If you do not hav
 
 ```npm i -g yarn```
 
+:::note
+If your machine restricts global installs, run the command with administrator permissions:
+
+```bash
+sudo npm i -g yarn
+```
+:::
+
 **Step 2: Once Yarn is successfully installed, navigate to your local repository and run the following Yarn command:**
 
 ```yarn install```
@@ -71,8 +113,16 @@ This will install all the packages that the reVISit requires to run.
 
 This will launch a local web server which can be accessed to view and interact with reVISit. By default, you can access this by visiting [http://localhost:8080/](http://localhost:8080/). Any change you make to the code will automatically update the website.
 
+:::warning
+If `yarn install` or `yarn serve` says it cannot find `package.json`, you are probably not inside the repository folder. Run `cd your-repository-name` first, then try the command again.
+:::
+
 When you visit the site, you'll see a list of demo studies, identical to [the demo page](https://revisit.dev/study/). You can interact with any of these studies to get some familiarity (and hopefully some inspiration) for how reVISit can help you quickly launch a crowd-sourced visualization study.
 
+:::note
+If you started from the template repository, this will be a smaller set of starter tutorial studies.
+:::
+
 :::warning
 We do not support using `npm` to run reVISit. Please use `yarn` for all package management and running commands.
 :::
@@ -85,8 +135,10 @@ import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLink
         {name: "ReVISit Template Repository", url: "https://github.com/revisit-studies/template"},
         {name: "ReVISit Main Repository", url: "https://github.com/revisit-studies/study"},
         {name: "Cloning Repository", url: "https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository"},
+        {name: "Git Installation", url: "https://git-scm.com/downloads"},
+        {name: "Visual Studio Code Installation", url: "https://code.visualstudio.com/"},
         {name: "Node.js Installation", url: "https://nodejs.org/en"},
         {name: "Yarn Installation", url: "https://yarnpkg.com/"},
         {name: "NPM Installation", url: "https://docs.npmjs.com/downloading-and-installing-node-js-and-npm"}
     ]}
-/>
+/>