revelar.js es un marco HTML gratuito y de código abierto que se puede usar para crear presentaciones con todas las funciones a través de un navegador web. Está construido sobre tecnologías web abiertas. Tiene un amplio conjunto de características que incluyen contenido de Markdown, diapositivas anidadas, exportación de PDF y API de JavaScript para controlar la navegación de diapositivas.
En este tutorial, le mostraremos cómo instalar Reveal.js en Ubuntu 20.04.
Requisitos
- Un Ubuntu 20.04 VPS (usaremos nuestro plan SSD 2 VPS)
- Acceso a la cuenta de usuario root (o acceso a una cuenta de administrador con privilegios de root)
Paso 1:Inicie sesión en el servidor y actualice los paquetes del sistema operativo del servidor
Primero, inicie sesión en su servidor Ubuntu 20.04 a través de SSH como usuario raíz:
ssh root@IP_Address -p Port_number
Deberá reemplazar 'IP_Address' y 'Port_number' con la dirección IP y el número de puerto SSH respectivos de su servidor. Además, reemplace "root" con el nombre de usuario de la cuenta de administrador si es necesario.
Antes de comenzar, debe asegurarse de que todos los paquetes del sistema operativo Ubuntu instalados en el servidor estén actualizados. Puede hacerlo ejecutando los siguientes comandos:
apt-get update -y apt-get upgrade -y
Paso 2:Instalar Node.js
Reveal.js se basa en Node.js. Por lo tanto, deberá instalar Node.js en su servidor. De forma predeterminada, la última versión de Node.js no está disponible en el repositorio predeterminado de Ubuntu 20.04. Por lo tanto, deberá agregar el repositorio oficial de Node.js a su sistema.
Primero, instala todas las dependencias requeridas con el siguiente comando:
apt-get install curl gnupg2 unzip git -y
Una vez que todas las dependencias estén instaladas, agregue el repositorio de Node.js con el siguiente comando:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
A continuación, instale Node.js ejecutando el siguiente comando:
apt-get install nodejs -y
Una vez instalado Node.js, puede verificar la versión de Node.js con el siguiente comando:
node -v
Deberías obtener el siguiente resultado:
v14.15.0
Paso 3:Instalar Reveal.js
Primero, descargue la última versión de Reveal.js del repositorio de Git usando el siguiente comando:
git clone git clone https://github.com/hakimel/reveal.js.git
Una vez que se complete la descarga, cambie el directorio a revelar.js e instale todas las dependencias con el siguiente comando:
cd reveal.js npm install
Una vez que todas las dependencias estén instaladas, inicie el servidor Node con el siguiente comando:
npm start
Deberías obtener el siguiente resultado:
> [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
En este punto, su servidor de desarrollo se inicia y escucha en el puerto 8000.
Ahora, presione CTRL+C para detener el servidor en ejecución.
Paso 4:Cree un archivo de servicio de Systemd para Reveal.js
A continuación, deberá crear un archivo de servicio systemd para administrar el servicio Reveal.js. Puedes crearlo con el siguiente comando:
nano /lib/systemd/system/reveal.service
Agregue las siguientes líneas:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/reveal.js ExecStart=npm start -- --port=8001
Guarde y cierre el archivo, luego vuelva a cargar el servicio systemd con el siguiente comando:
systemctl daemon-reload
A continuación, inicie el servicio Reveal.js y habilítelo para que se inicie al reiniciar el sistema con el siguiente comando:
systemctl start reveal systemctl enable reveal
También puede verificar el estado del servicio con el siguiente comando:
systemctl status reveal
Deberías obtener el siguiente resultado:
● 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
Paso 5:configurar Nginx como proxy inverso
En este punto, su servidor Reveal.js se inicia y escucha en el puerto 8001. A continuación, deberá configurar Nginx como un proxy inverso para acceder a Reveal.js a través del puerto 80.
Primero, instale el servidor web Nginx con el siguiente comando:
apt-get install nginx -y
Una vez instalado, cree un nuevo archivo de configuración de host virtual Nginx:
nano /etc/nginx/conf.d/reveal.conf
Agregue las siguientes líneas:
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;
}
}
Guarde y cierre el archivo, luego reinicie el servicio Nginx para aplicar los cambios:
systemctl restart nginx
Paso 6:Acceda a Reveal.js
Ahora, abra su navegador web y acceda a la interfaz web de Reveal.js usando la URL http://reveal.example.com . Debería ver la presentación predeterminada de Reveal.js en la siguiente pantalla:
Paso 7:crea una presentación sencilla
En esta sección, crearemos una presentación simple con Reveal.js.
Primero, edite el archivo index.html predeterminado de Reveal.js:
nano /root/reveal.js/index.html
Elimine el valor predeterminado... y agregue las siguientes líneas:
<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
Ahora, abra su navegador web y acceda a Reveal.js usando la URL http://reveal.example.com . Deberías ver tu nueva presentación en la siguiente pantalla:
Haga clic en el > para pasar a la siguiente diapositiva. Debería ver la siguiente pantalla:
Por supuesto, no tiene que hacer nada de esto si utiliza uno de nuestros servicios de alojamiento VPS de Linux, en cuyo caso simplemente puede pedirle a nuestros administradores expertos de Linux que lo configuren por usted. ellos son
disponible 24×7 y atenderá su solicitud de inmediato.
PD. Si te gustó esta publicación, compártela con tus amigos en las redes sociales usando los botones de la izquierda o simplemente deja una respuesta a continuación. Gracias.