RevealJS And DesktopServer Suzette Franck

Presenting at WordCamps Using DesktopServer and Reveal.js

Having presented at countless WordCamps and WordPress Meetups, one thing remains consistent:  the internet service can be less than reliable. To ease my presenter nerves and have peace of mind, I find it is best to be properly prepared. While I make sure everything is backed up online (usually I have found that presenting from a local computer is the best way to have a smooth and awesome WordCamp session.No WiFi

This tutorial will show you how you can quickly setup a WordCamp presentation from editing a single HTML file using DesktopServer to create a new reveal.js instance. You will need a text editor such as Sublime Text 2 and a modern browser such as Chrome as well as well as some basic HTML knowledge.

The beauty of this framework is that it is simply edited by one large index.html file and it includes many inbuilt features such as code syntax highlighting, zoom, speaker view, the ability to print pdfs, multiple themes, transitions, and built-in classes. It works great out of the box as is, or you can totally geek out and modify it with JavaScript, Sass and Grunt until your heart is content.

Step One: Install DesktopServer

If you have not done so already, you will need to download and install the free version of DesktopServer Limited which will be sufficient for this tutorial. This assumes you meet all of the requirements and that the software will not conflict with other web software on your system.

Click the orange Try/Buy in the upper right corner of the page, download the appropriate version and install ServerPress. Detailed installation instructions and troubleshooting may be found here:

Try Buy DesktopServer

Step Two: Clone or Download the Reveal.js HTML Presentation Framework from GitHub

Next you are going to clone or download the reveal.js presentation framework to your special “Blueprints” folder in DesktopServer. This will allow you to create a new presentation site quickly and effortlessly.

clone from github

When prompted, you will want to save or clone this file to your Blueprints folder. You will find your Blueprints folder under:

  • Applications/XAMPP/blueprints on Mac or
  • c:\xampplite\blueprints on a PC.

This unique folder allows you to create a template or Blueprint for your site by simply copying either the zip directly or the unzipped folder. More information on using blueprints with Desktop Server may be found at:

Step Three: Launch Desktop Server and Create a New Site

After you have installed DesktopServer and cloned (or saved) the reveal.js to your Blueprints folder, you will need to launch DesktopServer from your computer.

  • Click on the icon: you will be prompted to restart as a computer administrator, you will need to enter your password.
    • This is necessary to create entries in your hosts file, to create the URL for use in your browser.
    • You will be prompted for your password and the application will restart.
  • The next screen will ask if you would like to start Apache and MySQL services, select yes and then click the NEXT button:

apache desktopserver

A dialog box will appear to confirm that the services have been successfully started; click on the Next button.

You will be presented with the following options (see screenshot.) Select “Create a new development website.” and click the Next button.

apache desktopserver

Type a fictional domain name for your website, such as “word camp.” This is how you will access your site through the browser, along with the fictional .dev TLD. It’s best to keep the name short, with no spaces or special characters, and without the www. In my example, I will call it “”

Now, from the Blueprint field, select (or whatever name you assigned when you copied to your Blueprints folder.) Then, for Site Root or location, you may accept the default or customize the location.

root location

Step Four: View Presentation in Your Browser

Once completed, you will be presented with a link. Open in your favorite modern browser and you should see the beginning of the default presentation. To navigate, you may use the arrow keys on the keyboard or click on the direction key on the bottom right of the presentation.

Before editing your slideshow, you should go through the entire default reveal.js presentation to see the demonstration of what can be done with Reveal.js, it should take 10-15 minutes.

Step Five: Edit and Add Content to Your Presentation

**I highly recommend adding content before modifying the design. The default styles actually work great without any modifications, but you can change the theme or customize the JavaScript and CSS by editing the code, which I will cover shortly.

So you are now ready to start adding your content to your slideshow! If you are not used to working with a text editor, I highly recommend you download Sublime Text 2. You can then drop the folder onto the Sublime Text 2 editor window to open the folder as a project, so you can see all the files.

Select the index.html file and navigate to the <section> tags. All edits to content will be made between those <section> tags. See the comments in the html file about where to edit. Save the index.html file and load it in your browser, and don’t forget to bookmark the url for your WordCamp presentation.

sublime text 2

Step Six: Give Your Awesome WordCamp Presentation

When you get ready to present, run DesktopServer and make sure Apache services are started Visit your fictional “” in the browser to begin. You can feel confident that you will be able to present locally from your browser without worry of the internet going down. You may control the slideshow with a standard presentation clicker, keyboard, swipe, or mouse-click.

Step Seven: Archive Your Presentation Publicly after Your Talk

Up until now, everything has been local, but WordCamp attendees will most likely want to reference and review your slides later. You have several options for making your slides public. The easiest and best way is to create a new public repository on GitHub. If you create a branch from your master branch named, “gh-pages” you will be able to view the slideshow from your browser, where the url is (replacing your GitHub username and the repo name.)

slidesho screenshot

Step Eight: Enjoy Being Brilliant!

Presenting at a WordCamp or WordPress Meetup doesn’t have to be a nerve-wracking experience. With a little ingenuity, and a few free online tools, you can woo your audience by presenting a really nice slideshow from within a local WordPress install. While your audience members are lamenting about the slow wi-fi speed, and your colleagues who have hosted their slides online somewhere are fretting over dropped connections, you can breeze through your presentation without the added stress of stressed out internet signals!

Suzette Franck

Introducing Suzette Franck

Many readers already know Suzette, but if you don’t please give her a warm welcome!  Suzette is a DesktopServer pro and we’ve asked her to help us get our content calendar up and running. She will be be publishing a How To type post, on our blog, every couple of weeks. Please feel free to leave any questions or comments for Suzette below this article. She’ll be checking in regularly!

If you have suggestions for any future articles you’d like to read, please shoot us a message via our Contact Us form. We are looking forward to getting more useful content out on a regular basis so don’t be shy in asking for specific content!


Leave a Reply

Your email address will not be published. Required fields are marked *