StatusLive新版已经上线了，你可以戳https://status.freejishu.com进行体验。

为了让更多的人拥有自己的状态监控页，StatusLive会开放源代码。想不想建立属于自己的监控页呢？

1、前言

以前的StatusLive使用的是自己的服务器，自己进行数据拼合和计算，但现在木有那么多心情钱服务器了，所以决定更换到Uptimerobot，使用他们的监测数据。

以前的页面因为页面构架啥的都是网上找源码复制粘贴的，渲染上存在一定性能问题（这个问题目前还没有定位到是哪里产生的），所以我决定根据我现在的奇葩审美观重新写一个页面。

2、特性

• 界面简洁明了，基于MDB，全部使用原生组件；

MDB，即Material Design for Bootstrap，关于它你可以戳我之前写的一篇文章https://www.freejishu.com/archives/445。

• 新的分类模式（网站/数据中心）；
• 拥有可设置项，简单设置即可食用，亦可以自行魔改；
• 双模式反代支持（php反代/nginx等引擎反代）；
• UptimeRobot监控拥有的优点：略
• 反正还有很多就是了你们自己看着办（雾）

3、开箱！

项目地址：https://github.com/freejishu/StatusLive

监控数据来源：Uptimerobot – https://uptimerobot.com/

1、首先注册一个Uptimerobot账户，打开注册页面，输入信息注册（看不懂英文的照着翻译，如果还看不懂Emmm我也救不了你）

2、登陆，进入后台，添加站点，开始监控。

关于添加类型展示问题：Ping将在数据中心一栏中展示，其余将在网站一栏中展示。

3、添加完成后，点击右上角的“My Settings”，找到“Public Status Pages”一栏，点击绿色的“Add Public Status Page”新建一个公共展示页面。

Password一定要留空！

4、获取Status Page Key

创建完成后，系统会分配给你一个默认连接（“Standard URL”），形似https://stats.uptimerobot.com/KQLq0Cy2M。用户们可以通过这个链接直接访问你的状态了。然后就完了。

怎么可能，这个连接在国内访问速度相当慢，用户体验极差，为了做出属于自己的风格，请务必使用StatueLive！（这个人抽风了不要理他）

连接中的KQLq0Cy2M区域每个人都不一样，这也就是我们需要的Status Page Key。

5、下载github上的源代码。

项目地址：https://github.com/freejishu/StatusLive

6、简单配置

找到index.html的293行左右的设置区域，根据以下说明简单配置：

config_title = “状态监控”,//主标题
config_title_english = “StatusLive”,//副标题（英文标题）
config_warning_flash = false,//warning区域是否添加特效（闪一下）
config_status_key = “KQLq0Cy2M”;//你的statuspageskey
config_ajax_mode = 1;//ajax模式 1为依赖core.php模式 2为反代模式
config_ajax_proxy_domain = “”; //当config_ajax_mode设定为2时，在此填写反代域名（要有http(s)://，末尾不带斜杠）
config_show_chart = true;//是否展示图标
config_auto_refresh_seconds = 60;//数据刷新时间，单位为秒，建议不低于60

注意：如果ajax模式使用1，core.php要和index.html位于同一目录下。

或者可以到/js/core.js的107、161行分别修改为你的地址，请不要直接使用Uptimerobot官方提供的页面上的json地址，会出跨域问题。

如果ajax模式使用2，则需要自行配制反代，反代的域名为“http://stats.uptimerobot.com”（对，就是那个极慢的域名）。

7、上传代码到服务器，配置好相关反代，完工！

4、写在后面

这个项目真的花了不少时间去琢磨，还接触了一个新的前端框架MDB，收获也是不小了。最起码，把自己对前端现状的意识往前抬了一些。

freejishu的美丽世界将在未来进行一次主题风格调整，这取决于我什么时候有灵感了。（老实交代，上一次你说要自己写主题是几个世纪之前了）

各位Dalao们！高抬贵手给个Star吧！ :guai: