由于一直没有正儿八经的弄过一个博客,一些笔记啊乱七八杂之类的东西都是存放在 OneNote 里,借此机会正好也记一下这个博客的搭建方式。
选用 WordPress 的原因是...懒得折腾了。考虑过其他的博客框架,要么太麻烦,要么自带的主题不够喜欢...,本着不多折腾的想法所以就这样了。
搭建过程中,搜集了一些资料,这里已经设置好对应的缓存加速和压缩设置,降低服务器 cpu 和带宽的压力。
如果是选用的国内云服务器,需要做好备案的相应工作。省事点的话直接香港VPS(CN2 线路?)。毕竟小博客整个玩玩就好了,没必要上配置多高的云服务器。
省钱省事点的话,可以使用云虚拟主机,这里比较推荐 SiteGround 吧,毕竟可以省去备案之类的麻烦事。当然还有其他免费的方案,Hexo、Jekyll 等只需要有个 GitHub 账号就行。
准备工作
- 一台 VPS(最好 2G 以上吧)
- 一个域名
首先是添加域名解析,记录类型为 A
,主机记录为 @
,记录值为主机的 IP
,http 情况下,域名这一块就可以不用管了。
如果需要 https ,需要先去申请个证书,这里推荐 KeyManager ,主要是下发速度挺快的。
搭建步骤
以 CentOS 7 为例:
安装 宝塔面板
详细信息可以移步官网。(可以省下安装其他所需要到的东西所浪费的时间)
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
安装好宝塔面板后,在 web 界面安装所需工具:
- Nginx (这里选择
openresty
版本,因为已经集成了所需要的模块,如果需要用到brotli
模块,这里暂时可以不安装) - MYSQL (MariaDB)
- PHP-7.4 (同时安装 php 扩展,opcache、redis)
- PhpMyAdmin-5.0
- Redis-5.0
(Redis
这里其实可选 Memcached
,不过并没有做对比测试)
安装 brotli 模块 (注意:brotli 需要 https 环境):
cd /www/server git clone https://github.com/bagder/libbrotli cd libbrotli ./autogen.sh ./configure make && make install
下载 ngx_brotli 模块及其依赖:
cd /www/server git clone https://github.com/google/ngx_brotli.git cd ngx_brotli git submodule update --init
安装(重新安装)Nginx(openresty)
在 /www/server/panel/install/nginx.sh
文件下找到 ./configure
字段后面添加:--add-module=/www/server/ngx_brotli
,然后使用命令安装 Nginx(openresty):
sh /www/server/panel/install/nginx.sh install openresty
在 宝塔面板
- Nginx 设置
- 配置修改
- http{}
内添加:
brotli on; brotli_comp_level 6; brotli_buffers 16 8k; brotli_min_length 20; brotli_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml text/xml application/json image/svg application/font-woff application/vnd.ms-fontobject application/vnd.apple.mpegurl image/x-icon image/jpeg image/gif image/png image/bmp; brotli_static always; brotli_window 512k;

添加网站所需数据:
添加数据库
数据库
- 添加数据
- 输入库名 用户名 密码 其他都为默认

添加站点
网站
- 添加站点
- 输入域名, wwwroot
下新建一个目录 其他都为默认

Redis 缓存设置
网站 - 设置 - 配置文件 - 输入参数
# 顶部添加
upstream redis { server 127.0.0.1:6379; keepalive 512; }
# server 内添加
set $skip_cache 0; if ($request_method = POST) { set $skip_cache 1; } if ($query_string != "") { set $skip_cache 1; } if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml") { set $skip_cache 1; } if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in") { set $skip_cache 1; } location /redis-fetch { internal ; set $redis_key $args; redis_pass redis; } location /redis-store { internal ; set_unescape_uri $key $arg_key ; redis2_query set $key $echo_request_body; redis2_query expire $key 14400; redis2_pass redis; } location ~ .*\.(php|php5)?$ { set $key "nginx-cache:$scheme$request_method$host$request_uri"; try_files $uri =404; srcache_fetch_skip $skip_cache; srcache_store_skip $skip_cache; srcache_response_cache_control off; set_escape_uri $escaped_key $key; srcache_fetch GET /redis-fetch $key; srcache_store PUT /redis-store key=$escaped_key; more_set_headers 'X-Cache $srcache_fetch_status'; more_set_headers 'X-Store $srcache_store_status'; fastcgi_pass unix:/dev/shm/php-cgi.sock; fastcgi_index index.php; include fastcgi.conf; } location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|ico)$ { expires 30d; access_log off; } location ~ .*\.(js|css)?$ { expires 7d; access_log off; }
浏览器输入域名并打开网站(http 或者 https,最好在之前的域名解析里设置好 https 证书的解析)。
打开 wordpress 站点,输入数据库与账号相关数据,安装并启用插件:
- redis object cache
- redis page cache (对象缓存和页面缓存两者不冲突)
- nginx helper (Caching Method 选择 Redis cache)
其他推荐插件:
- Yoast SEO
- Duplicate Post
- Insert Headers and Footers
伪静态设置
wordpress 站点 - 设置 - 固定链接 - 自定义结构 最后面添加 .html
,/%category%/%post_id%.html
(前缀根据自己需求更改,注意.html
前面没有/
)
宝塔面板 里 网站 - 网站名 - 伪静态 添加设置
# -------------------- # 伪静态化重定向规则开始 # -------------------- location / { try_files $uri $uri/ /index.php?$args; } # ------------------- (伪静态化重定向规则结束)

转换 webp 设置
尝试过使用 lua 的配置方法,但是达不到自己的要求,所以改成了搭配插件的形式。
安装插件 webp express
在 宝塔面板 的 PHP 设置 - 禁用函数 里删除 exec

宝塔面板 里 网站 - 网站名 - 伪静态 添加设置
# WebP Express rules # -------------------- location ~* ^/?wp-content/.*\.(png|jpe?g)$ { add_header Vary Accept; expires 365d; if ($http_accept !~* "webp"){ break; } try_files /wp-content/webp-express/webp-images/doc-root/$uri.webp $uri.webp /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content ; } # Route requests for non-existing webps to the converter location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ { set $test "${test}A"; try_files $uri /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content ; } # ------------------- (WebP Express rules ends here)

插件的设置页里确保红框内执行生效,其他的都为默认的就行,然后保存设置。
结束
按照步骤来到这里为止,设置的其实已经差不多了,优化效果方面个人还算满意。另外还可以添加CDN之类的设置,有兴趣的话可以额外搞一下。
主题甚得我心,可惜太穷了买不起?
@Jack: 推荐在themeforest里翻翻,有很多不错的主题的,国内的话WP主题貌似都偏贵,typecho的相对便宜点。
博主用的是什么主题感觉还不错
@柒: nicetheme的cosy