Wordpress 生成静态文件并部署到 Github

本站目前所使用的是 Wordpress & Github 相结合的方式. 其原理是利用 Wordpress 相关插件 Simply Static 生成网站的静态文件然后推送到 Github.

为什么?

简而言之, 即能享受 Wordpress 的各种便利与丰富多彩, 同时也拥有静态网站 BiuBiuBiu 的速度. Wordpress 有各种各样的插件, 丰富的主题, 与 Mathjax 的兼容性等等等.虽然在服务器上使用缓存插件或者静态化插件能达到近乎同样的目的. 但是使用服务器要花钱, 惧怕 DDS 攻击, 需要自己维护等缺点. 另外使用静态博客可以同时部署到 Github 和 Coding, 并使用分流, 将国外的读者导向 Github, 国内的导向 Coding.

安装 XAMPP

下载 XAMPP, 然后直接安装(请记住安装目录). 如果装过 Hexo 等所需要的程序可能会提示

这是因为端口被占用了, 所以只需要更改一下端口即可. 在如下文件 xampp/apache/conf/httpd.conf 中, 把 80 改成 8080, 把 443 改成 4433 即可(别的数字也行).

本地安装 Wordpress

下载 Wordpres. 解压缩以后将 wordpress 文件夹复制到xampp\htdocs 目录下. 然后浏览器打开 localhost/phpmyadmin/ (如果修改了端口则为 localhost:8080/phpmyadmin/, 同下), 点击 新建 然后输入 新数据库名, 最后点击 创建 即可.

浏览器打开 localhost/wordpress/, 在 数据库名 处输入你刚才新建的数据库的名字, 用户名用 root, 密码 使用默认密码为空, 点击提交进入下一步.


无脑输出各种选项就好, 最好修改默认的 密码, 默认的组件不能发送邮件, 所以万一忘记密码可能麻烦一点.

优化 Wordpress

安装主题和插件我就不多说了, 不过最好记得在 设置->固定链接 更改成简短一点的固定链接. Wordpress 默认输出的头部有一大堆无关紧要的代码, 我们需要移除一下(我们并不需要优化 Wordpress 的性能, 只用优化其 HTML 输出文件). 将如下代码添加至主题的 functions.php 里面 (紧跟 ?php) 之后另起一行.

如果对主题的修改不多, 并且希望使用新版本的主题的话, 建议对应的插件. 使用 Wordpress 时大家怕插件多了导致程序运行缓慢, 但是我们无须担心. 因此多装点插件无所谓. 建议安装如下插件:

  • Disable Embeds, 这部分其实也可以按照上面使用代码的方法禁止, 用插件更方便.
  • Disable Emojis, 去掉头部将近 20 行代码, 还可以避免读取 s.w.org.
  • Disable Feeds, 这个就各取所需了, 貌似新版本会出现许多小的 Feed 文件, 一怒之下禁了.
  • Disqus Conditional Load 或者 Disqus 或者 多说, 毕竟是静态, 评论还是要解决的.
  • Yoast SEO, 利于 SEO, 貌似并不能生成实体的 Sitemap.
  • Autoptimize, 墙裂推荐. 一般情况我们安装的插件越多, 就会有更多的 JSCSS 文件请求. 该插件可以在一定程度上合并和压缩 JSCSS 文件, 减少了请求数. 同时也压缩 HTML 输出文件, 极大地提升了速度.
  • Crayon Syntax Highlighter, 用于代码高亮, 我使用的就是这个插件.

搜索与统计

添加统计代码与 TypechoHexo, 没啥区别, 可以参考 Typecho 零基础新手教程, Hexo 优化与定制(一). 至于添加搜索, 使用 Google 或者 Baidu 的自定义搜索(站内搜索) 当然不错, 但是浏览我的网站的人只有一半是国内的, 所以两者都不太可取. 我选择了 Swiftype, 具体的可以参考 利用swiftype为hexo添加站内搜索v2.0Hexo 优化与定制(二). 为了与主题更契合, 我们需要做一点修改. 在 Swiftype 后台里, 先后点击 Install Search -> Search FieldAdd a Search Field, 作如下修改.


其中 Class Name 填什么, 参考下图. 首先浏览网站, 通过查看网站源代码的方式看 input 对应的 class 是什么. 然后在 Swiftype 里多加一个点即可.

输出静态文件并部署至 Github

安装插件 Simply Static, 其设置如下图.


如果你跟我一样是从 Hexo 转过来的话, 可以把生成的文件放在 HexoPublic 文件夹里(我这么做是因为我对 Github 不熟, 取巧了). 另外我同时部署到 Github 和 Coding, 采取了分流的方式.

Hexo 根目录下的 _config.yml 文件设置如下.

需要注意如下事项:

  • 需要手动把 wp-content/uploads 文件夹复制到静态文件夹对应目录里.
  • 如果显示生成了多于一个 301 文件(3xx Redirection), 那么需要手动修改该文件的源代码, 否则该页面将无限循环重定向自己.其中 4xx Client Error 一般是 wp-content/uploads 里的文件.

后记

演示: 本站就是.
缺点: 换电脑不方便, 发表文章方式略繁琐, 静态文件生成慢不适合文章多的网站等等等, 个人博客用足以.

Leave a Reply

Your email address will not be published. Required fields are marked *