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.
- familiarity with Git for local and remote work
- basic HTML and text editing skills
- basic CSS understanding and skills
- Markdown Language
Install Node Js from Here
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
cd reveal.js && npm install
npm will install all the required packages for the reveal js.
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
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
Go to console and Click on Add a Project
Add your project name.
This Step is Optional You can Enable Google Analytics for your firebase if you want.
Hurray! Our Project is Created let's have some hands-on on CMD.
First, we need to move our Reveal Js Files into a public folder.
Moving all files in Public folder:
First, we need to login into firebase from the command line. Type in the following command.
Step 7 :
Initialized a Firebase project
To initialize the firebase project you have to enter the command
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
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
Let's check using the hosting URL
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