WordPress 静态化

WordPress 静态化

Created
Nov 17, 2019 3:47 PM

在朋友的推荐下并结合自己的实际情况,决定从以 node.js 为主的动态博客转向全站静态化。主要是原来 Ghost Blog 颜值高是高,但是并不是很稳定,升级容易炸。虽然这次操作是围绕着 WordPress 展开,但并不代表我会抛弃 Ghost Blog。因为如果使用静态化,在服务器上运行的博客实例作用就不承载访问需求,不会因为稳定性差造成最基本的访问问题,并且 Ghost Blog 也有了静态化工具,所以之后也许会尝试下它那个,再综合考虑下。

下面就以 WordPress 为例,介绍操作过程。

部署 WordPress 实例

你既可以将 WordPress 部署在云端,也可以部署在本地。因为实例只有生成静态页面的功能,不需要承担访问。下面就这两个典型的方法进行介绍。

部署在云端

这边我直接在 Ubuntu 上装的宝塔面板,不喜勿喷,我个人主要是以实现功能为主要目的。之后也会写一篇手动搭建简单网页的一个相对通用的教程。

具体安装方法非常简单,使用经典的 LNMP (Linux Nginx MySQL PHP) 就可以,这里我主要提一下这个宝塔面板部署时需要特别设置的几个点。

  1. 关闭防跨站攻击
  2. image
  3. 启用 伪静态,选择 wordpress 然后保存即可
  4. image
  5. 域名一定不要跟你博客的域名相同,因为这边只承担后台编辑的功能,访问不在这边

部署在本地

你可以使用 Windows 10 的 WSL 运行 Linux 子系统来实现和远程服务器相同的操作,这边不再赘述。我这边的话,使用的是群晖的 WordPress 套件,只需要简单设置一下密码等即可方便部署,快捷省事。

image

对网站静态化

  1. 插件商店里搜索 WP Super Cache,安装并启用
  2. 打开设置,选择 启用缓存功能 (推荐),并点击 更新
  3. image
  4. 高级 里,勾选 启用缓存,杂项 里选择 为所有访客启用缓存,并点击下方的 更新
  5. image
  6. 预缓存 里,刷新时间可以根据实际更新情况修改,然后点击 保存设置。之后请确保下面显示 取消预加载缓存,说明是有在工作的。
  7. image
  8. 稍等一会,换个还没登陆 WordPress 后台的浏览器,浏览网站,并打开一篇文章,查看 index.html 代码末尾,可以看到由 Super Cache 生成的静态页面标记注释,说明缓存已经生成成功。
  9. <!-- Cached page generated by WP-Super-Cache on 2019-11-18 00:17:32 -→
  10. 在 /<网站目录>/wordpress/wp-content/cache/supercache/<你的网址> 下即可找到缓存目录
  11. 在这边还需要对 OSS 的访问做一些准备,我们需要在主页的 html 文件的 header 里加入这句话,确保后面能够正确显示网页和跳转
  12. <script type="text/javascript">
        var targetProtocol = "https:";
        if (window.location.protocol != targetProtocol)
            window.location.href = targetProtocol +
                window.location.href.substring(window.location.protocol.length);
    </script>
    <script>
        if (window.location.pathname != '/' && window.location.pathname != '/index-https.html')
            window.location.href = window.location.href + "index-https.html";
    </script>
    

    后面可以通过修改主题或者安装插件自动在 header 里添加,这边临时操作一下。只需要在主页的 html 里添加即可。

配置 OSS 对象存储

这边以阿里云为例,其他的应该大同小异(除了 AWS 这种大厂喜欢搞的特别复杂)

创建 bucket

创建一个新存储桶专门存博客静态页面

image

这边有几个点提一下

区域,如果你的域名没有或者不能备案,不能选大陆区域,最快的是香港。

存储类型,之前我一直拿 OSS 做图床,选择 低频访问 感觉完全够用,所以博客访问量不大的话,我觉得可以考虑 低频访问,我这边没用过 标准存储,所以用这个试一下速度。

读写权限,选择公共读即可,因为后面我们往里面写文件是需要 key 的,不需要开放公共写权限。

其他保持默认。

挂载 bucket

为了方便将缓存的静态页面传输到 bucket 里,可以直接把 bucket 挂载到服务器上。

关于如何挂载 bucket,阿里云官方给了教程,可以参考这篇文章

快速安装_ossfs_常用工具_对象存储 OSS-阿里云

ossfs能让您在Linux系统中,将对象存储OSS的存储空间(Bucket)挂载到本地文件系统中,您能够像操作本地文件一样操作OSS的对象(Object),实现数据的共享。 ossfs基于s3fs构建,具有s3fs的全部功能。其中包括: 支持POSIX文件系统的大部分功能,包括文件读写、目录、链接操作、权限、uid/gid、以及扩展属性(extended attributes)。 使用OSS的multipart功能上传大文件。 支持MD5校验,保证数据完整性。 由于低版本的Linux系统内核版本比较低,ossfs进程在运行过程中容易出现掉线或者其他问题。因此建议您将操作系统升级到CentOS 7.0或者Ubuntu 14.04及以上版本。 下载安装包。 以下载CentOS 7.0 (x64)版本为例: wget http://gosspublic.alicdn.com/ossfs/ossfs_1.80.6_centos7.0_x86_64.rpm 安装ossfs。 Ubuntu系统的安装命令: sudo apt-get update sudo apt-get install gdebi-core sudo gdebi your_ossfs_package CentOS6.5及以上系统版本的安装命令: sudo yum localinstall your_ossfs_package 说明 对于使用yum安装rpm包的客户端,如果客户端节点网络环境特殊,无法直接用yum下载依赖包。可以在网络正常的、相同版本操作系统的节点上,使用yum下载依赖包并拷贝到网络特殊的节点。例如,ossfs需要依赖fuse 2.8.4以上版本,可使用如下命令,下载yum源中最新的fuse到本地: sudo yum install --downloadonly --downloaddir=./ fuse 如果需要下载其他依赖包,则将fuse换成对应包的名称。 CentOS5系统版本的安装命令: sudo yum localinstall your_ossfs_package --nogpgcheck 配置账号访问信息。 将Bucket名称以及具有此Bucket访问权限的AccessKeyId/AccessKeySecret信息存放在/etc/passwd-ossfs文件中。注意这个文件的权限必须正确设置,建议设为640。 echo my-bucket:my-access-key-id:my-access-key-secret > /etc/passwd-ossfs chmod 640 /etc/passwd-ossfs 将Bucket挂载到指定目录。 ossfs my-bucket my-mount-point -ourl=my-oss-endpoint 挂载示例:将杭州地域名称为 bucket-test的Bucket挂载到/tmp/ossfs 目录下。 echo bucket-test:LTAIbZcdVCmQ****:MOk8x0y9hxQ31coh7A5e2MZEUz**** > /etc/passwd-ossfs chmod 640 /etc/passwd-ossfs mkdir /tmp/ossfs ossfs bucket-test /tmp/ossfs -ourl=http://oss-cn-hangzhou.aliyuncs.com 注意 如果您使用从阿里云购买的云服务器(ECS)来提供ossfs服务,您可以使用内网域名,在这个示例中您可以将OSS endpoint 改为 oss-cn-hangzhou-internal.aliyuncs.com,这样可以节省流量费用。OSS的内网域名请参考 访问域名和数据中心 。 如果您不希望继续挂载此Bucket,您可以将其卸载。 版本日志信息,请参考 GitHub ChangeLog 。

这里有两个地方提一下

  1. Ubuntu 请开启 root 账号并执行命令,不然 echo > 那个即便用 sudo 也没有权限,我也不是太懂 Linux 的权限,可能 sudo chown <用户名>:<用户名> 就好了?反正我也没试,直接 su root 操作了。
  2. 然后就是
  3. ossfs my-bucket my-mount-point -ourl=my-oss-endpoint

    这里的 my-oss-endpoint 一定不要带上你自己的存储桶名称,比如你 bucket 域名是 xxx.oss-cn-hongkong.aliyuncs.com,那你就写 https://oss-cn-hongkong.aliyuncs.com

bucket 设置

回源设置(可不做)

有时可能生成的缓存会丢东西,这时需要回源取。基础设置 - 镜像回源,类型选择镜像,然后地址填一下。地址其实这时你还不知道填什么,你需要配置好后观察下地址。

静态页面

默认首页设置为 index-https.html,因为缓存工具默认生成的就是这个文件名,如果你改过,记得对应改一下。

image

添加域名

域名管理 - 绑定用户域名。这边如果你用的大陆区域的存储桶,没在阿里云备案的域名是用不了的。添加好后,别忘记添加 https 证书。

应用静态页面

服务器挂载好存储桶后,你需要复制生成的静态文件到存储桶的目录下。即保证 /<网站目录>/wordpress/wp-content/cache/supercache/<你的网址> 这个目录下(不是这个文件夹本身)的内容和挂载的存储桶根目录(默认是 /tmp/ossfs)下的内容是一致的。其实这边可以写个计划任务。

之后访问域名即可打开网页。

测个速,挺好。

image