mengungkapkan.js adalah kerangka kerja HTML gratis dan sumber terbuka yang dapat digunakan untuk membuat presentasi berfitur lengkap melalui browser web. Itu dibangun di atas teknologi web terbuka. Ini memiliki serangkaian fitur yang kaya termasuk, konten penurunan harga, slide bersarang, ekspor PDF, dan API JavaScript untuk mengontrol navigasi slide.
Dalam tutorial ini, kami akan menunjukkan cara menginstal Reveal.js di Ubuntu 20.04.
Prasyarat
- VPS Ubuntu 20.04 (kami akan menggunakan paket SSD 2 VPS kami)
- Akses ke akun pengguna root (atau akses ke akun admin dengan hak akses root)
Langkah 1:Masuk ke Server &Perbarui Paket OS Server
Pertama, masuk ke server Ubuntu 20.04 Anda melalui SSH sebagai pengguna root:
ssh root@IP_Address -p Port_number
Anda harus mengganti 'IP_Address' dan 'Port_number' dengan alamat IP dan nomor port SSH masing-masing server Anda. Selain itu, ganti 'root' dengan nama pengguna akun admin jika perlu.
Sebelum memulai, Anda harus memastikan bahwa semua paket OS Ubuntu yang diinstal di server sudah diperbarui. Anda dapat melakukannya dengan menjalankan perintah berikut:
apt-get update -y apt-get upgrade -y
Langkah 2:Instal Node.js
Reveal.js dibangun di atas Node.js. Jadi, Anda perlu menginstal Node.js di server Anda. Secara default, versi terbaru Node.js tidak tersedia di repositori default Ubuntu 20.04. Jadi, Anda perlu menambahkan repositori resmi Node.js ke sistem Anda.
Pertama, instal semua dependensi yang diperlukan dengan perintah berikut:
apt-get install curl gnupg2 unzip git -y
Setelah semua dependensi terinstal, tambahkan repositori Node.js dengan perintah berikut:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Selanjutnya, instal Node.js dengan menjalankan perintah berikut:
apt-get install nodejs -y
Setelah Node.js diinstal, Anda dapat memverifikasi versi Node.js dengan perintah berikut:
node -v
Anda akan mendapatkan output berikut:
v14.15.0
Langkah 3:Instal Reveal.js
Pertama, unduh versi terbaru Reveal.js dari repositori Git menggunakan perintah berikut:
git clone git clone https://github.com/hakimel/reveal.js.git
Setelah unduhan selesai, ubah direktori menjadi mengungkapkan.js dan instal semua dependensi dengan perintah berikut:
cd reveal.js npm install
Setelah semua dependensi terinstal, mulai server Node dengan perintah berikut:
npm start
Anda akan mendapatkan output berikut:
> [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
Pada titik ini, server pengembangan Anda dimulai dan mendengarkan pada port 8000.
Sekarang, tekan CTRL+C untuk menghentikan server yang sedang berjalan.
Langkah 4:Buat File Layanan Systemd untuk Reveal.js
Selanjutnya, Anda perlu membuat file layanan systemd untuk mengelola layanan Reveal.js. Anda dapat membuatnya dengan perintah berikut:
nano /lib/systemd/system/reveal.service
Tambahkan baris berikut:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/reveal.js ExecStart=npm start -- --port=8001
Simpan dan tutup file kemudian muat ulang layanan systemd dengan perintah berikut:
systemctl daemon-reload
Selanjutnya, mulai layanan Reveal.js dan aktifkan untuk memulai pada sistem reboot dengan perintah berikut:
systemctl start reveal systemctl enable reveal
Anda juga dapat memverifikasi status layanan dengan perintah berikut:
systemctl status reveal
Anda akan mendapatkan output berikut:
● 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
Langkah 5:Konfigurasi Nginx sebagai Proxy Terbalik
Pada titik ini, server Reveal.js Anda dimulai dan mendengarkan pada port 8001. Selanjutnya, Anda perlu mengonfigurasi Nginx sebagai proxy terbalik untuk mengakses Reveal.js melalui port 80.
Pertama, instal server web Nginx dengan perintah berikut:
apt-get install nginx -y
Setelah terinstal, buat file konfigurasi virtual host Nginx baru:
nano /etc/nginx/conf.d/reveal.conf
Tambahkan baris berikut:
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;
}
}
Simpan dan tutup file kemudian restart layanan Nginx untuk menerapkan perubahan:
systemctl restart nginx
Langkah 6:Akses Reveal.js
Sekarang, buka browser web Anda dan akses antarmuka web Reveal.js menggunakan URL http://reveal.example.com . Anda akan melihat presentasi default Reveal.js di layar berikut:
Langkah 7:Buat Presentasi Sederhana
Di bagian ini, kita akan membuat presentasi sederhana dengan Reveal.js.
Pertama, edit file index.html default Reveal.js:
nano /root/reveal.js/index.html
Hapus default … dan tambahkan baris berikut:
<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
Sekarang, buka browser web Anda dan akses Reveal.js dengan menggugat URL http://reveal.example.com . Anda akan melihat presentasi baru Anda di layar berikut:
Klik pada> tombol untuk pindah ke slide berikutnya. Anda akan melihat layar berikut:
Tentu saja, Anda tidak perlu melakukan semua ini jika Anda menggunakan salah satu layanan Hosting VPS Linux kami, dalam hal ini Anda dapat meminta admin Linux ahli kami untuk menyiapkan ini untuk Anda. Mereka adalah
tersedia 24×7 dan akan segera menangani permintaan Anda.
PS. Jika Anda menyukai posting ini, silakan bagikan dengan teman-teman Anda di jejaring sosial menggunakan tombol di sebelah kiri atau cukup tinggalkan balasan di bawah. Terima kasih.