Creating Presentations Using Gatsby & React

Lately I keep visiting the slides/deck of Guillermo Rauch’s presentation on Next.js. They were coded in Next.js itself and deployed via the command line. Embedding content such as webpages, YouTube videos or syntax-highlighted code snippet just got a whole lot easier than it is in Keynote et al. Also, slides-in-html are great for sharing!

Unfortunately the code for the slides aren’t open-source, and hosting a Node.js server running Next can be expensive. So I decided to create my own solution on top of the static-site generator Gatsby.js. Gatsby follows a lot of the same principles that Next.js introduced to the React-World, such as using a pages directory for routing.

So I set up a starter template to create presentations with Gatsby, called gatsby-starter-deck. It is still a little hacky, but the basic functionalities work. Check out a live example here.

There’s a bunch of features still missing, so it’s more a proof of concept to build upon. You can create your own set of slides with the gatsby-cli:

$ gatsby new slides-name https://github.com/fabe/gatsby-starter-deck
$ cd slides-name
$ gatsby develop

Then edit and extend your slides inside the src/pages directory. Navigate with the arrow keys :sparkles:

I’ll probably use it for some small presentations at university to see how it goes. It’ll be good to have a system in place ready to fill with content, rather than spending hours choosing a typeface. That’s what I normally do.