Skip to content

Instantly share code, notes, and snippets.

@jpillora

jpillora/README.md

Last active February 5, 2023 23:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jpillora/4b28a1042ad1f536ea597e2b8792deeb to your computer and use it in GitHub Desktop.
Save jpillora/4b28a1042ad1f536ea597e2b8792deeb to your computer and use it in GitHub Desktop.
Download ZIP
Vite + TypeScript + Reveal.js
Raw
README.md

  1. Setup

    npx create-vite
# vanilla
# typescript
# enter name
cd name/
npm install reveal.js

  2. Replace index.html with

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css">
    <link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Reveal.js</title>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <div>
            Slide 1
          </div>
          <div>
            <img data-src="/vite.svg">
          </div>
        </section>
        <section>Slide 2</section>
        <section>Slide 3</section>
        <section>Slide 4</section>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

  3. Start dev server

    npx run dev

  4. Remove unused files

  5. Add your slides, see examples https://revealjs.com/

  6. Build static version and host

    • Free via Netlify, Vercel, Cloudflare Pages, Github Pages (public repos)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment