如何在Ubuntu 20.04上安装Reveal.js并创建简单演示文稿

manifest.js是一个免费的开源HTML框架,可用于通过Web浏览器创建功能齐全的演示文稿。 它基于开放的Web技术。 它具有丰富的功能集,包括Markdown内容,嵌套幻灯片,PDF导出以及用于控制幻灯片导航的JavaScript API。

在本教程中,我们将向您展示如何在Ubuntu 20.04上安装Reveal.js。

先决条件

  • Ubuntu 20.04 VPS(我们将使用SSD 2 VPS计划)
  • 访问root用户帐户(或访问具有root特权的管理员帐户)

步骤1:登录到服务器并更新服务器操作系统软件包

首先,以root用户身份通过​​SSH登录到Ubuntu 20.04服务器:

ssh [email protected]_Address -p Port_number

您将需要用服务器各自的IP地址和SSH端口号替换“ IP_Address”和“ Port_number”。 此外,如有必要,将“ root”替换为管理员帐户的用户名。

在开始之前,您必须确保服务器上安装的所有Ubuntu OS软件包都是最新的。 您可以通过运行以下命令来执行此操作:

apt-get update -y
apt-get upgrade -y

步骤2:安装Node.js

Reveal.js建立在Node.js之上。 因此,您将需要在服务器中安装Node.js。 默认情况下,Ubuntu 20.04默认存储库中不提供最新版本的Node.js。 因此,您需要将Node.js官方存储库添加到系统中。

首先,使用以下命令安装所有必需的依赖项:

apt-get install curl gnupg2 unzip git  -y

安装所有依赖项后,使用以下命令添加Node.js存储库:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

接下来,通过运行以下命令来安装Node.js:

apt-get install nodejs -y

安装Node.js之后,您可以使用以下命令验证Node.js版本:

node -v

您应该获得以下输出:

v14.15.0

步骤3:安装Reveal.js

首先,使用以下命令从Git存储库下载最新版本的Reveal.js:

git clone git clone https://github.com/hakimel/reveal.js.git

下载完成后,将目录更改为Reveal.js并使用以下命令安装所有依赖项:

cd reveal.js
npm install

安装所有依赖项后,请使用以下命令启动节点服务器:

npm start

您应该获得以下输出:

> [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

此时,您的开发服务器已启动并正在侦听端口8000。

现在,按CTRL + C停止正在运行的服务器。

步骤4:为Reveal.js创建一个Systemd服务文件

接下来,您将需要创建一个systemd服务文件来管理Reveal.js服务。 您可以使用以下命令创建它:

nano /lib/systemd/system/reveal.service

添加以下行:

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/root/reveal.js
ExecStart=npm start -- --port=8001

保存并关闭文件,然后使用以下命令重新加载systemd服务:

systemctl daemon-reload

接下来,启动Reveal.js服务,并使用以下命令使其在系统重新启动时启动:

systemctl start reveal
systemctl enable reveal

您还可以使用以下命令来验证服务的状态:

systemctl status reveal

您应该获得以下输出:

● 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

步骤5:将Nginx配置为反向代理

此时,您的Reveal.js服务器已启动,并在端口8001上侦听。接下来,您需要将Nginx配置为反向代理,以通过端口80访问Reveal.js。

首先,使用以下命令安装Nginx Web服务器:

apt-get install nginx -y

安装后,创建一个新的Nginx虚拟主机配置文件:

nano /etc/nginx/conf.d/reveal.conf

添加以下行:

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;
    }
}

保存并关闭文件,然后重新启动Nginx服务以应用更改:

systemctl restart nginx

步骤6:访问Reveal.js

现在,打开您的Web浏览器,并使用URL访问Reveal.js Web界面。 http://reveal.example.com。 您应该在以下屏幕中看到Reveal.js的默认演示文稿:

如何在Ubuntu 20.04上安装reveal.js并创建一个简单的演示文稿

步骤7:创建一个简单的演示文稿

在本节中,我们将使用Reveal.js创建一个简单的演示文稿。

首先,编辑Reveal.js默认的index.html文件:

nano /root/reveal.js/index.html

删除默认值…并添加以下行:

<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

现在,打开您的Web浏览器并使用URL访问Reveal.js。 http://reveal.example.com。 您应该在以下屏幕中看到新的演示文稿:

在ubuntu-20.04上安装reveal.js的指南,并创建一个简单的演示文稿

点击 > 按钮以移至下一张幻灯片。 您应该看到以下屏幕:

在ubuntu-20.04上安装reveal.js的步骤并创建一个简单的演示文稿在Ubuntu 20.04上安装reveal.js并创建一个简单的演示指南

当然,如果您使用我们的Linux VPS托管服务之一,则无需执行任何操作,在这种情况下,您只需要求我们的专业Linux管理员为您进行设置即可。 他们是

可提供24×7的服务,并会立即处理您的请求。

PS。 如果您喜欢此帖子,请使用左侧的按钮在社交网络上与您的朋友分享,或者在下面留下您的答复。 谢谢。

Sidebar