使用 Caddy 代替 Nginx

Caddy 是一款由 Go 编写的 Web Server 工具,在折腾 Drone 的时候,我最终就是使用的它提供 Web 服务。回到标题,为什么要用 Caddy 替换掉 Nginx 呢?最主要的原因是 Caddy 能让网站自动支持 HTTPS。同样是使用 Let's Encrypt,换成 Nginx 我们就必须手工操作,并且还需要设置三个月更新证书的计划任务。而且默认还支持 http/2,很多事情都不需要我们再配置了。另外它的配置文件也比 Nginx 的要简单很多,几十行的 Nginx 配置文件 Caddy 仅需要几行就可以搞定了。

安装 Caddy

Caddy 提供了一键安装命令生成功能,访问 https://caddyserver.com/download 选择对应的平台,插件可默认为空,最后选择对应的协议后下方即会生成一键安装命令,例如:

$ curl https://getcaddy.com | bash -s personal

阅读全文

Drone安装指南

在上文《基于Docker的CI工具—Drone》中我们介绍了 Drone 以及它的优缺点,下面我将来介绍下如何配置安装 Drone。官方推荐使用 docker-compose 来启动服务,所以首先我们要准备好 docker 和 docker-compose。

安装 docker

docker 服务提供了桌面版,服务器版和云服务版不同操作系统的多种支持,可以在官方文档中找到对应的安装方法。这里以 Debain 服务器安装为例。Docker 支持 Debian 7.7+ 以上的系统版本, 需要 3.10 版本以上的 Linux 内核环境。

首先我们添加 docker 源的密钥:

$ sudo apt-get update
$ sudo apt-get install \
     apt-transport-https \
     ca-certificates \
     curl \
     gnupg2 \
     software-properties-common
$ curl -fsSL https://download.docker.com/linux/$(. /etc/os-release; echo "$ID")/gpg | sudo apt-key add -

然后我们添加 docker 源并使用 apt 安装 docker:

$ sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/$(. /etc/os-release; echo "$ID") \
   $(lsb_release -cs) \
   stable"
$ sudo apt-get update
$ sudo apt-get install docker-ce

执行以下命令确保我们已经安装正确:

$ sudo docker run hello-world

相比 docker 的安装,docker-compose 的安装就比较简单了。它是用 python 写的一个 docker 多镜像编排启动的工具,我们可以直接使用 pip 来安装它:

$ pip install docker-compose

阅读全文

基于Docker的CI工具—Drone

drone

我在很多 Github 项目中都会使用 travis-ci 来做自动化构建任务,其中的一项主要内容就是代码提交后自动执行单元测试计算测试覆盖率。但是 travis-ci 对于其它平台(例如 Gitlab)以及公司内网仓库来说都是不支持的,所以萌生了想要找另外一款 CI 工具代替 travis-ci 的想法。对比了几款 CI 产品之后,我最终选择了 Drone。它是一款使用 Go 开发的开源的 CI 自动构建平台,能够单独部署,支持常见的 Git 仓库,例如 Github, Gitlab, Bitbucket 以及 Gogs 等。Drone 主要有以下几个方面吸引我:

阅读全文

webview中viewport初始化不生效

最近做的项目有用户反馈问题,在 WebView 中页面的宽度不对了,显示了 PC 站的大小。我使用 chrome://inspect 调试了一下,发现 WebView 中任何一个自适应网站都有问题了,并且将页面 DOM 删除到最少也还是有问题,确认是客户端 WebView 的问题。

查了下资料后,最开始怀疑是不是客户端没有加上 setUseWideViewPort(true) 让 WebView 支持 viewport 属性。客户端查了下代码告知是有的,只能想想是否是其它问题了。

后来想了一下出问题的页面都比较特别,是需要经过一个中间页的跳转的。而这个中间页是没有设置 viewport 属性的。根据规范,如果在设置了 setUseWideViewPort(true) 的 WebView 中不写 viewport 的话默认是使用屏幕宽度来进行初始化,这里的屏幕宽度是真实的屏幕宽度,所以就看起来不正常了。

由于之前已经了解过 Webview 会有一些初始化的行为,这些行为是在这个 Webview 初始化之后无法改变的,只要这个 WebView 还没有被销毁,不管你切换什么页面都是无法修改的。所以我就在怀疑是不是 Webview 最开始使用了跳转页来初始化 WebView,然后跳转页上没有设置 viewport 属性初始化行为就不正常了。后来跳转后的页面虽然有设置 viewport,但是初始化已经完成所以已经不生效了。

解决的办法也非常简单,直接在跳转页上增加 viewport 设置即可。添加之后测试了下问题真的解决了。

75CDN 增加 SRI 支持

75cdn.png

75CDN 是一个由奇舞团维护的静态资源托管平台,创立至今已经稳定运行了一年多的时间。近期我们增加了 SRI 的支持,作为国内首个提供 SRI 服务的静态资源库了,也算是为 75CDN 一周年庆生吧。

SRI 全称是 Subresource Integrity,是用来解决由于 CDN 资源被污染而导致的 XSS 漏洞的方案。当浏览器检测加载脚本签名与给定的签名不一致时,会拒绝执行该脚本。目前浏览器的支持情况如下:

浏览器 支持版本
Chrome 以及 Chrome for Android 45+
Firefox 以及 Firefox Mobile 43+
Safari 以及 iOS Safari 11+
IE 以及 Edge 不支持
UC 浏览器 不支持

注: 数据来源于 CanIUseMDN

阅读全文

SVG动画实践

SVG 是基于 XML 的矢量图形描述语言,可以近似理解成 HTML,所以能和 JS 以及 CSS 进行交互。 特别是 CSS,配合 CSS Animation 就能实现一些令人心旷神怡的动画,这实在是让人兴奋。下面我们就来看看 SVG 配合 CSS 实现动画的一些方法。

本文内容主要是我之前分享的文字版,若想看重点的话可以看之前的 Slide:

也可以查看分享视频:http://cloud.live.360vcloud.net/theater/play?roomid=2079

阅读全文

Firekylin 多说评论迁移

Firekylin 是一款 Node.JS 的博客系统,由于没有自己实现评论功能,所以一直使用的是第三方的评论系统。使用社交评论系统的一个好处是能够支持社交账号登录,而不用每次都傻乎乎的自己输入昵称和邮箱。之前官方一直都是支持 Disqus多说 两款评论系统的,不过由于 Disqus 在国内的速度堪忧,所以使用多说的用户还是多一点。

然而多说虽然做为国内评论系统一哥,却一直没有找到变现方法,最近不得已更是发布了关服通知,让 Firekylin 的用户着实蛋疼了一把。好在我不就之前就在 Firekylin 中增加了 畅言 的支持,最近又增加了 网易云跟帖 的支持,让大家的评论系统有了更多的选择。

如果是直接切换服务,非常简单,在后台“评论设置”中选择相应的服务并填写对应的 ID 即可。下面我就来说说如何导入原来的多说评论到新的评论服务中。

阅读全文

升级到 webpack2

前些天 webpack2.2 发布了正式版。个人觉得 webpack2 带来的最大的变化莫过于新的官网了 https://webpack.js.org,新官网带来的新的文档比之前的要好太多了。而且早就想试试 Tree Shaking 了,所以趁此时间赶紧升级了一把。虽然已经发布了 2.2 的正式版,不过目前还需要通过 npm install webpack@beta 来安装,大家要注意哦~最新消息,官方已经把 beta 去掉了,现在直接安装 npm install webpack 就是最新 2.2.1 的版本了,如果要装老版本的话需要 npm install -g webpack@1。另外官方给出了详细的webpack1升级到webpack2的迁移指南,也可以参考其对应的的中文翻译版。以下就按照我的认识给大家梳理一下 webpack2 的一些变化,详细的更新情况还请参考官方文档。

阅读全文

Firekylin 如何自定义首页

之前用 WordPress 和 Typecho 的时候有个功能特别好用,那就是自定义首页。用户可以将某个页面指定成首页,而页面又可以通过自定义模板来个性化。最终达到了个性化首页的目的。这么棒的功能当然 Firekylin 也要支持啦,下面就和大家说说在 Firekylin 中如何实现个性化首页功能。

页面自定义模板

0.15.0 版本新增自定义模板的功能,将自定义模板放置在主题目录的 template 文件夹下,程序就会识别该自定义模板。模板的内容随意,可以是纯静态的 HTML 内容,也可以是 nunjucks 语法。后台新建页面右侧可以选择你设定的自定义模板,选择该模板之后程序就会使用它替换默认的 page.html 模板渲染该页面。

选择自定义模板

阅读全文