Comment installer RevealJS sur Ubuntu 20.04 / Debian 11 ?

La création de présentations pour des présentations éducatives ou professionnelles a toujours été monopolisée par des outils propriétaires. Cependant, grâce à CSS/HTML, nous avons maintenant d'autres outils plus flexibles. C'est pourquoi, dans cet article, vous apprendrez à installer RevealJS sur Ubuntu 20.04 / Debian 11.

Introduction à RevealJS

Selon le site officiel de RevealJS.

Reveal.js est un framework de présentation HTML open source. C'est un outil qui permet à toute personne disposant d'un navigateur Web de créer gratuitement de superbes présentations complètes.

En bref, avec RevealJS, nous pouvons créer de belles présentations avec la technologie HTML/CSS mais aussi en ajoutant du JavaScript.

Ce cadre est créé avec des technologies ouvertes, donc tout le monde peut l'apprendre. Il inclut également la prise en charge des capacités d'exportation Markdown, LaTeX et PDF.

Enfin, RevealJS a une excellente documentation idéale pour que tout le monde puisse commencer à l'utiliser et créer de belles choses.

Commençons.

Mise à jour du système et installation des dépendances

ouvrez un terminal ou connectez-vous via SSH à votre serveur et mettez-le à jour.

sudo apt update
sudo apt upgrade

Après cela, installez certains packages nécessaires pour terminer le didacticiel.

sudo apt install curl gnupg2 unzip git

Parmi eux se trouve git que nous utiliserons pour obtenir la dernière version stable du framework.

Installer NodeJS sur Ubuntu 20.04 / Debian 11

RevealJS dépend de NodeJS pour fonctionner. Cela signifie que nous devons l'installer. Vous pouvez utiliser le 14.x branche ou une branche plus avancée comme 16.x . Pour cet article, j'utiliserai ce dernier.

Ajoutez le dépôt en question :

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

Et puis installez NodeJS en exécutant la commande suivante

sudo apt install nodejs

Vérifiez ensuite la version installée avec la commande suivante

node -v
v16.14.0

Installer RevealJS sur Ubuntu 20.04 / Debian 11

Pour obtenir la dernière version stable de l'outil, nous devons cloner le référentiel RevealJS.

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

Cela générera un dossier appelé reveal.js auxquels nous devons accéder.

cd reveal.js

À l'intérieur, nous devons RevealJS en exécutant

sudo npm install

Vous obtiendrez une sortie par écran comme celle-ci

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
npm notice 
npm notice New minor version of npm available! 8.3.1 -> 8.5.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.4
npm notice Run npm install -g [email protected] to update!
npm notice 

Pour démarrer l'exécution de RevealJS il suffit de lancer

npm start

Exemple de sortie :

[20:27:01] Server started http://localhost:8000
[20:27:01] LiveReload started on port 35729
[20:27:01] Running server

Maintenant, ouvrez simplement un navigateur Web et visitez http://localhost:8000 pour le tester.

Vous pouvez maintenant commencer à travailler avec cet outil.

Si vous avez installé RevealJS sur un serveur ou une machine virtuelle, vous ne pourrez pas y accéder via localhost. Pour cela, nous devons modifier le ~/reveal.js/gulpfile.js fichier.

nano ~/reveal.js/gulpfile.js

Et modifiez cette ligne

const host = yargs.argv.host || 'localhost'

Remplacez simplement localhost avec l'adresse IP de votre ordinateur.

Enregistrez les modifications et fermez l'éditeur.

Vous pouvez maintenant courir à nouveau

npm start

Pour spécifier un port spécifique, exécutez simplement

npm start --port=1234

Où vous devez remplacer 1234 , avec le port souhaité. Enfin, pour arrêter l'exécution, appuyez sur CTRL + C .

Facultatif :créez un nouveau service Systemd pour gérer RevealJS.

Un bon moyen de gérer RevealJS est d'utiliser un service qui nous permet de le démarrer et de l'arrêter facilement. Pour terminer cela, créez un nouveau service.

sudo nano /lib/systemd/system/reveal.service

et ajoutez ce qui suit

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

Enregistrez les modifications et fermez l'éditeur. Pour appliquer les modifications, exécutez.

sudo systemctl daemon-reload

C'est tout.

Conclusion

RevealJS nous offre la possibilité de créer de nouvelles présentations de manière rapide et très professionnelle en utilisant la puissance des technologies web. L'installer est un bon moyen de commencer.

J'espère que vous avez aimé cet article et appris quelque chose de nouveau. Partagez-le et aidez-nous à grandir.