这个网站是如何建成的?

前言

我有好长一段时间没有写博客了,恐怕上次写博客还是在前年。如今刚刚交上本科毕业论文,又心血来潮地准备重新开始写博客,来记录一些对技术和生活的想法和感悟。其实,尽管博客没写几篇,但我几乎折腾所有流行的博客平台。大概初中时候,我就开始使用 WordPress 搭建博客了(当时使用免费的.tk域名和免费的虚拟空间),之后的几年里我还用过博客园、简书、CSDN 这样一些非独立的博客,用过Jeykll、Hexo、GitBook 和 Pelican 等静态网站生成器在 GitHub Pages、CODING Pages、Netlify 等静态网站托管平台上搭建博客,甚至还用过 Leanote 提供的将笔记转换为博客功能,以及使用 DropBox 做同步的 Farbox。如今,我又用回了 WordPress,因为它实在太好用了。

在许多人的印象中,尽管 WordPress 简单易用,有大量的插件和主题,但速度却不尽人意。我曾经也是这么以为的,但是最近我试着做了一些优化,发现还是能够达到一个相当不错的速度的。下面的图是GTmetrix 上的测试结果,可以看到完全加载的时间仅有 1.9 s,可以说是很不错了。

GTmetrix 测试结果

优化的方法其实很简单,只需要定位慢的原因并一一解决掉就可以了。一般来说,网站的速度主要取决于两方面,网络传输速度和网页生成的速度。优化网络传输速度可以从优化服务器带宽,减少传输体积和请求次数,,设置浏览器缓存,使用内容分发网络(CDN)等方面入手。优化网页生成速度可以从优化服务器配置(内存、CPU)和加入各级缓存等方面入手,例如使用 OPcache 存储 PHP 的预编译字节码,以减少加载和编译的开销;使用 WP Super Cache 插件将生成的网页缓存下来,减少计算查询的开销等等。

下面我将详细谈一谈本个人主页网站搭建的过程与建议,包括服务器的购买,环境和 WordPress 的安装优化,主题和插件的选择和安装,SSL 证书的申请以及 CDN 的设置等。

服务器的购买

服务器按照提供商可以分为国内的和国外的,国内的主要有阿里云和腾讯云等,主要优势是在国内访问速度快且稳定,但缺点是带宽小且贵,相同配置的也要比国外的贵很多,系统镜像相对较老,可能需要备案;国外比较有名有 Vultr,DigitalOcean,Linode 和 Bandwagon 等,主要优势是价格低,带宽高,不需要备案,系统镜像紧跟最新版,最大的缺点是国内访问速度延迟高而且不稳定。

因为我还是喜欢比较容易地用上比较新的系统,所以选择了 Linode 的月付 $10 版本,2 GB RAM / 1 CPU / 50 GB SSD 的配置,对于个人的 WordPress 站是绰绰有余了(看了这个配置,表示不懂为什么国内普遍是 1M 小水管,哈哈)。还有机房位置我选择了 Fremont, CA,我原本觉得像是日本这样离得近的地区延迟会低一点,试了几个感觉网络的稳定性还是蛮差的。

Linode 2 GB RAM VPS 配置

国内服务器推荐

国内的服务器虽然带宽比较小,但是可以使用 CDN 进行弥补,而且由于国内延迟比较低,不存在被墙的风险,如果预算充足的话,还是比较推荐的。而且阿里云和腾讯云两家现在都推出了轻量应用服务器,相对于云服务器 ECS 虽然扩展性差了一些,但是也便宜一些,对于主页/博客这种个人小应用是再适合不过了。

至于阿里云和腾讯云选择哪家,网上应该也有一些横向的对比和测评,我没有详细用过两家产品,就不具体推荐哪一家了。对了,香港的机房通常要比内地的机房便宜一些(当然延迟也会高一些,但大概还是比国外的服务器低很多的),而且不需要备案,可以酌情考虑(不过最近好像存在线路严重劣化的问题,选择前请自行考察)。

国外服务器推荐

国外服务器选择比较多,Vultr,DigitalOcean,Linode 和 Bandwagon 这几家我都用过,其中除了 Bandwagon 是只能以月/半年/年为最小购买单位外(它大概也是最便宜的),其他的几家都是可以随开随停,用来测试比较方便。价格也都差不多,按道理选哪家都可以,不过 Vultr 和 DigitalOcean 国内用来搭梯子的人比较多,可能 IP 都被封的差不多了,记得要开好多才能碰到一个能用的,所以我选了 Linode。不过,Linode 需要能够国际支付的信用卡认证,可能对好多学生来说比较难搞定。那就可以考虑另外3家,都是可以使用银联绑定的 PayPal 进行支付,甚至 Vultr 和 Bandwagon 还支持支付宝。

WordPress 的安装与优化

像 Vultr,DigitalOcean 和 Linode 这几家都提供了一键安装 WordPress 功能,省去了大量繁琐的工作,但缺点就是不太灵活,比如 Linode 提供的 WordPress 一键安装是基于 LAMP 的,但我想安装一个基于 LEMP 的(性能会更好一些),就不得不自己手动安装了。当然,Linode 也提供了 LEMP 的一键安装,然而是基于 Debian 9 的,想用最新的 Debian 10 的我也就只能从头开始自己装了。

WordPress 的安装

关于在 Debian 10 上安装 LEMP,在 DigitalOcean 上有一个很好的教程:How To Install Linux, Nginx, MariaDB, PHP (LEMP stack) on Debian 10,这里就不再赘述了。同样在 Debian 10 上安装基于 LEMP 的 WordPress 可以参考 Ubuntu 18.04 的教程:How To Install WordPress with LEMP on Ubuntu 18.04,可以说是完全一样的步骤。不过还有一个教程里没有提到但是大多数人都会做的操作:增大上传文件的大小限制。默认的 2 MB 的上传大小限制对于想自行上传主题和插件的人是远远不够的,可以根据这个教程:Configuring Nginx and PHP 7 stack in Linux to increase or decrease file upload size limit 来增大上传文件的大小限制。

顺便说一下,在一个流行的 Linux 系统上安装某个流行的软件的教程可以去 DigitalOcean 和 Vultr 的 Docs 中寻找,它们的教程质量都比较高,因为会付给作者一笔不小的费用,如果有兴趣可以去投个稿试试(我就在经济比较窘迫的时候投过稿,尽管被拒了)。

WordPress 的优化

类似于执行 Python 产生的 .pyc 文件,我们可以使用PHP内建的 OPcache 将编译后的字节码缓存起来,避免重新编译,减少 CPU 和内存的开销。还可以使用 Nginx 的 Gzip 压缩功能,相当于传输前先在本地压缩,到了客户端再解压,由于网页文本文件压缩率很高,可以大幅度降低传输成本。

还有使用 Memcached 和 Batcache 进行缓存的方法,不过在我的实验中似乎与 WP Super Cache 插件有一些冲突,不知道是不是我的问题,有兴趣的可以探究一下。

开启 PHP 的 OPcache

只需要在 php.ini 中将 opcache 相关配置前的注释去掉,并且修改合适的值即可。可以参考下面的配置(来自人人都能学会的 WordPress 实战课 ):

opcache.enable=1
opcache.memory_consumption=256
opcache.max_accelerated_files=5000
opcache.revalidate_freq=240
opcache.revalidate_freq=0
opcache.save_comments=0

记得在修改之后重新启动 php-fpm 和 nginx。

开启 NGINX 的 Gzip 压缩

只需要在 nginx.conf 中将 gzip 相关配置前的注释去掉,并且修改一下即可,同样也可以参考下面的配置(来自人人都能学会的 WordPress 实战课):

gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_min_length 256;
gzip_http_version 1.1;

gzip_types text/plain text/css text/x-component text/html application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/x-icon image/svg+xml image/jpeg image/gif image/png font/opentype;

修改之后请重新启动 nginx 服务。

主题和插件的选择

主题选择

关于主题的选取我也纠结了有一段时间,其实中文的主题还是蛮少的,其中付费主题大多基本都是面向自媒体而非个人,普遍定价高且更新不够频繁,有的甚至都定到 700+ RMB,简直离谱;免费的主题也有一些,在 GitHub 上搜索“WordPress 主题”并且按照 star 数排序,基本就是目前主流的中文 WordPress 主题,也可以参考 v2ex 上的这个帖子:[记录贴] 个人觉得好看并且开源的 wordpress 主题

我就曾经用过 Sakura🌸: 樱花庄的白猫博客主题,真的很炫酷,各种特效插件满足了宅男对网站的全部幻想(?),但这也造成了它最大的问题,加载速度非常慢,不仅是需要传输大量的特效相关的代码,而且代码执行也会拖慢整个网站的速度,加上有些适配没有做好,经常会出现一些小问题。考虑到速度对于网站排名的影像,我就只好考虑更换其他的主题了。

Sakura 主题效果展示图

在搜索过程中,我发现 ThemeForest 上有着大量的付费主题,各种各类的主题一应俱全,有电商、博客、教育、娱乐等等,而且销量前几位都是有专业的团队在做,support 也比较到位。于是我挑了一个非常简洁的博客主题 Typology 买了下来。这个主题简洁大方,没有什么图片,加载速度也快,还是蛮对我的口味的,不过就是有点贵,$59。顺便说一下,淘宝上有卖这个主题的盗版,尽管这个主题没有和其他主题一样采取一网站一 key 的验证方式,我还是不推荐购买的,不仅侵犯了作者的权益,而且公开用在网站上恐怕也不会心安,老老实实在ThemeForest 上购买吧。

Typology 主题宣传图

可能有人会担心国外的主题在本土化方面存在很多问题,其实可以通过安装一些插件解决,例如使用 Loco Translate 插件对主题中的字符串进行翻译等。

插件的选择

Typology 主题在安装的时候会建议安装一些插件,我把没用的都卸载掉了,下面是我没有用到的插件。

Typology 主题建议安装但我未安装的插件

WordPress 会自带两个插件:Hello Dolly 和 Akismet Anti-Spam,其中 Hello Dolly 是个没啥用的插件,可以直接卸载掉,Akismet Anti-Spam 用来拦截垃圾评论还是不错的,我只保留了后者。

除此之外,我还安装了下面这些插件:

  • AMP:Google 的 Accelerated Mobile Pages,通过简化页面来加快移动端访问速度,对搜索排名有帮助;
  • Loco Translate:翻译插件,用来对主题和插件进行翻译,可以配合下面的多语言插件使用;
  • Polylang:多语言插件,我就为我的网站设置了两种语言(简体中文和英文),不过一定要注意语言的名称/代码和对应的国家或地区旗帜,最好不要用旗帜来区分语言;
  • Polylang Slug:由于在 WordPress 中文章和页面的别名不能相同,而别名直接与 URL 相关,使得使用 Polylang 创建多语言页面例如 about 页面时,/about 和 /en/about 无法同时出现,Polylang 提供了付费版本来解决这一问题,但是很贵,对于像我一样的穷学生也可以使用本插件来解决(请在 GitHub 中搜索,只是最近不怎么更新了,不知道能支持到什么时候);
  • Really Simple SSL:对 SSL 设定进行优化,修复混合协议的内容;
  • Smush:对上传图片大小进行压缩,并且提供 Lazy Load 功能;
  • UpdraftPlus:站点备份工具,可以自动定期备份到各种网络存储服务中;
  • Wordfence Security:非常全面的安全防护插件,定期安全检查,出现问题会发 E-mail 警告,可以用它设置黑名单,限制登录次数防止暴力破解,以及两步登陆验证等;
  • WP Fastest Cache:和 WP Super Cache 类似的页面缓存工具,不同之处在于本插件具有 Minify HTML/CSS/JS 代码的功能,不用再单独多安装一个插件了;
  • WP Statistics:站点统计插件,详细记录每个页面的访问数量,搜索引擎引用次数等等;
  • WP-Optimize:主要用来清理数据库垃圾,例如卸载插件后留下的数据库残留等,至于它的压缩图片和缓存页面等功能,已经有其他更好的替代品了,用不上;
  • Yoast SEO:非常好用的 SEO 优化插件,能够对每个文章每个页面提出优化建议,提高搜索排名必备。

SSL 证书的申请与 CDN 的设置

SSL 证书基本是现在网站的标配,没有 https 会对搜索排名影响比较大,看不到浏览器上的小绿锁会影响用户信任程度,而且也不安全。免费的证书有蛮多选择的,腾讯云和阿里云都可以免费申请有效期一年的免费 SSL 证书。除此之外,最有名的当属 Let’s Encrypt 了,可以通过它提供的 Certbot 很容易地申请到一个有效期为 3 个月的证书,当然 Cerbot 会调用 cron 之类的定时执行任务的服务,在快到期的时候自动 renew。

CDN 可以大大加快访问速度,提高网络的稳定性。国内通常将其分为静态资源加速和全站加速,静态资源加速就是将 CSS,JavaScript 和 图片小文件等缓存到各地网络节点中,将主站中这些静态资源的 URL 地址改为 CDN 地址,这样不仅降低了主站的负担,而且每个客户端可以在离自己最近的节点取得资源,加快了速度,提高了稳定性;全站加速就是把整个网站都套上一层 CDN,到时候只需要访问 CDN 地址即可,对于静态资源采取与静态资源加速相同的措施,对于动态资源的访问则是选择最佳路由回源。相比于静态资源加速,全站加速在速度上也并没有多少提高,但是在安全性上却高了很多,因为攻击者将很难得知主站的实际地址,也就很难侵入到源站中,而且 DDoS 攻击也会被 CDN 用某种机制处理掉。于是我采用了全站加速 CDN,试图 ping cuichen.cc 得到的也只是 CDN 的地址。

ping cuichen.cc 的结果

不过要注意的是,设置全站加速 CDN 的 https 时一定要设置好,保证源站也要可以通过 https 访问,不然可能会因为 CDN 想要访问源站的 http 资源,源站 http 却通过重定向设置跳到 CDN 的 https,从而出现重定向循环等奇葩问题。

新增评论