搭建可供局域网访问的wordpress站点

旨在部署可供局域网下访问的 wordpress 站点,可用于存储一些笔记、博客等

0. 部署所需环境

2024年2月28日 官网需求

运行系统:Win11 22H2

  • PHP 7.4+
  • MySQL 5.7+ or MariaDB 10.3+
  • Apache or Nginx

1. Install PHP

官网下载地址

示例使用版本为:VS16 x64 Thread Safe (2024-Feb-13 23:36:38)

  1. 下载 php 安装文件压缩包
  2. 解压压缩包并移动到想要安装的位置
  3. 修改配置文件:将安装文件夹中的 php.ini-development(开发) 或 php.ini-production(产品) 复制一份并重命名为 php.ini
  4. 开启 mysqli 扩展:启用 3 中 php.ini 文件中的 ;extension=mysqli ,即去除注释符号 ;,其他扩展可酌情开启
  5. 修改扩展目录:修改 3 中 php.ini 文件中的 extension_dir 条目,一般设置为 phpinstallpath/ext,即解压出来的目录中的 ext 子目录的路径
  6. php 路径添加到系统环境变量
  7. 验证安装成功:在命令行输入 php -v ,若输出正常版本信息则证明安装成功
1
2
3
4
>> php -v
PHP 8.3.3 (cli) (built: Feb 13 2024 23:17:12) (ZTS Visual C++ 2019 x64)
Copyright (c) The PHP Group
Zend Engine v4.3.3, Copyright (c) Zend Technologies

2. Install MySQL

官网下载地址

示例使用版本为:8.0.36 Microsoft Windows Windows (x86, 64-bit), ZIP Archive

  1. 下载 mysql 安装文件压缩包
  2. 解压压缩包并移动到想要安装的位置
  3. 创建配置文件:在安装文件夹中创建名为 my.ini 的配置文件,在文件中写入如下内容,并修改 basedirdatadir 条目,其他条目可根据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
[mysqld]
# 设置3306端口
port=3306
# 设置mysql的安装目录
basedir=D:\mysql-8.0.23-winx64
# 设置mysql数据库的数据的存放目录,这个data目录不用手动创建,会在后面初始化的时候自动创建
datadir=D:\mysql-8.0.23-winx64\data
# 允许最大连接数
max_connections=200
# 允许连接失败的次数。这是为了防止有人从该主机试图攻击数据库系统
max_connect_errors=10
# 服务端使用的字符集默认为UTFMB4
character-set-server=utf8mb4
# 创建新表时将使用的默认存储引擎
default-storage-engine=INNODB
# 默认使用“mysql_native_password”插件认证
default_authentication_plugin=mysql_native_password
[mysql]
# 设置mysql客户端默认字符集
default-character-set=utf8mb4
[client]
# 设置mysql客户端连接服务端时默认使用的端口
port=3306
default-character-set=utf8mb4
  1. 将 mysql 路径中的 bin 子目录添加到系统环境变量
  2. 以管理员身份打开命令行,移动到 mysql 路径中的 bin 子目录下,输入
    mysqld --initialize –console 进行初始化,成功后会显示初始初始密码,后面需要使用
    如果输入命令后除了增加data文件外无返回,可以尝试输出
    mysqld --no-defaults --initialize --console ,基本会正常输出
  3. 在命令行输入 mysqld --install mysql 进行安装,输出 Service successfully installed. 即表示安装成功
  4. 在命令行输入 net start mysql 启动 mysql 服务
  5. 在命令行输入 mysql -u root -p 进入 mysql ,在 Enter password: 后输入 5 中初始化的密码
  6. 在数据库中输入 alter user 'root'@localhost identified by '123456' 进行密码修改,将其中 123456 替换为要设置的密码,这里只是示例
  7. 在数据库中输入 quit 退出,再次使用 mysql -u root -p 进入数据库,如果新设置的密码可以成功进入,则表示密码设置成功
  8. 为 wordpress 创建专用的用户与数据库,并赋予对专用数据库的所有权限
1
2
3
4
5
6
7
8
9
10
11
# 创建新的用户,这里@'localhost'指定了用户可以从本地主机连接。如果需要该用户能够从任何主机连接,可以将localhost替换为'%'
CREATE USER 'new_user'@'localhost' IDENTIFIED BY 'password';

# 创建新的数据库
CREATE DATABASE new_database;

# 为用户赋权
GRANT ALL PRIVILEGES ON new_database.* TO 'new_user'@'localhost';

# 刷新权限
FLUSH PRIVILEGES;

3. Install Nginx

官网下载地址

示例使用版本:nginx/Windows-1.24.0

  1. 下载 nginx 安装文件压缩包
  2. 解压压缩包并移动到想要安装的位置
  3. 将 nginx 安装路径添加到系统环境变量
  4. 在命令行移动到 nginx 安装路径,运行 nginx(添加完环境变量后应该可以在任意位置运行)
  5. 可以使用 tasklist /fi "imagename eq nginx.exe" 命令查看 nginx 的任务进程是否存在,或者直接在任务管理器中查看
  6. 打开浏览器,输入 localhost (默认端口80),如果出现 nginx 的欢迎界面即表示安装成功
  7. 修改配置文件:nginxinstallpath/conf 路径下的 nginx.conf 是 nginx 的配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
# # # nginx.conf 配置文件详解
#user nobody;
#==工作进程数,一般设置为cpu核心数
worker_processes 1;
# 日志文件路径,做好修改一下,以防止日志写入造成的错误
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;

events {
#==最大连接数,一般设置为cpu*2048
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
#==客户端链接超时时间
keepalive_timeout 65;
#gzip on;
#当配置多个server节点时,默认server names的缓存区大小就不够了,需要手动设置大一点
server_names_hash_bucket_size 512;
#server表示虚拟主机可以理解为一个站点,可以配置多个server节点搭建多个站点
#每一个请求进来确定使用哪个server由server_name确定
server {
#站点监听端口
listen 8800;
#站点访问域名
server_name localhost;
#编码格式,避免url参数乱码
charset utf-8;
#access_log logs/host.access.log main;
#location用来匹配同一域名下多个URI的访问规则
#比如动态资源如何跳转,静态资源如何跳转等
#location后面跟着的/代表匹配规则
location / {
#站点根目录,可以是相对路径,也可以使绝对路径
root html;
#默认主页
index index.html index.htm;
#转发后端站点地址,一般用于做软负载,轮询后端服务器
#proxy_pass http://10.11.12.237:8080;
#拒绝请求,返回403,一般用于某些目录禁止访问
#deny all;
#允许请求
#allow all;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
#重新定义或者添加发往后端服务器的请求头
#给请求头中添加客户请求主机名
proxy_set_header Host $host;
#给请求头中添加客户端IP
proxy_set_header X-Real-IP $remote_addr;
#将$remote_addr变量值添加在客户端“X-Forwarded-For”请求头的后面,并以逗号分隔。 如果客户端请求未携带“X-Forwarded-For”请求头,$proxy_add_x_forwarded_for变量值将与$remote_addr变量相同
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#给请求头中添加客户端的Cookie
proxy_set_header Cookie $http_cookie;
#将使用代理服务器的主域名和端口号来替换。如果端口是80,可以不加。
proxy_redirect off;
#浏览器对 Cookie 有很多限制,如果 Cookie 的 Domain 部分与当前页面的 Domain 不匹配就无法写入。
#所以如果请求 A 域名,服务器 proxy_pass 到 B 域名,然后 B 服务器输出 Domian=B 的 Cookie,
#前端的页面依然停留在 A 域名上,于是浏览器就无法将 Cookie 写入。

   #不仅是域名,浏览器对 Path 也有限制。我们经常会 proxy_pass 到目标服务器的某个 Path 下,
#不把这个 Path 暴露给浏览器。这时候如果目标服务器的 Cookie 写死了 Path 也会出现 Cookie 无法写入的问题。
#设置“Set-Cookie”响应头中的domain属性的替换文本,其值可以为一个字符串、正则表达式的模式或一个引用的变量
#转发后端服务器如果需要Cookie则需要将cookie domain也进行转换,否则前端域名与后端域名不一致cookie就会无法存取
       #配置规则:proxy_cookie_domain serverDomain(后端服务器域) nginxDomain(nginx服务器域)
proxy_cookie_domain localhost .testcaigou800.com;
#取消当前配置级别的所有proxy_cookie_domain指令
#proxy_cookie_domain off;
#与后端服务器建立连接的超时时间。一般不可能大于75秒;
proxy_connect_timeout 30;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
  #当需要对同一端口监听多个域名时,使用如下配置,端口相同域名不同,server_name也可以使用正则进行配置
  #但要注意server过多需要手动扩大server_names_hash_bucket_size缓存区大小
  server {
    listen 80;
    server_name www.abc.com;
    charset utf-8;
    location / {
      proxy_pass http://localhost:10001;
    }
  }
  server {
    listen 80;
    server_name aaa.abc.com;
    charset utf-8;
    location / {
      proxy_pass http://localhost:20002;
    }
  }
}
  1. 为 wordpress 创建服务,在配置文件的 http 块中添加下列内容,最好将全局的日志文件的路径也修改一下,使用绝对路径防止出错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
# wordpress 站点对外访问端口
listen 88;
# nginx服务块名称,用以匹配服务块,可以修改为 wordpress 站点的域名,局域网也可以修改为ip地址,用空格对多个地址进行分割
server_name localhost;
client_max_body_size 100M;

# 设置为后面wordpress的安装路径,特别注意,如果路径中有空格,就要将路径用引号括起,因为空格在当前配置中的作用是分隔两个参数
root "D:/Program Files/wordpress";
index index.php index.html index.htm;

location / {
try_files $uri $uri/ /index.php?$args;
}

location ~ \.php$ {
# 用于 PHP-FPM 进程监听使用,以便与 PHP 进行通讯
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}

4. Install wordpress

官网下载地址

示例使用版本为:wordpress 6.4.3

  1. 下载 wordpress 安装文件压缩包
  2. 解压压缩包并移动到想要安装的位置,也就是后面站点的源文件路径
  3. 修改配置文件:复制 wp-config-sample.php ,并将副本修改文件名为 wp-config.php
  4. 修改配置文件中与数据库连接、网络地址有关的条目
1
2
3
4
5
6
7
8
/** The name of the database for WordPress */
define( 'DB_NAME', 'wordpressdb' );
/** Database username */
define( 'DB_USER', 'wordpressuser' );
/** Database password */
define( 'DB_PASSWORD', 'wordpresspassword' );
/** Database hostname */ // 数据库相对于wordpress的访问地址,如果数据库与wordpress在同一机器,使用 localhost 访问即可
define( 'DB_HOST', 'localhost' );
  1. 根据 5. run wordpress 的步骤启动站点服务,在网页中会提示各种安装需求,如果前面的设置有误,可以根据提示进行修正,在所有条件满足后,点击安装,等待安装完毕(时间不长,示例操作时小于1分钟)
  2. 安装完成后会跳转到账户注册界面,完成注册
  3. 注册完成后会跳转到仪表盘界面,如果一些功能都能正常使用,页面可以正常跳转,就表示 wordpress 初始站点部署完毕

5. run wordpress

在本文示例的俺咋混个方式中运行 wordpress 站点需要启动两个服务

  1. PHP-FPM 监听程序:用于与 PHP 通讯,在命令行运行下面的命令,其中的地址是在 nginx 配置文件相应服务块中的 fastcgi_pass 参数,务必要与其一致,否则无法正常通信,页面会无法访问
1
php-cgi.exe -b 127.0.0.1:9000
  1. nginx 服务:用于站点源文件的前端展示,在命令行运行下面的命令启动 nginx 服务,并手动指定配置文件。原因是 nginx 启动时会在默认位置查找配置文件,windows 系统下的默认路径为 C:\nginx\conf\nginx.conf ,如果安装的路径与这个路径不同,就需要手动指定配置文件的路径
1
nginx -c D:\nginxinstallpath\conf\nginx.conf
  1. 在浏览器输入访问地址以访问 wordpress 站点页面,示例使用 http://localhost:88

6. 待解决问题

问题一:目前存在一个问题,就是使用 localhost 部署页面,使用局域网地址访问,只能访问到主界面,跳转其他界面都会回到以 localhost 为地址的页面,非本机器无法访问,需要手动修改 localhost 为站点的局域网地址

(在固定IP的服务器的优势不仅是随时随地访问,还有网络位置不变~~~)

方法一:

  1. 在 wordpress 仪表盘中设置站点地址为局域网地址,(最好启用一个插件,名为Velvet Blues Update URLs,作用是自动替换所有页面的地址为新地址,未独立验证效果)当切换页面时,默认的localhost就会变成设置的局域网地址
  2. 弊端:当站点在局域网下的地址更换时,需要再次修改

方法二(不推荐):

  1. 在hosts文件中添加一个局域网地址对应的条目,使用该条目设置 wordpress 地址,可以不用每次修改设置,到哪需要修改hosts文件
  2. 弊端:在访问端也需要设置hosts文件,且频繁修改不安全容易污染网络环境

问题二:对 markdown 与 latex 的支持不太好,不能导入 markdown 文件直接得到文章

方法:有插件支持 markdown 语法,也有插件支持 latex 公式渲染,但和本地的 typora 支持还是有所欠缺

(这方面,hexo 更适用,可以通过 markdown 文件直接生成相应的静态文件,且对公式的支持也还可以)

相关的插件有:

  1. WP Markdown Editor:这是一个允许你在WordPress中使用Markdown编辑器的插件。虽然它本身不支持LaTeX公式,但你可以配合其他插件使用,比如下面的插件。
  2. Jetpack by WordPress.com:Jetpack是WordPress官方提供的一款功能强大的插件,它包含了许多功能模块。其中的Markdown模块可以让你在编辑文章时使用Markdown语法,而且它还可以支持LaTeX公式的显示。
  3. WP GitHuber MD:这是另一个支持Markdown语法的插件,它提供了丰富的Markdown编辑功能,并且支持LaTeX公式。
  4. WP QuickLaTeX:虽然它不是一个Markdown编辑器,但它可以让你在文章中使用LaTeX语法编写数学公式,并且能够实时渲染显示。
  5. WP KaTeX:类似于WP QuickLaTeX,WP KaTeX是一个用于在WordPress文章中渲染LaTeX公式的插件。它提供了一个简单的短代码来插入LaTeX公式,并且支持实时预览。