Getting Started with Reveal Js: Create Web-based presentation with Reveal Js, Git and deploying on firebase

In this blog, we will learn how to Installed Reveal js Presentation and deploy the Presentation on Firebase which provides free hosting. In this blog, we will focus on the installation and deployment process. In the next blog, we will more focus on creating custom Presentations so you can follow me up to get updates.

Prerequisites

• familiarity with Git for local and remote work
• basic HTML and text editing skills
• basic CSS understanding and skills
• Markdown Language

How To

Step 1:

Install Node Js from Here

Step 2:

Download the Reveal js from Here or you can also use git to clone Reveal Js.

You can learn Git and Github from this blog

You can also learn Git and Github from my RevealJs based HTML presentation.

git clone https://github.com/hakimel/reveal.js.git

Step 3:

cd reveal.js && npm install

npm will install all the required packages for the reveal js.

Step 4:

npm start

open http://localhost:8000 to check your demo presentation.

incase your port is in use so go to the reveal.js folder and then edit gulpfile.js and change the port 8000 to 3000

After changing port our presentation is live on localhost

Let's Deploy this to Firebase

Step 0:

Once you’ve installed NodeJs, you can install the Firebase CLI using npm (the Node Package Manager) by running the following command:

npm install -g firebase-tools

After this, Go to Firebase official Website and Login to your Account

Step 1:

Go to console and Click on Add a Project

Step 2:

Add your project name.

Step 3:

This Step is Optional You can Enable Google Analytics for your firebase if you want.

Step 4:

Hurray! Our Project is Created let's have some hands-on on CMD.

Step 5:

First, we need to move our Reveal Js Files into a public folder.

After:

Moving all files in Public folder:

Step 6:

First, we need to login into firebase from the command line. Type in the following command.

firebase login

Step 7 :

Initialized a Firebase project

To initialize the firebase project you have to enter the command

firebase init

Enter Yes or Y to proceed.

You need to select the Hosting by Pressing Space Button and press Enter.

Select the Use an existing project

Press Enter because we were already Done this step.

Type in N or No

Also, type No for GitHub if not required.

Also, Type the No for Overwrite Index.HTML file.

Lets test before Deploy

Before deploying on Firebase lets check on localhost by following the command

firebase serve

Hurray! Website is Working on Local Host

Let's Deploy on Firebase

we finally test our Presentation website on a Localhost now its time to deploy on firebase with the following command

firebase deploy

Let's check using the hosting URL

Conclusion

This is the first part of the blog where we install Reveal js and also Deploy on Firebase. In the Next Blog, we will learn how to create a custom Presentation with a complete Explanation. Before Starting Second Blog Please read my MarkDown Wiki