架设思想:使用国外服务器,将子域名news.example.com用作wordpress,配置完成以后使用certbot一键申请ssl证书并开启自动续期,同时使用Hide My WP进行站点后台伪装。然后修改WP文件,做一个API。
这篇文章分成几个章节来介绍:
一、准备工作:选择一家ISP;
二、LEMP基础配置,用于nginx代理和wordpress业务;
三、wordpress站点安装和配置;
四、安装certbot申请ssl证书完成配置。
一、准备工作:选择一家ISP
此案例使用Vultr的5刀一个月的1核1G洛杉矶线路Ubuntu 18.04 x6主机,如果你要用同样的话,可以顺便点下图,使用我的图片邀请链接注册,帮我贡献一个邀请任务,谢过:
对了,有个50美金的优惠券,不知道你看到的时候还有没有效:https://www.vultr.com/?ref=8152414-4F 这羊毛不薅白不薅。
下载并打开electerm
,https://github.com/electerm/electerm/releases 这是一个开源免费的SSH连接服务器工具,用于服务器管理。下载解压后,点击左边菜单列表中的齿轮图标(设置)
–书签
–新建书签
,主机地址
填入您的服务器IP,用户名
填入root,点击密码
,粘贴实例面板中的密码。点击最下方的保存并连接即可连接到此服务器。
服务器连接成功后,会显示如下页面:
Welcome to Ubuntu 18.04.3 LTS (GNU/Linux 4.15.0-66-generic x86_64)
* Documentation: https://help.ubuntu.com
* Management: https://landscape.canonical.com
* Support: https://ubuntu.com/advantage
System information as of Thu Dec 6 09:08:18 UTC 2019
System load: 0.0 Processes: 81
Usage of /: 9.3% of 24.55GB Users logged in: 0
Memory usage: 12% IP address for ens3: 124.248.166.31
Swap usage: 0%
59 packages can be updated.
28 updates are security updates.
root@vultr:~#
别忘了,域名或二级域名A记录指向服务器公网ip。
二、LEMP基础配置,用于nginx代理和wordpress业务
WordPress需要一个Web服务器,一个数据库和PHP才能正常运行。所以需要设置LEMP堆栈(Linux,Nginx,MySQL和PHP),同时,Nginx也会用于让服务器支持wordpress。
注意,如果是使用root账号不用加sudo,非root账号才需要加sudo。
开始安装配置Nginx Mysql php certbot吧!
sudo add-apt-repository ppa:certbot/certbot
sudo apt update
sudo apt install nginx mysql-server-5.7 php-fpm php-mysql php-curl php-gd php-intl php-mbstring php-soap php-xml php-xmlrpc php-zip python-certbot-nginx -y
配置mysql
sudo mysql_secure_installation
sudo mysql
添加一个数据库的root账户密码,记得修改代码中的password为你的密码。
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
使之生效
FLUSH PRIVILEGES;
新建一个数据库用于wordpress,wordpress改成你要的名字
CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
新建该数据库的管理员账号,wordpress改成你的数据库名,wordpressuser改成你想要的管理员名,password改成你的数据库密码
GRANT ALL ON wordpress.* TO 'wordpressuser'@'localhost' IDENTIFIED BY 'password';
FLUSH PRIVILEGES;
退出mysql
exit
配置php和nginx
新建一个Vhost文件并进行配置,example.com改成你的主域名
sudo nano /etc/nginx/sites-available/example.com
按以下配置设置Vhost文件,按上下键选择修改,完成后按 ctrl+o 再按 enter 确认修改,要退出的话按 ctrl+x
#不罗嗦,先把反向代理写好了。
server {
#example.com改成你要设置的wordpress目录
root /var/www/example.com;
index index.php index.html index.htm index.nginx-debian.html;
#example.com改成你的主域名
server_name example.com;
location = /favicon.ico { log_not_found off; access_log off; }
location = /robots.txt { log_not_found off; access_log off; allow all; }
location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
expires max;
log_not_found off;
}
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
}
location ~ /\.ht {
deny all;
}
listen 80;
}
example.com改成你的主域名
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
测试nginx是否有错,如果有错根据提示修改。
sudo nginx -t
重新载入nginx
sudo systemctl reload nginx
重启php
sudo systemctl restart php7.2-fpm
三、wordpress站点安装和配置
在临时目录下载wordpress压缩包
cd /tmp
curl -LO https://wordpress.org/latest.tar.gz
解压缩
tar xzvf latest.tar.gz
将模板复制并改名为正式的配置文件
cp /tmp/wordpress/wp-config-sample.php /tmp/wordpress/wp-config.php
将临时目录的wordpress复制到你的网站目录,example.com改成你的主域名
sudo cp -a /tmp/wordpress/. /var/www/example.com
指定权限
sudo chown -R www-data:www-data /var/www/example.com
生成一段salt用于wordpress安装
curl -s https://api.wordpress.org/secret-key/1.1/salt/
打开wordpress配置文件,在相应字段填入你的数据库、用户名、密码、salt
sudo nano /var/www/example.com/wp-config.php
好,现在访问你的主域名,在网页上配置你的wordpress。
如果想要https,需要继续往下配置ssl。
四、安装certbot申请ssl证书完成配置
使用Certbot自动完成SSL证书申请和配置,Certbot会自动修改你的nginx配置文件,替换example.com和forum.example.com为你的域名和二级域名。
sudo certbot --nginx -d example.com
按照英文的提示配置吧。
完成以后进入下一步。
证书使用周期有限,需要设置certbot自动续约证书:
sudo certbot renew --dry-run
配置WP
改主题
现在您可能会想要自定义您的页面主题。WP提供了无数的开发者免费开发的主题可以使用。
在外观-主题中,点击添加新主题,这里我建议大家可以用WordStar这个主题,搜索,安装、启用。这个主题比较技术范。
使用API
最新版本的WP自带了 WP REST API 接口,可以直接调用。
例如要返回分类为27(新闻)的10条文章列表标题、发布日期和链接:/wp-json/wp/v2/posts?categories=27&_fields=title,link,date&per_page=10
api长这样:
[{"date":"2018-11-11T11:35:44","link":"https:\/\/example.com\/jsdelivr-free-public-cdn-acceleration-service","title":{"rendered":"jsDelivr \u4e3a\u5f00\u53d1\u8005\u63d0\u4f9b\u514d\u8d39\u516c\u5171 CDN \u52a0\u901f\u670d\u52a1"}},{"date":"2018-11-11T09:21:39","link":"https:\/\/example.com\/github-corners","title":{"rendered":"GitHub Corners \u6302\u89d2\u94fe\u63a5"}},{"date":"2018-11-10T21:58:39","link":"https:\/\/example.com\/for-only-30-minutes-install-discourse-and-wordpress-on-the-same-device","title":{"rendered":"\u4ec530\u5206\u949f\uff0c\u5728\u540c\u4e00\u53f0\u8bbe\u5907\u5b89\u88c5discourse\u548cwordpress"}},{"date":"2018-09-25T14:53:12","link":"https:\/\/example.com\/secure-nginx-with-let-s-encrypt-on-ubuntu-16-04","title":{"rendered":"\u4f7f\u7528certbot\u81ea\u52a8\u7533\u8bf7\u7eed\u671fSSL\u8bc1\u4e66\uff08Ubuntu\uff09"}}]
如果要在引入的API中只显示指定的文章,则建立一个分类 重要 或 公告 在分类中查看此分类编号 替换掉示例中的5即可。
详细参考这篇文档:https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/
伪装站点
您可能不想让大家知道您使用的什么后台,为了安全。
那就在设置-常规中,修改掉 又一个WordPress站点 之类的描述,同时在 固定链接设置 中,选择 文章名 保存。
高级修改需要启用 Hide My WP 插件,
在插件-安装插件中 搜索 Hide My WP 现在安装 -启用。
在启用 Hide My WP前,请一定要根据提示修改nginx文件,否则会报错。将Hide My WP伪静态文件地址追加到nginx index的下一行,保存重启nginx即可。
修改主题
此处以推荐的WordStar为例
常规的换LOGO 改菜单和不显示评论列表、最新文章列表名字修改、显示数量、显示时间等挂件显示,可以在外观-自定义的菜单 主页显示 站点身份中修改
如果要换LOGO,记得把logo用PS改成提示的200x39px,把LOGO放在透明像素的中间。
如果想修改页面底部版权内容,则点击外观-主题编辑器 编辑 footer.php 末尾<p id="site-generator" class="site-info centertext footer-copy">
以下的几行分别是版权,主题作者等信息,可以插入统计代码等。
如果想修改文章页面,不显示作者信息以及评论框。则在末尾<div class="author-info
前一行插入php注释<?php /**
,在</article>
前插入注释结束标记:
*/
?>
然后在if (comments_open()
前插入注释标记/*
,在{comments_template();}
后插入注释结束标记:*/
如果想要修改页面连接颜色等,则修改 style.css
将其所有内容复制到写字本之类的地方搜索:#007acc
这是WordStar的链接颜色,默认蓝色,批量替换为你的,HTML颜色表可以参考https://www.w3school.com.cn/html/html_colors.asp
搜索:#0f8bda
这是搜索等按钮的颜色,批量替换为你的。
搜索:#38a4e8
这是搜索等按钮鼠标滑过时的颜色,批量替换为你的,和按钮普通状态颜色不一样但比较接近效果较好。
搜索:#D13210
这是鼠标指上链接聚焦时变成的颜色,默认红色,批量替换为你的,应该和连接颜色有较大区别,效果比较好。
搜索:#c00
这个是评论中的红色,如果启用了评论的话,安全起见,批量替换为和上面的鼠标指上链接聚焦时变成的颜色一样。
搜索:#1b52a7
这个应该是默认的文字版logo的颜色,批量替换为你的。
搜索:#3b5998
这是文章页面链接的颜色,批量替换为你的。
搜索:#24a5dc
这是作者信息的颜色,如果启用了的话,安全起见,批量替换为你的。
替换好以后覆盖style.css
您也可以将以下代码复制到外观-自定义-额外CSS中,修改相关颜色后保存。
mark, ins, .tagcloud a:hover, .tagcloud a:focus {
background: #439D7A;
}
a ,.site-footer ul.footer-nav li a, .post-navigation a:hover .post-title, .post-navigation a:focus .post-title,.entry-title a:hover, .entry-title a:focus,.entry-footer a:hover, .entry-footer a:focus, .entry-meta a:focus, .entry-meta a:hover,
.page-links a:hover, .page-links
.comment-metadata a:hover, .comment-metadata a:focus, .pingback .comment-edit-link:hover, .pingback .comment-edit-link:focus,.comment-reply-link,.comment-reply-link:hover, .comment-reply-link:focus,.required ,.site-info a:hover, .site-info a:focus { color: #439D7A; }
.widget_calendar tbody a {
background-color: #439D7A;
}
.tagcloud a:hover, .tagcloud a:focus {
border-color: #439D7A;
}
a:hover, a:focus, a:active { color: #e3745b; }
.button, button, input[type="submit"], input[type="reset"], .comment-form input.submit, .comment-reply-link {
background: #4ea382;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, .comment-form input.submit:hover, .comment-reply-link:hover { background: #5cab8c; }
.comment-reply-title small a:before {
color: #e3745b;
}
#masthead .site-branding a {
color: #43ac6a;
}
#main .hentry.post-content .entry-meta a:hover {
color: #3b5998;
}
.author-info .author-metas a.posts {
background: #24a5dc;
}
#masthead .site-header-menu li.current_page_item a, #masthead .site-header-menu li.current-menu-item a, #masthead .site-header-menu li.current-post-ancestor a, #masthead .site-header-menu li.current-menu-parent a, #masthead .site-header-menu li.current-post-parent a {
color: #439D7A!important;
}