15

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
mel
  • 2,730
  • 8
  • 35
  • 70
  • 1
    Have you looked at using something like github pages (free)? There's a tutorial at https://cynng.wordpress.com/2014/10/08/using-reveal-js-on-github-pages-for-your-presentations/ – Paul Oliver Sep 03 '15 at 01:52
  • Can you develop an answer I will validate it – mel Dec 27 '15 at 17:48

3 Answers3

26

  1. Create a new repository on GitHub

  2. Let’s call it reveal_HelloWorld

  3. Clone it on your local machine:

    git clone git@github.com:yourusername/reveal_HelloWorld.git

  4. Clone reveal.js on your local machine:

    git clone git@github.com: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

Neil P.
  • 1,026
  • 2
  • 15
  • 32
Bruno Paulino
  • 5,611
  • 1
  • 41
  • 40
  • 1
    What if you want the presentation to be called something else that "index.html"? – HelloGoodbye Jul 07 '17 at 21:12
  • @HelloGoodbye in my `index.html` I have a `My 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) – lucidbrot Nov 11 '20 at 08:14
  • 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. – lucidbrot Nov 11 '20 at 08:16
  • I have seen presentations in reveal hanging in github which are not accompanied by the reveal.js folder... I wonder how? – Emmanuel Goldstein May 28 '21 at 11:09
  • Probably loading the reveal.js dependencies via CDN url. – Bruno Paulino Jun 01 '21 at 14:55
15

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.

Gustavo Coelho
  • 960
  • 8
  • 6
13

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 git@github.com:username/presentations.git

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

    git remote add upstream git@github.com: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.

Douglas Vieira
  • 183
  • 1
  • 7