How to Install Reveal.js on Ubuntu 20.04 and Create a Simple Presentation

reveal.js is a free and open-source HTML framework that can be used to create fully-featured presentations through a web browser. It is built on open web technologies. It has a rich set of features including, Markdown content, nested slides, PDF export, and JavaScript APIs for controlling the slide navigation.

In this tutorial, we will show you how to install Reveal.js on Ubuntu 20.04.

Prerequisites

• An Ubuntu 20.04 VPS (we’ll be using our SSD 2 VPS plan)
• Access to the root user account (or access to an admin account with root privileges)

Step 1: Log in to the Server & Update the Server OS Packages

First, log in to your Ubuntu 20.04 server via SSH as the root user:

ssh root@IP_Address -p Port_number

You will need to replace ‘IP_Address‘ and ‘Port_number‘ with your server’s respective IP address and SSH port number. Additionally, replace ‘root’ with the username of the admin account if necessary.

Before starting, you have to make sure that all Ubuntu OS packages installed on the server are up to date. You can do this by running the following commands:

apt-get update -y
apt-get upgrade -y

Step 2: Install Node.js

Reveal.js is built on Node.js. So you will need to install Node.js in your server. By default, the latest version of Node.js is not available in the Ubuntu 20.04 default repository. So you will need to add the Node.js official repository to your system.

First, install all the required dependencies with the following command:

apt-get install curl gnupg2 unzip git  -y

Once all the dependencies are installed, add the Node.js repository with the following command:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

Next, install Node.js by running the following command:

apt-get install nodejs -y

Once Node.js is installed, you can verify the Node.js version with the following command:

node -v

You should get the following output:

v14.15.0

Step 3: Install Reveal.js

First, download the latest version of Reveal.js from the Git repository using the following command:

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

Once the download is completed, change the directory to reveal.js and install all dependencies with the following command:

cd reveal.js
npm install

Once all the dependencies are installed, start the Node server with the following command:

npm start

You should get the following output:

> reveal.js@4.1.0 start /root/reveal.js
> gulp serve

[10:01:50] Using gulpfile ~/reveal.js/gulpfile.js
[10:01:50] Starting 'serve'...
[10:01:50] Starting server...
[10:01:50] Server started http://0.0.0.0:8000
[10:01:50] LiveReload started on port 35729
[10:01:50] Running server

At this point, your development server is started and listening on port 8000.

Now, press CTRL+C to stop the running server.

Step 4: Create a Systemd Service File for Reveal.js

Next, you will need to create a systemd service file to manage the Reveal.js service. You can create it with the following command:

nano /lib/systemd/system/reveal.service

Add the following lines:

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/root/reveal.js
ExecStart=npm start -- --port=8001

Save and close the file then reload the systemd service with the following command:

systemctl daemon-reload

Next, start the Reveal.js service and enable it to start at system reboot with the following command:

systemctl start reveal
systemctl enable reveal

You can also verify the status of the service with the following command:

systemctl status reveal

You should get the following output:

● reveal.service
     Loaded: loaded (/lib/systemd/system/reveal.service; static; vendor preset: enabled)
     Active: active (running) since Sun 2020-11-15 10:05:47 UTC; 4s ago
   Main PID: 3912 (node)
      Tasks: 23 (limit: 2353)
     Memory: 89.1M
     CGroup: /system.slice/reveal.service
             ├─3912 npm
             ├─3938 sh -c gulp serve
             └─3939 gulp serve

Nov 15 10:05:47 ubuntu2004 systemd[1]: Started reveal.service.
Nov 15 10:05:47 ubuntu2004 npm[3912]: > reveal.js@4.1.0 start /root/reveal.js
Nov 15 10:05:47 ubuntu2004 npm[3912]: > gulp serve
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] Using gulpfile ~/reveal.js/gulpfile.js
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] Starting 'serve'...
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] Starting server...
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] Server started http://0.0.0.0:8001
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] LiveReload started on port 35729
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] Running server

Step 5: Configure Nginx as a Reverse Proxy

At this point, your Reveal.js server is started and listening on port 8001. Next, you will need to configure Nginx as a reverse proxy to access the Reveal.js through port 80.

First, install the Nginx web server with the following command:

apt-get install nginx -y

Once installed, create a new Nginx virtual host configuration file:

nano /etc/nginx/conf.d/reveal.conf

Add the following lines:

upstream reveal_backend {
  server 127.0.0.1:8001;
}

server {
    listen 80;
    server_name reveal.example.com;

    location / {
        proxy_pass http://reveal_backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;

        proxy_redirect off;
    }
}

Save and close the file then restart the Nginx service to apply the changes:

systemctl restart nginx

Step 6: Access Reveal.js

Now, open your web browser and access the Reveal.js web interface using the URL http://reveal.example.com. You should see the Reveal.js default presentation in the following screen:

Step 7: Create a Simple Presentation

In this section, we will create a simple presentation with Reveal.js.

First, edit the Reveal.js default index.html file:

nano /root/reveal.js/index.html

Remove the default … and add the following lines:

<section> 
<h1>Welcome to Reveal.js Demo</h1> 
</section> 
<section> 
<h1>About Author</h1>
<ul> 
<li>10 years experience</li> 
</ul> 
</section>
<section> 
<h1>reveal.js</h1> 
<ul> 
<li>open source</li> 
</ul> 
</section>

Save and close the file then restart the Reveal.js service to apply the changes:

systemctl restart reveal

Now, open your web browser and access the Reveal.js suing the URL http://reveal.example.com. You should see your new presentation in the following screen:

 

Click on the > button to move to the next slide. You should see the following screen:

Of course, you don’t have to do any of this if you use one of our Linux VPS Hosting services, in which case you can simply ask our expert Linux admins to setup this for you. They are

available 24×7 and will take care of your request immediately.

PS. If you liked this post please share it with your friends on the social networks using the buttons on the left or simply leave a reply below. Thanks.