reveal.js is a free and open-source HTML presentation framework. It allows users to create a simple and beautiful presentation via a web browser. You’ll need a browser with support for CSS 3D transforms to see it in its full glory. With reveal.js, you can create a presentation that supports mobile gestures, such as pinch and slide.
In this post, we will show you how to install reveal.js with Nginx on Arch Linux.
Step 1 – Configure Repository
By default, the default repository is outdated in Arch Linux, so you will need to modify the default mirror list. You can do it by editing the mirror list configuration file:
nano /etc/pacman.d/mirrorlist
Remove all lines and add the following lines:
## Score: 0.7, United States Server = http://mirror.us.leaseweb.net/archlinux/$repo/os/$arch ## Score: 0.8, United States Server = http://lug.mtu.edu/archlinux/$repo/os/$arch Server = http://mirror.nl.leaseweb.net/archlinux/$repo/os/$arch ## Score: 0.9, United Kingdom Server = http://mirror.bytemark.co.uk/archlinux/$repo/os/$arch ## Score: 1.5, United Kingdom Server = http://mirrors.manchester.m247.com/arch-linux/$repo/os/$arch Server = http://archlinux.dcc.fc.up.pt/$repo/os/$arch ## Score: 6.6, United States Server = http://mirror.cs.pitt.edu/archlinux/$repo/os/$arch ## Score: 6.7, United States Server = http://mirrors.acm.wpi.edu/archlinux/$repo/os/$arch ## Score: 6.8, United States Server = http://ftp.osuosl.org/pub/archlinux/$repo/os/$arch ## Score: 7.1, India Server = http://mirror.cse.iitk.ac.in/archlinux/$repo/os/$arch ## Score: 10.1, United States Server = http://mirrors.xmission.com/archlinux/$repo/os/$arch
Save and close the file, then update all the package indexes with the following command:
pacman -Syu
Step 2 – Install Node.js and NPM
Before starting, you will need to install Node.js and NPM packages on your server. You can install both packages with the following command:
pacman -S nodejs npm
Once both packages are installed, you can verify the Node.js version with the following command.
node --version
You should see the following output.
v19.8.1
Step 3 – Install reveal.js
First, install the Git package using the following command.
pacman -S git
Next, download the latest version of reveal.js with the following command.
git clone https://github.com/hakimel/reveal.js.git
Once the download is completed, navigate to the reveal.js directory and install all the required dependencies using the following command.
cd reveal.js npm install
You can now run reveal.js with the following command.
npm start
If everything is fine, you will get the following output.
> [email protected] start > gulp serve [13:33:30] Using gulpfile ~/reveal.js/gulpfile.js [13:33:30] Starting 'serve'... [13:33:30] Starting server... [13:33:30] Server started http://localhost:8000 [13:33:30] LiveReload started on port 35729 [13:33:30] Running server
Press the CTRL+C to stop the application.
Step 4 – Create a Systemd Service File for reveal.js
It is recommended to create a systemd file to manage reveal.js. 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
Save and close the file, then reload the system to apply the changes.
systemctl daemon-reload
Next, start and enable the reveal.js service.
systemctl start reveal.service systemctl enable reveal.service
To check the service status, run the following command.
systemctl status reveal.service
You will get the following output.
● reveal.service
Loaded: loaded (/usr/lib/systemd/system/reveal.service; static)
Active: active (running) since Sat 2023-03-25 13:35:33 UTC; 35s ago
Main PID: 7113 (npm start)
Tasks: 22 (limit: 4685)
Memory: 259.6M
CPU: 15.621s
CGroup: /system.slice/reveal.service
├─7113 "npm start"
└─7124 "gulp serve"
Mar 25 13:35:33 archlinux systemd[1]: Started reveal.service.
Mar 25 13:35:34 archlinux npm[7113]: > [email protected] start
Mar 25 13:35:34 archlinux npm[7113]: > gulp serve
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] Using gulpfile ~/reveal.js/gulpfile.js
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] Starting 'serve'...
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] Starting server...
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] Server started http://localhost:8000
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] LiveReload started on port 35729
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] Running serve
Step 5 – Configure Nginx as a Reverse Proxy
First, install the Nginx package with the following command.
pacman -S nginx-mainline
Next, start and enable the Nginx service with the following command.
systemctl start nginx systemctl enable nginx
Next, create a directory to store the Nginx virtual host.
mkdir /etc/nginx/sites-enabled
Next, create an Nginx configuration file for reveal.js.
nano /etc/nginx/sites-enabled/reveal.conf
Add the following configuration.
upstream reveal_backend {
server localhost:8000;
}
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 the file, then edit the Nginx main configuration file.
nano /etc/nginx/nginx.conf
Add the following lines after http{:
server_names_hash_bucket_size 64; include sites-enabled/*;
Save the file, then verify the Nginx configuration using the following command.
nginx -t
You will get the following output.
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
Finally, restart the Nginx service to apply the changes.
systemctl restart nginx
Step 6 – Access reveal.js Web UI
Now, open your web browser and access the reveal.js web interface using the URL http://reveal.example.com. You should see the reveal default slide on the following screen.
Conclusion
In this post, we explained how to install reveal.js on Arch Linux. We also showed you how to configure Nginx as a reverse proxy for reveal.js. You now try to deploy reveal.js on dedicated server hosting from Atlantic.Net!
