How to host a reveal.js presentation

Question

I'm new to all this web development things (I only know to do things in local). I did a presentation using reveal.js and I would like to be able to see it online (on my phone for example). I know that I should host it but I don't really know how to do it. I try to do it using slide (the online editor of reveal.js), but I can't add script and this kind of stuff (I'm using highcharts inside my presentation). If you could give me some advice, procedures it will be nice.

Ontina

Have you looked at using something like github pages (free)? There's a tutorial at cynng.wordpress.com/2014/10/08/… – Upsydaisy

Can you develop an answer I will validate it – Ontina

Answer 1

1. Create a new repository on GitHub

2. Let’s call it reveal_HelloWorld

3. Clone it on your local machine:

   git clone [email protected]:yourusername/reveal_HelloWorld.git
   

4. Clone reveal.js on your local machine:

   git clone [email protected]:hakimel/reveal.js.git
   

5. Move the content of reveal.js folder into the reveal_HelloWorld folder

6. Modify the index.html file

7. Create and switch to a new branch

   git checkout -b 'gh-pages'
   

8. Push

   git push
   

9. From the GitHub website repo settings:

   1. Set the ‘gh-pages’ branch as default
   2. Delete the ‘master’ branch

You are done.

The slides are published at yourusername.github.io/reveal_HelloWorld.

Source: How to deploy Reveal.js presentations on Github

Screencast: https://vimeo.com/241196662

Credit: Angelo Basile

Owings

What if you want the presentation to be called something else that "index.html"? – Mopup

@Mopup in my index.html I have a <title>My Title</title> section. If you set this, the title will be displayed in the browser tab. If that's not what you mean and you just want to change the filename - I'm pretty sure you can do that and navigate to the file normally (or redirect to it from index.html) – Volumetric

Worth noting: This answer's basic idea also works on normal webservers (that are not by github). Simply copy the reveal.js folder and the presentation file(s) onto the server and it works. If it worked locally but not online, perhaps the importing paths in index.html are wrong. E.g. I had locally used /dist but had to use a relative path online because the server root was no longer where the file was. – Volumetric

I have seen presentations in reveal hanging in github which are not accompanied by the reveal.js folder... I wonder how? – Unskilled

Probably loading the reveal.js dependencies via CDN url. – Owings

Answer 2

Bruno's answer is very good as a one-off solution. But, if a user wants to host several presentations in GitHub Pages, then they would need to repeat the procedure every time. Another approach is to use one GitHub repository for multiple presentations.

Here are the steps:

1. Create a clean repository in GitHub (without README etc.), say presentations

2. Initialise the git repo and link to GitHub, in Linux that would be

   mkdir presentations
   cd presentations
   git init
   git remote add origin [email protected]:username/presentations.git
   

3. Add reveal.js as "remote" and pull the repository

   git remote add upstream [email protected]:hakimel/reveal.js.git
   git pull upstream master
   

4. Create an empty branch for your presentation and clean the working directory

   git checkout --orphan my-fancy-presentation
   git reset --hard
   

5. Copy presentation to current folder and commit your changes

   cp path/to/my_fancy_presentation.html .
   git add .
   git commit -m 'Initial commit'
   

6. Switch to master and merge your presentations there

   git checkout master
   git merge my-fancy-presentation
   

7. Push all branches to GitHub

   git push --all origin
   

8. Set up GitHub Pages to branch master and enjoy your presentation at https://username.github.io/presentations/my_fancy_presentation.html

Now, whenever you want to add another presentation, you just need to repeat steps 4-7. Besides, whenever you want to update reveal.js, you can simply do git pull upstream master.

As an example of this approach, see https://github.com/dougmvieira/presentations.

Solenne

Do we need to add all reveal.js folder with samples and stuff, or just the js folder? – Unskilled

I tried this approach, but I’m only getting a blank presentation page when opening it. Do you have any tips? – Requite

Answer 3

Nowadays (October, 2016) you don't need to create a specific branch (gh-pages) anymore. Create your repo then select 'Settings -> Options'. There is a 'GitHub Pages' panel where you can set any branch to be published as web pages.

Triacid