zjev.js je bezplatný a open-source HTML framework, který lze použít k vytváření plně vybavených prezentací prostřednictvím webového prohlížeče. Je postaven na otevřených webových technologiích. Má bohatou sadu funkcí včetně obsahu Markdown, vnořených snímků, exportu PDF a rozhraní JavaScript API pro ovládání navigace po snímcích.
V tomto tutoriálu vám ukážeme, jak nainstalovat Reveal.js na Ubuntu 20.04.
Předpoklady
- Ubuntu 20.04 VPS (budeme používat náš plán SSD 2 VPS)
- Přístup k uživatelskému účtu root (nebo přístup k účtu správce s oprávněními root)
Krok 1:Přihlaste se k serveru a aktualizujte balíčky operačního systému serveru
Nejprve se přihlaste ke svému serveru Ubuntu 20.04 přes SSH jako uživatel root:
ssh root@IP_Address -p Port_number
„IP_Address“ a „Port_number“ budete muset nahradit příslušnou IP adresou vašeho serveru a číslem portu SSH. V případě potřeby navíc nahraďte „root“ uživatelským jménem účtu správce.
Před spuštěním se musíte ujistit, že všechny balíčky Ubuntu OS nainstalované na serveru jsou aktuální. Můžete to provést spuštěním následujících příkazů:
apt-get update -y apt-get upgrade -y
Krok 2:Instalace Node.js
Reveal.js je postaven na Node.js. Takže budete muset nainstalovat Node.js na váš server. Ve výchozím nastavení není nejnovější verze Node.js k dispozici ve výchozím úložišti Ubuntu 20.04. Budete tedy muset do svého systému přidat oficiální úložiště Node.js.
Nejprve nainstalujte všechny požadované závislosti pomocí následujícího příkazu:
apt-get install curl gnupg2 unzip git -y
Jakmile jsou všechny závislosti nainstalovány, přidejte úložiště Node.js pomocí následujícího příkazu:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Dále nainstalujte Node.js spuštěním následujícího příkazu:
apt-get install nodejs -y
Jakmile je Node.js nainstalován, můžete ověřit verzi Node.js pomocí následujícího příkazu:
node -v
Měli byste získat následující výstup:
v14.15.0
Krok 3:Instalace Reveal.js
Nejprve si stáhněte nejnovější verzi Reveal.js z úložiště Git pomocí následujícího příkazu:
git clone git clone https://github.com/hakimel/reveal.js.git
Po dokončení stahování změňte adresář na discover.js a nainstalujte všechny závislosti pomocí následujícího příkazu:
cd reveal.js npm install
Po instalaci všech závislostí spusťte server Node pomocí následujícího příkazu:
npm start
Měli byste získat následující výstup:
> [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
V tomto okamžiku je váš vývojový server spuštěn a naslouchá na portu 8000.
Nyní stiskněte CTRL+C pro zastavení běžícího serveru.
Krok 4:Vytvoření souboru Systemd Service pro Reveal.js
Dále budete muset vytvořit soubor služby systemd pro správu služby Reveal.js. Můžete jej vytvořit pomocí následujícího příkazu:
nano /lib/systemd/system/reveal.service
Přidejte následující řádky:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/reveal.js ExecStart=npm start -- --port=8001
Uložte a zavřete soubor a poté znovu načtěte službu systemd pomocí následujícího příkazu:
systemctl daemon-reload
Dále spusťte službu Reveal.js a povolte její spuštění při restartu systému pomocí následujícího příkazu:
systemctl start reveal systemctl enable reveal
Stav služby můžete také ověřit pomocí následujícího příkazu:
systemctl status reveal
Měli byste získat následující výstup:
● 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
Krok 5:Konfigurace Nginx jako reverzního proxy
V tomto okamžiku je váš server Reveal.js spuštěn a naslouchá na portu 8001. Dále budete muset nakonfigurovat Nginx jako reverzní proxy pro přístup k Reveal.js přes port 80.
Nejprve nainstalujte webový server Nginx pomocí následujícího příkazu:
apt-get install nginx -y
Po instalaci vytvořte nový konfigurační soubor virtuálního hostitele Nginx:
nano /etc/nginx/conf.d/reveal.conf
Přidejte následující řádky:
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;
}
}
Uložte a zavřete soubor a poté restartujte službu Nginx, aby se změny projevily:
systemctl restart nginx
Krok 6:Přístup k souboru Reveal.js
Nyní otevřete webový prohlížeč a přejděte na webové rozhraní Reveal.js pomocí adresy URL http://reveal.example.com . Na následující obrazovce byste měli vidět výchozí prezentaci Reveal.js:
Krok 7:Vytvoření jednoduché prezentace
V této části vytvoříme jednoduchou prezentaci s Reveal.js.
Nejprve upravte výchozí soubor index.html Reveal.js:
nano /root/reveal.js/index.html
Odeberte výchozí … a přidejte následující řádky:
<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
Nyní otevřete webový prohlížeč a přejděte k souboru Reveal.js pomocí adresy URL http://reveal.example.com . Novou prezentaci byste měli vidět na následující obrazovce:
Klikněte na> tlačítko pro přechod na další snímek. Měli byste vidět následující obrazovku:
Samozřejmě nemusíte nic z toho dělat, pokud používáte některou z našich hostingových služeb Linux VPS, v takovém případě můžete jednoduše požádat naše zkušené administrátory Linuxu, aby to za vás nastavili. Jsou to
k dispozici 24×7 a okamžitě se postará o váš požadavek.
PS. Pokud se vám tento příspěvek líbil, sdílejte jej se svými přáteli na sociálních sítích pomocí tlačítek vlevo nebo jednoduše zanechte odpověď níže. Děkuji.