使用 SpeedTest 开源项目搭建基于 HTML5 的搬瓦工 VPS 速度测试页面

今天给大家介绍一下如何在自己的搬瓦工 VPS 上搭建基于 HTML5 的自建的 SpeedTest 测速页面。主要是基于 GitHub 上的开源项目，演示效果就是本站提供的搬瓦工各个机房的 SpeedTest 速度测试页面。因为一直有朋友来询问这个页面是怎么搭建的，想在自己的搬瓦工 VPS 上搭建，也有朋友是觉得本站提供的测速页面不准，也想自己搭建。那么今天就介绍一下怎么使用 SpeedTest 这个开源项目，搭建自己的搬瓦工 VPS 测速页面。

最终演示效果可以参考本站的演示站点，比如 DC6 的：https://dc6.bwg.net/speedtest/。更多演示站点参考《搬瓦工演示站点汇总（SpeedTest 速度测试 + LookingGlass 路由测试）》。

文章目录
隐藏
一、准备工作
 二、部署 SpeedTest 速度测试页面
 三、美化页面以及更多个性化设置
 四、搬瓦工便宜方案推荐

一、准备工作

首先我们需要部署一个网站环境，比如使用 LNMP 一键包、LAMP 一键包、宝塔面板、或者 WDCP 面板、CyberPanel 面板等，总之随便选择一个面板就行。各种面板的搭建教程如下：

LNMP 一键包：搬瓦工建站教程：一键部署 LNMP 建站环境
LAMP 一键包：搬瓦工VPS/Bandwagonhost 搭建Apache + PHP + MySQL建站教程
宝塔面板：搬瓦工VPS 安装BT宝塔Web面板教程
WDCP 面板：搬瓦工建站教程：一键安装 WDCP 面板并安装 PHP、MySQL 建站环境
CyberPanel 面板：搬瓦工建站教程：一键安装 CyberPanel 面板教程（LiteSpeed 建站环境）

本站使用的是 LNMP 一键包，下面就以 LNMP 一键包为例，讲解一下如何进行部署 SpeedTest 页面。

二、部署 SpeedTest 速度测试页面

SpeedTest 项目主页：https://github.com/adolfintel/speedtest

我们所需要做的就是把这些文件放到服务器上，就完成了。具体来说，有下面几个步骤。

1、确定网站目录

首先需要明确我们需要把文件放哪边。如果我们需要使用域名并放置到对应的域名目录下，那么就按照《搬瓦工建站教程：使用 LNMP 一键包添加网站以及设置伪静态》这个教程，添加域名，并且按照《搬瓦工建站教程：域名解析教程》这个教程解析域名。比如我们的域名是 example.com，那么我们默认的网站目录就是 /home/wwwroot/example.com。

如果我们不需要使用域名，想直接通过 IP 进行访问，那么直接把文件放到 /home/wwwroot/default 这里就可以。注意先把这里的 index.html 删了。

2、上传 SpeedTest 文件

接下来就可以上传 SpeedTest 文件到对应的目录了。最简单的方法就是先把文件下载到本地，下载地址：https://github.com/adolfintel/speedtest/archive/master.zip

然后通过 SFTP 上传，教程：《搬瓦工 FTP 教程：使用 FileZilla 通过 SFTP 向搬瓦工 VPS 上传文件的方法》。

上传的时候，我们只需要上传下面几个文件就行：