offenbaren.js ist ein kostenloses und Open-Source-HTML-Framework, das zum Erstellen von Präsentationen mit vollem Funktionsumfang über einen Webbrowser verwendet werden kann. Es basiert auf offenen Webtechnologien. Es verfügt über eine Vielzahl von Funktionen, darunter Markdown-Inhalte, verschachtelte Folien, PDF-Export und JavaScript-APIs zur Steuerung der Foliennavigation.
In diesem Tutorial zeigen wir Ihnen, wie Sie Reveal.js unter Ubuntu 20.04 installieren.
Voraussetzungen
- Ein Ubuntu 20.04 VPS (wir verwenden unseren SSD 2 VPS-Plan)
- Zugriff auf das Root-Benutzerkonto (oder Zugriff auf ein Administratorkonto mit Root-Rechten)
Schritt 1:Melden Sie sich beim Server an und aktualisieren Sie die Server-OS-Pakete
Melden Sie sich zunächst über SSH als Root-Benutzer bei Ihrem Ubuntu 20.04-Server an:
ssh root@IP_Address -p Port_number
Sie müssen „IP_Address“ und „Port_number“ durch die jeweilige IP-Adresse und SSH-Portnummer Ihres Servers ersetzen. Ersetzen Sie außerdem „root“ gegebenenfalls durch den Benutzernamen des Administratorkontos.
Bevor Sie beginnen, müssen Sie sicherstellen, dass alle auf dem Server installierten Ubuntu-Betriebssystempakete auf dem neuesten Stand sind. Sie können dies tun, indem Sie die folgenden Befehle ausführen:
apt-get update -y apt-get upgrade -y
Schritt 2:Node.js installieren
Reveal.js basiert auf Node.js. Sie müssen also Node.js auf Ihrem Server installieren. Standardmäßig ist die neueste Version von Node.js nicht im Standard-Repository von Ubuntu 20.04 verfügbar. Sie müssen also das offizielle Node.js-Repository zu Ihrem System hinzufügen.
Installieren Sie zuerst alle erforderlichen Abhängigkeiten mit dem folgenden Befehl:
apt-get install curl gnupg2 unzip git -y
Sobald alle Abhängigkeiten installiert sind, fügen Sie das Node.js-Repository mit dem folgenden Befehl hinzu:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Installieren Sie als Nächstes Node.js, indem Sie den folgenden Befehl ausführen:
apt-get install nodejs -y
Sobald Node.js installiert ist, können Sie die Node.js-Version mit dem folgenden Befehl überprüfen:
node -v
Sie sollten die folgende Ausgabe erhalten:
v14.15.0
Schritt 3:Reveal.js installieren
Laden Sie zunächst mit dem folgenden Befehl die neueste Version von Reveal.js aus dem Git-Repository herunter:
git clone git clone https://github.com/hakimel/reveal.js.git
Sobald der Download abgeschlossen ist, ändern Sie das Verzeichnis zu offenbaren.js und installieren Sie alle Abhängigkeiten mit dem folgenden Befehl:
cd reveal.js npm install
Sobald alle Abhängigkeiten installiert sind, starten Sie den Node-Server mit dem folgenden Befehl:
npm start
Sie sollten die folgende Ausgabe erhalten:
> [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
An diesem Punkt wird Ihr Entwicklungsserver gestartet und überwacht Port 8000.
Drücken Sie jetzt STRG+C, um den laufenden Server zu stoppen.
Schritt 4:Erstellen Sie eine Systemd-Dienstdatei für Reveal.js
Als Nächstes müssen Sie eine systemd-Dienstdatei erstellen, um den Reveal.js-Dienst zu verwalten. Sie können es mit dem folgenden Befehl erstellen:
nano /lib/systemd/system/reveal.service
Fügen Sie die folgenden Zeilen hinzu:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/reveal.js ExecStart=npm start -- --port=8001
Speichern und schließen Sie die Datei und laden Sie dann den systemd-Dienst mit dem folgenden Befehl neu:
systemctl daemon-reload
Starten Sie als Nächstes den Reveal.js-Dienst und ermöglichen Sie ihm, beim Systemneustart mit dem folgenden Befehl zu starten:
systemctl start reveal systemctl enable reveal
Sie können den Status des Dienstes auch mit dem folgenden Befehl überprüfen:
systemctl status reveal
Sie sollten die folgende Ausgabe erhalten:
● 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
Schritt 5:Nginx als Reverse-Proxy konfigurieren
An diesem Punkt wird Ihr Reveal.js-Server gestartet und überwacht Port 8001. Als Nächstes müssen Sie Nginx als Reverse-Proxy konfigurieren, um über Port 80 auf Reveal.js zuzugreifen.
Installieren Sie zuerst den Nginx-Webserver mit dem folgenden Befehl:
apt-get install nginx -y
Erstellen Sie nach der Installation eine neue Konfigurationsdatei für den virtuellen Nginx-Host:
nano /etc/nginx/conf.d/reveal.conf
Fügen Sie die folgenden Zeilen hinzu:
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;
}
}
Speichern und schließen Sie die Datei und starten Sie dann den Nginx-Dienst neu, um die Änderungen zu übernehmen:
systemctl restart nginx
Schritt 6:Greifen Sie auf Reveal.js zu
Öffnen Sie nun Ihren Webbrowser und greifen Sie über die URL http://reveal.example.com auf die Reveal.js-Weboberfläche zu . Auf dem folgenden Bildschirm sollte die Standardpräsentation von Reveal.js angezeigt werden:
Schritt 7:Erstellen Sie eine einfache Präsentation
In diesem Abschnitt erstellen wir eine einfache Präsentation mit Reveal.js.
Bearbeiten Sie zunächst die Standarddatei index.html von Reveal.js:
nano /root/reveal.js/index.html
Entfernen Sie den Standard … und fügen Sie die folgenden Zeilen hinzu:
<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
Öffnen Sie nun Ihren Webbrowser und greifen Sie über die URL http://reveal.example.com auf Reveal.js zu . Sie sollten Ihre neue Präsentation auf dem folgenden Bildschirm sehen:
Klicken Sie auf > Taste, um zur nächsten Folie zu wechseln. Sie sollten den folgenden Bildschirm sehen:
Natürlich müssen Sie nichts davon tun, wenn Sie einen unserer Linux-VPS-Hosting-Dienste nutzen. In diesem Fall können Sie einfach unsere erfahrenen Linux-Administratoren bitten, dies für Sie einzurichten. Sie sind
24×7 erreichbar und kümmert sich umgehend um Ihr Anliegen.
PS. Wenn Ihnen dieser Beitrag gefallen hat, teilen Sie ihn bitte mit Ihren Freunden in den sozialen Netzwerken über die Schaltflächen auf der linken Seite oder hinterlassen Sie einfach unten eine Antwort. Danke.