注:本文基于个人实践总结而来,既是教程,也是总结。由于作者水平有限,文中难免出现疏漏,还请各位读者坚持批判性阅读。如发现文中的错误之处,欢迎在评论区指正,谢谢!
概述
难度:有手就行。
适用范围:本教程适合零基础、想做个网站尝尝鲜(让自己/朋友可以通过网址访问)、对网站质量要求不高的人群。
硬件要求:一台能正常上网的自用普通电脑即可。
软件要求(参考):Windows 10操作系统,以及运行于该操作系统上的phpStudy、Wordpress和任意一款内网穿透工具(如何获取免费的内网穿透工具也将在下文介绍)。
成本(不考虑自己浪费的时间):0元。
概念解释
这段内容建议先跳过,直接看下面的具体操作,遇到不懂的再回来看。还是文章开头那套话,批判性阅读,有错请指正。
服务器:提供web服务的电脑。比如,你打算让朋友访问你做的网站,那么就可以让你现在在用的电脑作为网站的服务器。
IP地址:三个点分隔开的四个数字,如192.168.1.103,指向一台(局域网内的)服务器。
域名:格式如www.baidu.com,基本上也是指向一台服务器,或一台服务器上的一个文件夹。
Host(主机):约等于电脑。一般是指网站的服务器的名字。可以用IP地址或域名表示。
Vhost(虚拟主机):采用软件方法,让一个IP地址可以与多个域名绑定,从而使一台实际的主机同时作为多个网站的服务器。例如,一台IP地址为192.169.1.100的电脑采用了虚拟主机技术设置了两个域名:www.1.com和www.2.com,那么客户机访问这两个网站时,虽然传送过程中两个请求的IP数据报的目的地址都是192.169.1.100,但服务器收到请求后会分析数据报的内容,从而决定将信息交给哪个虚拟主机处理。
Web服务:一种软件服务,可以让服务器能正确处理客户机(访问网站的电脑)发来的请求,并返回相应的结果(如一个网页)。通常个人用的电脑不会默认开启web服务,因此虽然通过在资源管理器的地址栏输入主机名可以连接一台同局域网的主机(电脑),但像访问百度(www.baidu.com)那样输入http://【局域网主机名】却并不能出现一个网页。
具体操作
在phpStudy上对网站进行基本部署
其实我也不是太确定部署是啥,目前看来约等于在服务器上启动Apache等web服务软件,建一系列放源码的文件夹,并在软件中记录这堆文件夹的信息。
下载安装phpStudy。下载地址:https://www.xp.cn/download.html。
安装完成后,在phpStudy中开启Apache(或Nginx)和MySQL。
新建网站,假设网站名叫www.mysite.com,勾选创建数据库、同步hosts。数据库名、用户名、密码都可以随便取。点击确认后,程序应该就建立了一个名叫www.mysite.com的vhost。
若提示同步hosts失败,可以手动修改hosts文件(位于%windir%\system32\drivers\etc),加入一行:
127.0.0.1 www.mysite.com
其中的127.0.0.1是环回地址,可以理解为本机。修改后,可让你的电脑在访问www.mysite.com时,http请求直接发送给本机,而非真正在互联网上寻找那台主机。
利用Wordpress建设你的网站
前面的操作算是打好了地基,而这一步就可以平地起高楼了。
下载Wordpress,解压到www.mysite.com网站在本机的根目录下。操作完成后网站的根目录下大致如图所示。
在浏览器中输入网站名称:http://www.mysite.com/,出现WordPress安装界面。点击“现在就开始”后,可以看出之前创建的数据库在这里派上用场了。一路按照提示操作即可。
这时一个“毛坯房”就做好了,你可以继续切换主题或进行其他个性化设置(如果觉得网页顶部的工具条碍眼,通过浏览器的隐身访问就看不见网页顶部的黑色工具栏了)。
让朋友体验你的网站(外部访问)
内网穿透
个人用的电脑通常位于局域网中,外部无法直接访问到。要让其他人访问你的网站,需要获取一个固定的IP或域名。如果只是玩一玩,可以考虑免费的内网穿透工具。我使用的是Qydev。详见教程https://blog.csdn.net/qq_40739917/article/details/106001561。
我通过这种方法注(bai)册(piao)了一个域名:bmczzs.free.qydev.com。启动内网穿透工具,输入自己的隧道keycode并保持窗口打开。
在数据库中更换网站的域名
白嫖来的域名为bmczzs.free.qydev.com,与之前建站时的域名不符,怎么办?
在phpStudy中,修改网站的基本配置,将域名改为我们的新域名。
接着,一键生成MySQL中的域名替换语句:https://mtool.wpjam.com/change-domain/,复制生成的结果。
安装并打开数据库管理工具。
执行刚才生成的SQL语句(此操作存在一定风险,建议先备份数据库)。
在浏览器中输入新的域名,成功打开了原来界面。如果发现页面显示异常,可能是浏览器偷懒直接读取了缓存的原因,刷新一下就好了。
若下面出现这种情况,可以考虑换个浏览器或者换台设备(如:手机)查看,或访问http://【新域名】/wp-admin。
之前我曾直接在记事本里对域名进行替换,结果虽然也能正常进入网站,但存在页面部分元素丢失的现象(如搜索框消失),因此不建议采用这种偷懒的方法。
加点细节
完善注册/登录模块
默认的登录注册模块的url是http://【域名】/wp-login.php。新用户其实根本无法注册,因为我们的网站还没配备自动发送邮件的功能(不能自动发送用于新用户确认和修改密码等功能的邮件);登录界面也比较简陋;同时,这个地址还没什么特色,且容易暴露。
完善新用户注册功能
在网站后台安装并配置好自动发送邮件的插件即可(不涉及具体的发信程序,操作复杂程度类似于配置各种邮箱客户端)。我采用的是WP SMTP。
界面美化
我使用了LoginPress插件对登录界面进行美化。具体不表。
修改登录界面的URL
可参考这篇文章:https://www.cnblogs.com/rxbook/p/10145371.html。我的做法与此文基本一致,但由于引进了用户注册功能,所以还要修改发给用户的邮件模板里的登录链接。自动生成邮件的脚本是/wp-includes/pluggable.php文件,因此只要在此文件中再进行一次替换即可(将原登录文件的文件名wp-login.php替换成修改后的文件名)。
最终登录界面效果如图所示。