reveal.js è un framework HTML gratuito e open source che può essere utilizzato per creare presentazioni complete tramite un browser web. Si basa su tecnologie web aperte. Ha un ricco set di funzionalità tra cui contenuto Markdown, diapositive nidificate, esportazione PDF e API JavaScript per il controllo della navigazione delle diapositive.
In questo tutorial, ti mostreremo come installare Reveal.js su Ubuntu 20.04.
Prerequisiti
- Un Ubuntu 20.04 VPS (useremo il nostro piano SSD 2 VPS)
- Accesso all'account utente root (o accesso a un account amministratore con privilegi root)
Passaggio 1:accedi al server e aggiorna i pacchetti del sistema operativo del server
Innanzitutto, accedi al tuo server Ubuntu 20.04 tramite SSH come utente root:
ssh root@IP_Address -p Port_number
Dovrai sostituire "Indirizzo_IP" e "Numero_porta" con il rispettivo indirizzo IP e numero di porta SSH del tuo server. Inoltre, se necessario, sostituisci "root" con il nome utente dell'account amministratore.
Prima di iniziare, devi assicurarti che tutti i pacchetti del sistema operativo Ubuntu installati sul server siano aggiornati. Puoi farlo eseguendo i seguenti comandi:
apt-get update -y apt-get upgrade -y
Fase 2:installa Node.js
Reveal.js è basato su Node.js. Quindi dovrai installare Node.js nel tuo server. Per impostazione predefinita, l'ultima versione di Node.js non è disponibile nel repository predefinito di Ubuntu 20.04. Quindi dovrai aggiungere il repository ufficiale di Node.js al tuo sistema.
Innanzitutto, installa tutte le dipendenze richieste con il seguente comando:
apt-get install curl gnupg2 unzip git -y
Una volta installate tutte le dipendenze, aggiungi il repository Node.js con il seguente comando:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Quindi, installa Node.js eseguendo il comando seguente:
apt-get install nodejs -y
Una volta installato Node.js, puoi verificare la versione di Node.js con il seguente comando:
node -v
Dovresti ottenere il seguente output:
v14.15.0
Fase 3:installa Reveal.js
Innanzitutto, scarica l'ultima versione di Reveal.js dal repository Git utilizzando il seguente comando:
git clone git clone https://github.com/hakimel/reveal.js.git
Una volta completato il download, cambia la directory in reveal.js e installa tutte le dipendenze con il seguente comando:
cd reveal.js npm install
Una volta installate tutte le dipendenze, avvia il server Node con il seguente comando:
npm start
Dovresti ottenere il seguente output:
> [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
A questo punto, il tuo server di sviluppo è avviato ed è in ascolto sulla porta 8000.
Ora premi CTRL+C per fermare il server in esecuzione.
Passaggio 4:crea un file di servizio Systemd per Reveal.js
Successivamente, dovrai creare un file di servizio systemd per gestire il servizio Reveal.js. Puoi crearlo con il seguente comando:
nano /lib/systemd/system/reveal.service
Aggiungi le seguenti righe:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/reveal.js ExecStart=npm start -- --port=8001
Salva e chiudi il file, quindi ricarica il servizio systemd con il seguente comando:
systemctl daemon-reload
Quindi, avvia il servizio Reveal.js e abilitalo all'avvio al riavvio del sistema con il seguente comando:
systemctl start reveal systemctl enable reveal
Puoi anche verificare lo stato del servizio con il seguente comando:
systemctl status reveal
Dovresti ottenere il seguente 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]: > [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
Passaggio 5:configura Nginx come proxy inverso
A questo punto, il tuo server Reveal.js viene avviato e rimane in ascolto sulla porta 8001. Successivamente, dovrai configurare Nginx come proxy inverso per accedere a Reveal.js tramite la porta 80.
Innanzitutto, installa il server web Nginx con il seguente comando:
apt-get install nginx -y
Una volta installato, crea un nuovo file di configurazione dell'host virtuale Nginx:
nano /etc/nginx/conf.d/reveal.conf
Aggiungi le seguenti righe:
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;
}
}
Salva e chiudi il file, quindi riavvia il servizio Nginx per applicare le modifiche:
systemctl restart nginx
Fase 6:accedi a Reveal.js
Ora apri il tuo browser web e accedi all'interfaccia web di Reveal.js utilizzando l'URL http://reveal.example.com . Dovresti vedere la presentazione predefinita di Reveal.js nella schermata seguente:
Passaggio 7:crea una presentazione semplice
In questa sezione creeremo una semplice presentazione con Reveal.js.
Innanzitutto, modifica il file index.html predefinito di Reveal.js:
nano /root/reveal.js/index.html
Rimuovi il default... e aggiungi le seguenti righe:
<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
Ora apri il tuo browser web e accedi a Reveal.js citando l'URL http://reveal.example.com . Dovresti vedere la tua nuova presentazione nella schermata seguente:
Fare clic su > pulsante per passare alla diapositiva successiva. Dovresti vedere la seguente schermata:
Ovviamente, non devi fare nulla di tutto ciò se utilizzi uno dei nostri servizi di hosting VPS Linux, nel qual caso puoi semplicemente chiedere ai nostri esperti amministratori Linux di configurarlo per te. Sono
disponibile 24 ore su 24, 7 giorni su 7 e si prenderà immediatamente cura della tua richiesta.
PS. Se questo post ti è piaciuto condividilo con i tuoi amici sui social network utilizzando i pulsanti a sinistra o semplicemente lascia una risposta qui sotto. Grazie.