phpstudy_pro 前端小白建站利器 —— 【PhpStudy + WordPress + 花生壳超详细教程】

iuukai

已于 2023-04-30 12:04:54 修改

阅读量2.5k

点赞数 5

分类专栏：个人站文章标签：前端 javascript 运维

于 2020-05-04 20:07:03 首次发布

本文链接：https://blog.csdn.net/weixin_45389633/article/details/105903819

版权

个人站专栏收录该内容

1 篇文章 1 订阅

订阅专栏

下载传送门：

PhpStudy： https://www.xp.cn（官网）

WordPress： https://wordpress.org/download（官网）

花生壳： https://hsk.oray.com/download（官网）

PS：WordPress、花生壳均可在360宝库下载

一、PhpStudy

>>>>>>>>>>>>>>>>>>>>安装

1.解压后，查看使用说明

在这里插入图片描述

2.自定义安装路径

在这里插入图片描述

3.此处我修改了自定义默认路径（外部套一层），方便后面存放 wordpress 原件

在这里插入图片描述

4.安装好后运行

在这里插入图片描述

5.测试是否能访问

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>测试PHP运行环境

6.打开默认站根路径

在这里插入图片描述

7.将以下代码保存为 index.php ，放到根目录

#index.php
<?php
	phpinfo();
?>

在这里插入图片描述

8.再次打开网站

在这里插入图片描述

9.出现以下页面即表示配置环境成功

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>建站

10.创建网站前，设置下新站根目录

在这里插入图片描述

11.新建文件夹，作根目录

在这里插入图片描述

12.基本配置——内网域名与根目录（内网域名，外网无法访问）

在这里插入图片描述

13.基本配置——创建数据库

在这里插入图片描述

14.提示创建成功

在这里插入图片描述

15.在该站根目录下，新建 index.html（嫌麻烦的话，可以直接 Hello World! 保存index.html 也行）

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
</head>
<body>
	Hello World!
</body>
</html>

在这里插入图片描述

16.测试能否通过 demo.com 打开网站（肯定访问失败）

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>文件配置 hosts（IP映射域名）

17.以 txt 文本文档方式打开 hosts 文件

在这里插入图片描述

18.先 ctrl + s 下，出现另存框，表示文件无法修改

在这里插入图片描述

19.文件资源管理器

在这里插入图片描述

20.去勾，确定

在这里插入图片描述

21.在 hosts 文件底部，新增IP地址到主机名的映射

在这里插入图片描述

22.浏览器输入 demo.com 可成功访问页面

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>文件配置 httpd.conf（apache 端口占用问题）

23.以 txt 文本文档方式打开 httpd.conf 文件

在这里插入图片描述

24.搜索 Listen ，找到监听端口

在这里插入图片描述

25.新增一行输入 Listen 90 并保存

在这里插入图片描述

26.重启/启动 apache 服务

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>phpMyAdmin

27.安装 phpMyAdmin 数据库管理工具

在这里插入图片描述

28.选择站点（随意，这个是 phpMyAdmin 的安装路径）

在这里插入图片描述

29.数据库管理页面访问成功，完成操作

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>建多站
（PS：到第29步骤已完成建站，如暂时无需建多站，可直接跳过）

30.新建另一个网站（端口留坑，第33步会说明）

在这里插入图片描述

31.admin 根目录保存 index.html （为便于区分，此处内容为 test）

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
</head>
<body>
	test
</body>
</html>

在这里插入图片描述

32.浏览器输入 demo2.com 成功访问

在这里插入图片描述

33.通过本地回路IP:端口，即 127.0.0.1:80 访问 demo2 站，发现访问的是 demo 站，端口冲突

在这里插入图片描述

34.修改端口，访问 127.0.0.1:端口

在这里插入图片描述

35.成功访问，完成操作

在这里插入图片描述

二、WordPress

>>>>>>>>>>>>>>>>>>>>解压、移动文件

1.将 WordPress 压缩包移动至 Phpstudy_pro 安装目录父文件夹下，并解压

在这里插入图片描述

2.打开解压后的 wordpress 文件夹，全选所有文件并复制

PS：切勿剪切或移动，方便后面重新需要
在这里插入图片描述

3.选择需要搭建 WordPress 博客的站的根目录（此处我用 demo 站）

在这里插入图片描述

4.粘贴

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>设置、安装

5.浏览器输入网站域名，访问成功如图示（此处我的是 demo.com）

在这里插入图片描述

6.输入数据库名与账号密码

在这里插入图片描述

7.安装

在这里插入图片描述

8.设置网站管理账号

在这里插入图片描述

9.完成安装

在这里插入图片描述

10.使用刚刚设置的网管账号登录

在这里插入图片描述

11.进入操作后台

在这里插入图片描述

12.成功访问主页，完成操作

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>强迫症细节

13.强迫症操作，delete 掉 index.html （测试文件 Hello World!）

在这里插入图片描述

三、花生壳（PS：它需要你拍照认证的哦）

>>>>>>>>>>>>>>>>>>>>注册/登录账号

1.打开软件（有账号则登录，无账号则注册）

在这里插入图片描述

2.进入客户端界面

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>注册免费外网域名

3.到花生壳官网申请免费（壳）域名

👉传送门：免费域名申请
在这里插入图片描述

4.输入域名，选择两个免费的域名后缀，并查询

在这里插入图片描述

5.注册域名

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>域名不满意？域名不够用？小知识帮你无限免费域名！

6.花生壳官网 http://service.oray.com 登录账号，点击“控制台”

在这里插入图片描述

7.进入控制台后，来到“用户中心”，添加子账号

在这里插入图片描述

8.单次创建或多次创建子账号，然后登录该子账号去领取免费域名

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>内网映射

9.CMD查询本机IP（ipconfig）（PS：同时连接宽带和无线，会无法访问）

【宽带连接时的IP】
在这里插入图片描述
【wifi（无线）下的IP】

10.回到客户端，添加内网映射

在这里插入图片描述

11.设置映射

在这里插入图片描述

12.本机输入外网域名访问

在这里插入图片描述

13.手机/其他设备外网域名访问，完成操作

在这里插入图片描述

>>>>>>>>>>>>>>>>>>>>IP与MAC绑定（防止IP动态获取，导致外网无法访问）

14.进入路由器后台找到 IP与MAC 关键字功能（我的是TP-Link）

PS：额，非本人路由器且不知道账号密码的那就没办法了
在这里插入图片描述

15.找到本机名（即“计算机名”）

在这里插入图片描述

16.绑定成功，再也不用担心第二天IP跑了，完成操作

在这里插入图片描述

iuukai

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
phpstudy_pro 前端小白建站利器 —— 【PhpStudy + WordPress + 花生壳超详细教程】

下载传送门： PhpStudy：https://www.xp.cn（官网） WordPress：https://wordpress.org/download（官网）花生壳：https://hsk.oray.com/download（官网） PS：WordPress、花生壳均可在360宝库下载文章目录一、PhpStudy>>>>>>>&...
复制链接

扫一扫