Deploying reveal.js

Introduction

reveal.js is an open-source HTML presentation framework that enables creating fully-featured, beautiful presentations using web technologies. Unlike traditional presentation software, reveal.js presentations are web pages that can be hosted, shared, and viewed in any modern browser without special software.

Created by Hakim El Hattab, reveal.js has become the go-to framework for developers, educators, and speakers who want pixel-perfect control over their presentations. The framework supports Markdown content, speaker notes, PDF export, and extensive customization.

Key highlights of reveal.js:

• HTML/CSS/JS Based: Full web technology support for ultimate customization
• Markdown Support: Write presentations in Markdown for simple content creation
• Nested Slides: Vertical slides for organizing related content
• Speaker Notes: Separate speaker view with notes, timer, and preview
• PDF Export: Export presentations to PDF for offline sharing
• Syntax Highlighting: Built-in code highlighting for technical presentations
• LaTeX Support: Mathematical equation rendering with MathJax or KaTeX
• Fragments: Reveal content step-by-step within slides
• Auto-Animate: Smooth transitions between slides
• Mobile Support: Touch gestures for navigation on tablets and phones
• Plugins: Extensible architecture with community plugins
• Themes: Multiple built-in themes with customization options
• Open Source: MIT licensed with active development

This guide walks through deploying reveal.js on Klutch.sh using Docker, hosting your presentations, and setting up the framework for production use.

Why Deploy reveal.js on Klutch.sh

Deploying reveal.js on Klutch.sh provides several advantages for hosting presentations:

Simplified Deployment: Klutch.sh automatically detects your Dockerfile and builds your presentation server. Push to GitHub, and your presentations deploy automatically.

Persistent Storage: Attach persistent volumes for presentation files and assets. Your content survives container restarts.

HTTPS by Default: Klutch.sh provides automatic SSL certificates, ensuring secure access to your presentations and enabling features like multiplex presentation control.

GitHub Integration: Connect your presentation repository directly from GitHub. Updates trigger automatic redeployments, making iteration seamless.

Scalable Resources: Host simple static presentations or resource-intensive interactive content with appropriate resources.

Custom Domains: Assign a custom domain to your presentations for professional, branded URLs.

Always-On Availability: Your presentations remain accessible 24/7 for audiences worldwide.

Prerequisites

Before deploying reveal.js on Klutch.sh, ensure you have:

• A Klutch.sh account
• A GitHub account with a repository for your presentations
• Basic familiarity with HTML, CSS, and JavaScript
• Understanding of Markdown (optional, for Markdown-based presentations)
• (Optional) A custom domain for your presentations

Understanding reveal.js Architecture

reveal.js operates as a client-side JavaScript framework:

Core Framework: The reveal.js library handles slide rendering, navigation, animations, and user input.

HTML Structure: Presentations are structured as nested HTML sections, with each section representing a slide.

Plugins: Optional plugins extend functionality for code highlighting, Markdown parsing, speaker notes, and more.

Static Assets: CSS themes, JavaScript, and media files are served statically.

Optional Server: For features like multiplex or speaker notes, a Node.js server can provide real-time synchronization.

Preparing Your Repository

To deploy reveal.js on Klutch.sh, create a GitHub repository containing your presentations.

Repository Structure

revealjs-deploy/
├── Dockerfile
├── index.html
├── css/
│   └── custom.css
├── images/
│   └── logo.png
├── presentations/
│   ├── intro.html
│   └── demo.html
├── .dockerignore
└── README.md

Creating the Dockerfile

Create a Dockerfile for hosting reveal.js with nginx:

FROM node:18-alpine AS builder

WORKDIR /app

# Clone reveal.js
RUN apk add --no-cache git && \
    git clone https://github.com/hakimel/reveal.js.git . && \
    npm install

FROM nginx:alpine

# Copy reveal.js files
COPY --from=builder /app /usr/share/nginx/html

# Copy custom presentations and assets
COPY index.html /usr/share/nginx/html/
COPY presentations/ /usr/share/nginx/html/presentations/
COPY css/ /usr/share/nginx/html/css/
COPY images/ /usr/share/nginx/html/images/

# Expose the web port
EXPOSE 80

Creating a Sample Presentation

Create an index.html file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Presentation</title>
    <link rel="stylesheet" href="dist/reset.css">
    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/black.css">
    <link rel="stylesheet" href="plugin/highlight/monokai.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <h1>Welcome</h1>
          <p>Your presentation starts here</p>
        </section>
        <section>
          <h2>Slide 2</h2>
          <p>Add your content</p>
        </section>
        <section>
          <section>
            <h2>Vertical Slides</h2>
            <p>Press down to continue</p>
          </section>
          <section>
            <h2>Nested Content</h2>
            <p>Great for detailed topics</p>
          </section>
        </section>
      </div>
    </div>
    <script src="dist/reveal.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>
    <script>
      Reveal.initialize({
        hash: true,
        plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
      });
    </script>
  </body>
</html>

Creating the .dockerignore File

Create a .dockerignore file:

.git
.github
*.md
LICENSE
.gitignore
*.log
.DS_Store
node_modules/

Deploying reveal.js on Klutch.sh

Once your repository is prepared, follow these steps to deploy:

Push Your Repository to GitHub

Initialize your repository and push to GitHub:

git init
git add Dockerfile index.html presentations/ css/ images/ .dockerignore README.md
git commit -m "Initial reveal.js deployment"
git remote add origin https://github.com/yourusername/revealjs-deploy.git
git push -u origin main

Create a New Project on Klutch.sh

Navigate to the Klutch.sh dashboard and create a new project. Give it a descriptive name like “presentations” or “slides”.

Create a New App

Within your project, create a new app. Connect your GitHub account if you haven’t already, then select the repository containing your reveal.js Dockerfile.

Configure HTTP Traffic

In the deployment settings:

• Select HTTP as the traffic type
• Set the internal port to 80

Deploy Your Application

Click Deploy to start the build process. Klutch.sh will:

• Detect your Dockerfile automatically
• Build the container image with reveal.js and your presentations
• Start the nginx container
• Provision an HTTPS certificate

Access Your Presentations

Once deployment completes, access your presentations at https://your-app-name.klutch.sh.

Creating Presentations

Markdown-Based Presentations

Create presentations using Markdown:

<section data-markdown>
  <textarea data-template>
    ## Slide 1
    Content in Markdown

    ---

    ## Slide 2
    - Bullet points
    - Work naturally

    ---

    ## Code Blocks
    ```python
    def hello():
        print("Hello, World!")
    ```
  </textarea>
</section>

External Markdown Files

Load Markdown from separate files:

<section data-markdown="slides/intro.md"
         data-separator="---"
         data-separator-vertical="--">
</section>

Adding Speaker Notes

Include notes visible only in speaker view:

<section>
  <h2>My Slide</h2>
  <p>Visible content</p>
  <aside class="notes">
    Speaker notes go here - only visible in speaker view (press S)
  </aside>
</section>

Code Highlighting

Show code with syntax highlighting:

<section>
  <pre><code class="language-javascript" data-trim>
    function greet(name) {
      return `Hello, ${name}!`;
    }
  </code></pre>
</section>

Configuration Options

Reveal.initialize Options

Reveal.initialize({
  // Navigation
  controls: true,
  progress: true,
  center: true,
  hash: true,

  // Presentation
  width: 960,
  height: 700,
  margin: 0.1,

  // Transitions
  transition: 'slide', // none, fade, slide, convex, concave, zoom

  // Auto-slide
  autoSlide: 5000, // ms between slides (0 to disable)

  // Plugins
  plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});

Available Themes

Built-in themes include: black, white, league, beige, sky, night, serif, simple, solarized, blood, moon, dracula

<link rel="stylesheet" href="dist/theme/moon.css">

Production Best Practices

Performance Optimization

• Image Optimization: Compress images before including them
• Lazy Loading: Use lazy loading for media-heavy presentations
• CDN: Consider serving static assets from a CDN for global audiences

Accessibility

• Alt Text: Provide alt text for images
• Contrast: Ensure sufficient color contrast
• Keyboard Navigation: Test navigation with keyboard only

Backup Strategy

1. Version Control: Keep all presentation source in Git
2. PDF Export: Generate PDF versions for offline access
3. Asset Backup: Back up media files separately

Troubleshooting Common Issues

Styles Not Loading

Symptoms: Presentation appears unstyled.

Solutions:

• Verify CSS file paths are correct
• Check network tab for 404 errors
• Ensure dist/ folder is properly copied

Markdown Not Rendering

Symptoms: Raw Markdown appears instead of formatted content.

Solutions:

• Ensure Markdown plugin is loaded
• Check data-markdown attribute syntax
• Verify plugin initialization order

Speaker Notes Not Working

Symptoms: Pressing ‘S’ doesn’t open speaker view.

Solutions:

• Ensure notes plugin is loaded
• Check for JavaScript errors
• Verify HTTPS is enabled (required for some features)

Additional Resources

• Official reveal.js Website
• reveal.js GitHub Repository
• Markdown Documentation
• Plugins Documentation
• Klutch.sh Deployments

Conclusion

Deploying reveal.js on Klutch.sh gives you a powerful, self-hosted presentation platform with automatic builds, persistent storage, and secure HTTPS access. The combination of reveal.js’s flexibility and Klutch.sh’s deployment simplicity means you can focus on creating compelling presentations.

With Markdown support, code highlighting, and extensive customization options, reveal.js handles everything from simple slideshows to complex technical presentations. The web-based format means your presentations are always accessible and easy to share.

Whether you’re presenting at conferences, teaching classes, or sharing ideas with your team, reveal.js on Klutch.sh provides the reliable foundation for professional web presentations.