Reveal.js est un framework HTML gratuit et open-source qui peut être utilisé pour créer des présentations complètes via un navigateur Web. Il est construit sur des technologies Web ouvertes. Il dispose d'un riche ensemble de fonctionnalités, notamment le contenu Markdown, les diapositives imbriquées, l'exportation PDF et les API JavaScript pour contrôler la navigation des diapositives.
Dans ce tutoriel, nous allons vous montrer comment installer Reveal.js sur Ubuntu 20.04.
Prérequis
- Un VPS Ubuntu 20.04 (nous utiliserons notre plan SSD 2 VPS)
- Accès au compte utilisateur root (ou accès à un compte administrateur avec privilèges root)
Étape 1 :Connectez-vous au serveur et mettez à jour les packages du système d'exploitation du serveur
Tout d'abord, connectez-vous à votre serveur Ubuntu 20.04 via SSH en tant qu'utilisateur root :
ssh root@IP_Address -p Port_number
Vous devrez remplacer 'IP_Address' et 'Port_number' par l'adresse IP et le numéro de port SSH respectifs de votre serveur. De plus, remplacez "root" par le nom d'utilisateur du compte administrateur si nécessaire.
Avant de commencer, vous devez vous assurer que tous les packages du système d'exploitation Ubuntu installés sur le serveur sont à jour. Vous pouvez le faire en exécutant les commandes suivantes :
apt-get update -y apt-get upgrade -y
Étape 2 :Installer Node.js
Reveal.js est construit sur Node.js. Vous devrez donc installer Node.js sur votre serveur. Par défaut, la dernière version de Node.js n'est pas disponible dans le référentiel par défaut d'Ubuntu 20.04. Vous devrez donc ajouter le référentiel officiel Node.js à votre système.
Tout d'abord, installez toutes les dépendances requises avec la commande suivante :
apt-get install curl gnupg2 unzip git -y
Une fois toutes les dépendances installées, ajoutez le dépôt Node.js avec la commande suivante :
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Ensuite, installez Node.js en exécutant la commande suivante :
apt-get install nodejs -y
Une fois Node.js installé, vous pouvez vérifier la version de Node.js avec la commande suivante :
node -v
Vous devriez obtenir le résultat suivant :
v14.15.0
Étape 3 :Installer Reveal.js
Tout d'abord, téléchargez la dernière version de Reveal.js depuis le dépôt Git à l'aide de la commande suivante :
git clone git clone https://github.com/hakimel/reveal.js.git
Une fois le téléchargement terminé, changez le répertoire en révélation.js et installez toutes les dépendances avec la commande suivante :
cd reveal.js npm install
Une fois toutes les dépendances installées, démarrez le serveur Node avec la commande suivante :
npm start
Vous devriez obtenir le résultat suivant :
> [email protected] 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
À ce stade, votre serveur de développement est démarré et écoute sur le port 8000.
Maintenant, appuyez sur CTRL+C pour arrêter le serveur en cours d'exécution.
Étape 4 :Créer un fichier de service Systemd pour Reveal.js
Ensuite, vous devrez créer un fichier de service systemd pour gérer le service Reveal.js. Vous pouvez le créer avec la commande suivante :
nano /lib/systemd/system/reveal.service
Ajoutez les lignes suivantes :
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/reveal.js ExecStart=npm start -- --port=8001
Enregistrez et fermez le fichier puis rechargez le service systemd avec la commande suivante :
systemctl daemon-reload
Ensuite, démarrez le service Reveal.js et activez-le au redémarrage du système avec la commande suivante :
systemctl start reveal systemctl enable reveal
Vous pouvez également vérifier l'état du service avec la commande suivante :
systemctl status reveal
Vous devriez obtenir le résultat suivant :
● 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]: > [email protected] 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
Étape 5 :Configurer Nginx en tant que proxy inverse
À ce stade, votre serveur Reveal.js est démarré et écoute sur le port 8001. Ensuite, vous devrez configurer Nginx en tant que proxy inverse pour accéder à Reveal.js via le port 80.
Tout d'abord, installez le serveur Web Nginx avec la commande suivante :
apt-get install nginx -y
Une fois installé, créez un nouveau fichier de configuration d'hôte virtuel Nginx :
nano /etc/nginx/conf.d/reveal.conf
Ajoutez les lignes suivantes :
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;
}
}
Enregistrez et fermez le fichier puis redémarrez le service Nginx pour appliquer les modifications :
systemctl restart nginx
Étape 6 :Accéder à Reveal.js
Maintenant, ouvrez votre navigateur Web et accédez à l'interface Web Reveal.js en utilisant l'URL http://reveal.example.com . Vous devriez voir la présentation par défaut de Reveal.js dans l'écran suivant :
Étape 7 :créer une présentation simple
Dans cette section, nous allons créer une présentation simple avec Reveal.js.
Tout d'abord, modifiez le fichier index.html par défaut de Reveal.js :
nano /root/reveal.js/index.html
Supprimez la valeur par défaut… et ajoutez les lignes suivantes :
<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
Maintenant, ouvrez votre navigateur Web et accédez à Reveal.js en utilisant l'URL http://reveal.example.com . Vous devriez voir votre nouvelle présentation dans l'écran suivant :
Cliquez sur le > bouton pour passer à la diapositive suivante. Vous devriez voir l'écran suivant :
Bien sûr, vous n'avez rien à faire si vous utilisez l'un de nos services d'hébergement VPS Linux, auquel cas vous pouvez simplement demander à nos administrateurs Linux experts de le configurer pour vous. Ils sont
disponible 24h/24 et 7j/7 et s'occupera de votre demande immédiatement.
PS. Si vous avez aimé cet article, partagez-le avec vos amis sur les réseaux sociaux en utilisant les boutons à gauche ou laissez simplement une réponse ci-dessous. Merci.