diff --git a/.github/workflows/examples.yml b/.github/workflows/examples.yml
new file mode 100644
index 00000000..cd068838
--- /dev/null
+++ b/.github/workflows/examples.yml
@@ -0,0 +1,60 @@
+name: Build and deploy examples
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          # cache: 'yarn'
+
+      - name: Install Yarn
+        run: npm install -g yarn
+      - name: Cache node modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: yarn-deps-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            yarn-deps-${{ hashFiles('yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+      - name: Build libraries
+        run: yarn build
+
+      - name: Build example playgrounds
+        run: yarn build:playgrounds
+
+      - uses: vimtor/action-zip@v1.1
+        with:
+          dest: github-pages
+          files: |
+            examples/index.html
+            examples/demo/dist/
+            examples/js-demo/dist/
+            examples/templating/dist/
+
+      # - name: Fix permissions
+      #   run: |
+      #     chmod -v -R +rX "_site/" | while read line; do
+      #       echo "::warning title=Invalid file permissions automatically fixed::$line"
+      #     done
+
+      - name: Upload pages artifacts
+        uses: actions/upload-pages-artifact@v2
+
+  deploy:
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3
diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 00000000..516b2727
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Algolia Recommend | Examples</title>
+
+    <style>
+      :root {
+        margin: 0;
+        padding: 0;
+        color: #000033;
+      }
+      body {
+        background: #fff;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+          'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+          'Helvetica Neue', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        background: white;
+        background-image: radial-gradient(black 1px, transparent 0);
+        background-size: 40px 40px;
+        background-position: -19px -19px;
+      }
+      main {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        margin: auto;
+        font-size: 1.1rem;
+        background-color: rgba(255, 255, 255, 0.8);
+        margin-top: 24px;
+        margin-bottom: 24px;
+      }
+      header {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+      }
+      h1 {
+        font-size: 2rem;
+        font-weight: 500;
+        margin-top: 0;
+        color: #2b3cbb;
+      }
+      ul {
+        margin: 0 0 0 -2px;
+        padding: 20px 0 0 0;
+      }
+      ul li {
+        list-style: none;
+        margin-bottom: 16px;
+      }
+      a {
+        padding: 5px;
+        text-decoration: dotted underline;
+      }
+      a.highlight:hover {
+        text-decoration: underline;
+        background-color: #ff2a6a;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+      ul a {
+        color: #000;
+        padding: 10px 5px;
+        margin: 0 -5px;
+        white-space: nowrap;
+        overflow: hidden;
+        width: 100%;
+        text-overflow: ellipsis;
+      }
+      svg {
+        height: 2.5rem;
+        vertical-align: text-bottom;
+      }
+      ::selection {
+        background-color: #5468ff;
+        color: #000;
+      }
+      ::-moz-selection {
+        background-color: #5468ff;
+        color: #000;
+      }
+      @media (min-width: 768px) {
+        ul li {
+          padding-right: 20px;
+        }
+      }
+      @media (min-width: 992px) {
+        body {
+          padding: 45px;
+        }
+        h1,
+        ul li {
+          box-sizing: border-box;
+          justify-content: flex-start;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>
+          <svg
+            width="80"
+            height="80"
+            viewBox="0 0 80 80"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            role="img"
+            aria-label="Algolia Recommend Logo"
+          >
+            <title>Algolia Recommend Logo</title>
+            <path d="m50 65-4 12H34l-4-12h20Z" fill="#36395A" />
+            <path
+              d="M68 32c0 15.464-12.536 28-28 28S12 47.464 12 32 24.536 4 40 4s28 12.536 28 28Z"
+              fill="#FF2A6A"
+            />
+            <path d="M43 34V17L26 34h17Z" fill="#fff" />
+            <path d="M37 30v17l17-17H37Z" fill="#fff" />
+          </svg>
+          Algolia Recommend Examples
+        </h1>
+      </header>
+
+      <ul>
+        <li>
+          <a href="./demo/dist/">React Playground Example</a>&nbsp;(<a
+            href="https://www.npmjs.com/package/@algolia/recommend-react"
+            class="highlight"
+            >@algolia/recommend-react</a
+          >)
+        </li>
+        <li>
+          <a href="./js-demo/dist/">Javascript Playground Example</a>&nbsp;(<a
+            href="https://www.npmjs.com/package/@algolia/recommend-js"
+            class="highlight"
+            >@algolia/recommend-js</a
+          >)
+        </li>
+        <li>
+          <a href="./templating/dist/">Templating Playground Example</a>
+        </li>
+
+        <li>
+          If you want to use the API client without the UI components, you can
+          use the
+          <a
+            href="https://www.npmjs.com/package/@algolia/recommend"
+            class="highlight"
+            >@algolia/recommend</a
+          >
+          package.
+        </li>
+      </ul>
+    </main>
+  </body>
+</html>
diff --git a/package.json b/package.json
index 1b3207c2..31f59521 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "playground-js:start": "yarn workspace @algolia/recommend-js-example start",
     "playground-templating:start": "yarn workspace @algolia/recommend-templating-example start",
     "playground:start": "yarn workspace @algolia/recommend-react-example start",
+    "build:playgrounds": "lerna run build --scope=\"'@algolia/recommend-*-example'\"",
     "prepare": "lerna run prepare --no-private",
     "release": "shipjs prepare",
     "test:size": "bundlesize",
