风也雨忆笙

给网站添加一个实时在线的聊天室

踩坑随笔

发布于：2020年2月12日

无意间发现了闲聊么这个好玩的东东，可以给网站添加一个在线的聊天窗口，便于大家一起交流学习。

安装

安装使用的方式很简单，只需在注册以后，点击生成新网站，然后把生成的代码复制到网页的body内即可。

<script>
    var xlm_wid='这里是你的ID';
    var xlm_url='https://www.xianliao.me/';
</script>
<script type='text/javascript' charset='UTF-8' src='https://www.xianliao.me/embed.js'></script>

注册地址

https://www.xianliao.me/account/signup

使用

安装之后在网站的右下角就会显示一个按钮，点击之后就会出现一个悬浮窗

可以点击设置按钮，然后进行一些配置，包括添加聊天室，修改名称等等之类，并且还可以添加管理员。

可以发布网站公告

总之，看起来很好玩的样子

关于聊天

这个系统的设置有一点感觉不是很好，就是必须要使用微信登陆之后才可以发消息，可能有些对信息敏感的人来说，这一点非常不好吧，但是这也能理解，如果开放了匿名的话，可能会出现一些无法控制的现象。

最后

欢迎大家在聊天室里踊跃发言，畅谈人生理想和追求，哈哈！记得一定要先用微信登陆，不然的话输入的内容也许就要从新输入了哦!

为网站添加了烟花点击特效

建站教程

发布于：2020年2月12日

一直很喜欢ONEREC网站的烟花点击效果，单击可以显示烟花，左键长按再松开可以爆出更大的烟花，而且不需要再设置z-index，对handsome主题有了很好的兼容行，同时作者本人也给出了源代码。

介绍

名称：网站烟花点击效果
作者：ukuq(ONESRC)
博客：https://www.onesrc.cn/
原文：https://www.onesrc.cn/p/add-a-fireworks-click-effect-to-your-website.html

使用

我将源代码放入了github，同时采用了jsdeliver的方式进行加速访问，只要在页脚</body>标签之前添加以下代码即可

1	<script src="//cdn.jsdelivr.net/gh/kaygb/JS-effects/fireworks.js"></script>

预览

解决谷歌广告抽风导致网站加载缓慢的问题

踩坑随笔

发布于：2020年2月11日

在我个人看来，谷歌广告是各大广告商中体验最好的一个，因为他的广告比较智能，不会出现一些不堪入目的广告，同时它的自动广告我也觉得很满意，当然，最重要的一点就是：在众多广告联盟中，只有谷歌通过了我的申请！！！

速度优化

自从我的小站接入谷歌广告以来，它偶尔的加载缓慢，甚至一些资源根本无法正常加载，导致了网页不能正常滚动，这已经非常严重的影响了访问的体验！！！

谷歌广告虽好，但是也要进行优化一下，就在历史性的今天，我把它给解决掉了。不多说，直接开始。

分析

首先分析一下谷歌给我们的代码：

//引用的主要js
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
//右侧栏的一块广告位代码
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

其实谷歌已经做过了优化，使用的是async异步请求加载的方式，但是，国内的情况大家都有了解，所以会有偶尔加载失败的情况。

JS监听加载

这里我使用了JS监听加载的方式，来使网站看起来加载非常快

只需要修改这段代码

1	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

修改为：

<script>
window.onload = function() {
        setTimeout(function() {
                let script = document.createElement("script");
                script.setAttribute("async", "");
                script.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
                document.body.appendChild(script);
        }, 2e3);
}
</script>

原理

这个的原理就是我们在网站加载完成，且那个浏览器标签上的圆圈不转的时候，才开始加载谷歌的JS，并不是真正意义的加速，只不过让广告在后台加载了，这样的话不会影响到页面的访问。

建议

当然，如果你有很多个广告位，并不需要每个代码位都加载这个JS文件，只需要在页脚加载一次即可。

阿里云安全组规则授权对象设置为固定IP段访问

踩坑随笔

发布于：2020年2月11日

阿里云的ESC建站需要在安全组放通一些端口才能正常访问，所以我们在开放端口的时候就直接设置了全部ip可访问,授权对象填入0.0.0.0/0,意味着允许全部ip访问或者禁止全部ip访问。

但是我们有了一个新的需求，我们想让这个端口只能固定ip段可访问，假如我们当前本地的ip地址是123.123.123.123，我们可以直接将这个ip填入授权对象一栏，以达到只允许这个ip访问的目的。

但是，问题来了，我们家庭使用的宽带网络的ip地址并不是唯一的，同时几百个人共享一个ip也是可能的，这就意味着我们之前填入的ip地址是会不停变化的，我们之前的ip是123.123.123.123,可能过了两天就变成了123.123.122.111,同时，我们授权的那个ip地址和现在的ip不符，于是我们就无法访问这个端口了。

所以，我们就要使用CIDR网段格式来进行ip段的控制。关于这个网段的说明，阿里云官网也没有明确的说明（也可能是我没找到）

我们之前所用的0.0.0.0/0就是这个格式，他代表着全部的ip

我们先看一下CIDR网段格式

所有IP 0.0.0.0/0 

A级段 192.168.1.1/8 
表示192.0.0.0-192.255.255.255 
对应子网掩码格式 192.168.1.1/255.0.0.0

B级段 192.168.1.1/16 
表示192.168.0.0-192.168.255.255
对应子网掩码格式 192.168.1.1/255.255.0.0

C级段 192.168.1.1/24 
表示192.168.1.0-192.168.1.255
对应子网掩码格式 192.168.1.1/255.255.255.0

现在我们对比一下我们主机所变化的ip

变化之前	变化之后
123.123.123.123	123.123.122.111

通过对比发现，只有第二个点后面的内容发生了改变，和上面的B级段吻合，所以我们就可以将授权对象设置为123.123.123.123/16，这样就可以实现123.123.0.0到123.123.255.255这个区间内的所有ip访问了。

关于网站的速度优化以及数据持久化备份的思路

踩坑随笔

发布于：2020年2月7日

近期有朋友问我关于图片存储和网站备份的问题，想着我也有必要记录一下，就整理一下目前的服务器状况，给大家提供一些思路。

网站配置

服务器配置：阿里云1H2G1M学生机

运行环境：centos7+宝塔面版lnmp

全站CDN：国内腾讯云，国外又拍云

静态资源加速：七牛云

图片：Picgo+又拍融合云存储，绑定了阿里云OSS

图片的持久化访问与网站数据备份

我在又拍云创建了一个融合云存储，绑定了阿里云OSS，就相当于图片上传到又拍云之后自动给镜像到阿里云oss，访问又拍云的加速域名和阿里云oss的加速域名都可以访问到这张图片。

同时它也有一个好处，就是在又拍云的服务出现问题的时候CDN节点会将图片链接自动跳转到阿里云oss的加速域名。

备份在OSS里也不用担心又拍云哪天跑路了，毕竟阿里云这种大厂实力大家有目共睹。OSS的40G存储包一年只要9块钱很划算了，只是做图片备份的话完全够用。

当然，也可以使用GitHub作为图床，jsdeliver为GitHub公共仓库提供了全球免费CDN加速。

关于融合云的例子

假定：

又拍云加速域名为：a.img.com
阿里云OSS加速域名为：b.img.com
picgo设置的图片的路径为：/images/picgo/

当我使用Snipaste截了一张图（a.png），然后按下快捷键Ctrl+Alt+Z，这个时候这张图片已经通过Picgo上传到了又拍云的云存储，因为开了融合云存储的原因，又拍云自动将这张图片上传到了阿里云OSS，同时路径保持不变。

所以现在我就可以通过两个域名访问到这张图片：

a.img.com/images/picgo/a.png

b.img.com/images/picgo/a.png

由于阿里云OSS的流量是收费的，而又拍云联盟每个月有免费的15G流量，我们就可以将开销缩减到最小。

网站备份

使用OSS其实有个很不错的优点，就是OSS支持内网访问，而且不计费，内网带宽足够大，直接挂载就犹如本地磁盘一样，前提是你的服务器和OSS在同一个区域。所以在备份图片的同时，它也是我进行网站备份的主要使用方式，加上宝塔支持计划任务，可以很方便的进行网站的备份。

CDN网站加速服务

为什么要开CDN？对于小站来说，开CDN并不会对网站起到很好的加速效果，甚至会拖慢网站的加载速度，因为用户访问网站会自动访问的最近的CDN节点，第一次访问CDN节点会先访问源站进行缓存，当同区域的用户再次访问此节点时CDN会直接返回节点缓存的内容。

当然，我打开CDN服务是为了在更多的区域可以访问到我的网站，CDN的一大好处就是可以隐藏服务器的IP地址，我们都知道，常见的攻击手段都是直接打的IP，我们的IP隐藏了，可以规避一定的风险。

说一下我现在的CDN结构，用腾讯云的原因是腾讯云有免费的流量，同时它也有一个弊端，就是只能加速中国大陆区域，这个问题对我来说并不是问题，因为又拍云的CDN可以全球加速，所以我网站国外的CDN支持是使用又拍云的。

如何国内外CDN分离？

现在主流的DNS解析都支持选择解析的线路，在阿里云的话，过年选择默认线路，国外选择境外就可以了。

静态资源加速

这里的静态资源主要是指网站的一些CSS,JS，图片之类的文件，因为服务器本身的带宽有限，将这些静态资源分离出去可以给服务器减轻很大的压力。这里我选择了七牛云，因为七牛云也是有免费的10G流量的，不过有一点，七牛的HTTPS访问并不免费，但是价格也不算高，充十块钱可以用很久了。

总体开销

这样算下来，其实我们的开销并不多，算一下一年需要付费的开销

服务器：118（阿里云学生机，我看了续费需要117.62，按118算）
阿里云OSS：9
七牛云HTTPS：10（小站一年其实也用不了10元）
超出额度外的费用预计：50
域名：cn域名29元

一年差不多需要200左右就可以基本搞定开销，当然，如果你喜欢折腾又经常控制不住的话，也许会花费更多。

获得了什么？

CDN流量：10G（腾讯云）+10G（七牛云）+15G（又拍云）

云存储：40G（OSS）+10G（七牛云）+10G（又拍云）

即做到了为网站加速，又起到了服务器瘦身的作用，同时开销也不是很大。

关于谷歌广告

你可能觉得我的网站速度加载的并不是很快，其中一很大一部分原因是因为我使用了谷歌广告，由于各种不可描述的问题，经常会有某些资源加载失败的问题影响了速度。

其实谷歌广告对于我这小站来说，带来的收入确实不多，自从我添加了广告到现在，差不多三四个月了，收入也只有一美元，说不上多，够一杯咖啡，有些时候我都想关掉，但申请又不易，那就这样吧，如果看到您觉得有用的广告信息，欢迎点击访问！

关键

为什么要使用免费的服务，或者说我们付费这么少，服务商赚不到钱，会不会倒闭跑路？

其实这个问题完全不用担心，服务商主要是赚大客户的钱，我们小站用的流量对那些大客户来说简直少的可怜，提供免费的服务有益于建立口碑，同时可以为服务商吸引更大的用户。

最后

目前这个是我现在这个网站的解决方案，如果您有更好的，欢迎一起讨论。

全国新型肺炎疫情实时动态

日常生活

发布于：2020年2月5日

加油武汉，加油中国！
[scode type=”green”]数据来源：丁香园[/scode]
[button color=”success” icon=”” url=”https://ncov.dxy.cn/ncovh5/view/pneumonia" type=””]独立页面访问[/button]