You can use reveal.js presentations alongside your Hugo site using the Docsy theme. They serve different purposes and can coexist smoothly with a bit of setup:
✅ What is reveal.js?#
reveal.js is a JavaScript framework for building slide decks (HTML-based presentations). It’s independent of Hugo or Docsy but can be integrated as a standalone layout or content type within your Hugo site.
✅ Integration Approaches#
🔹 Option 1: Static Integration (Recommended)#
Use reveal.js by directly including its assets and creating a custom Hugo layout for presentations.
📁 1. Add reveal.js assets#
Download or npm-install reveal.js, and copy its dist folder to your Hugo project:
your-hugo-site/
└── static/
└── revealjs/
├── reveal.js
├── css/
├── js/
└── plugin/
Or link to CDN versions (e.g. via unpkg) to save size.
📄 2. Create a presentation page#
In content/presentations/my-talk.md:
---
title: "My Reveal.js Talk"
layout: "reveal"
---
<section>
<h2>Welcome</h2>
<p>This is a slide</p>
</section>
<section>
<h2>Another Slide</h2>
</section>
🧱 3. Create a custom layout#
In layouts/_default/reveal.html:
<!DOCTYPE html>
<html>
<head>
<title>{\{ .Title }\}</title>
<link rel="stylesheet" href="/revealjs/dist/reveal.css">
<link rel="stylesheet" href="/revealjs/dist/theme/black.css">
</head>
<body>
<div class="reveal">
<div class="slides">
{\{ .Content | safeHTML }\}
</div>
</div>
<script src="/revealjs/dist/reveal.js"></script>
<script>
Reveal.initialize();
</script>
</body>
</html>
Then navigate to /presentations/my-talk/ to view it!
🔹 Option 2: Use a Hugo Module for Reveal.js#
Some Hugo themes/modules offer reveal.js support. You could import such a module alongside Docsy via config/_default/module.toml, but it’s usually overkill unless you’re doing lots of slides.
🔹 Option 3: Use shortcodes to embed Reveal sections#
You could create shortcodes for slides and use them inside normal Docsy pages — helpful for interactive guides or embedded decks.
🧠 Can You Mix Docsy and Reveal.js?#
Yes — Docsy handles your main site layout, navigation, etc. You:
- Use reveal.js in a dedicated section/layout
- Avoid letting Docsy style or interfere with presentation pages
- Add navigation back to your Docsy site in the presentation if needed
✅ Summary#
| Task | Tool |
|---|---|
| Site structure, docs, layout | Docsy (Hugo theme) |
| Presentation slides | reveal.js (JS presentation framework) |
| Integration method | Custom layout or CDN assets |
Would you like a working example with both Docsy and Reveal.js in a sample Hugo project?
Comments: