数据可视化灵魂

这个屌丝很懒，什么也没留下！

热门标签

【网络编程】从零开始搭建一个自己的网站(静态网页)_弄一个静态页面做官网地址

作者：数据可视化灵魂 | 2024-02-05 20:57:59

踩

弄一个静态页面做官网地址

最近突然对想试着做一个自己的网站，经过不懈的查资料总算是实现了一个简单的网站，实现后会发现其实挺简单的，即使是不懂编程也能很轻松的完成，毫不夸张的说，熟悉的话十来分钟就能完成。现记录一下过程：
如果你对linux有一定的接触和了解，那么推荐你使用第一种方法进行搭建；如果你对linux不熟悉，只想通过图形页面点点点，那么推荐第二种方法进行搭建。

文章目录

方法1：使用Linux指令
方法2：使用宝塔面板搭建

方法1：使用Linux指令

1、一个html文件和一张图片

本文为了主要为了演示创建网站的过程，所以对网页的内容只是简单实现了一下，只有简单的内容+图片；首先写一个html文件，代码如下；可以在桌面新建一个名为web的文件夹，在文件夹里新建一个txt文件，然后把以下代码复制进去，最后把名字改为index.html，然后在文件夹里放一张你想在网页上展示的图片，名字改为pic.jpeg即可。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>
	<style>
		body{
			text-align:center;
			padding:50px;
		}
	</style>
</head>
<body>
	<p>求关注</p>
	<img src="pic.jpeg" />
</body>
</html>	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

完成后，将刚刚新建的index.html文件拖到浏览器中打开，即可在本地呈现最终的效果。如下图
在这里插入图片描述

但是现在仅仅是在自己本地的电脑实现了，如何让其他人也能访问到这个网页呢？这时候就需要一个能被公网访问的服务器了。其实说起服务器，本质上也就是一台能联网的电脑嘛，所以只要你想，你自己的电脑也可以成为服务器。具体实现请看下一节。

2、创建服务器

创建一台自己的服务器，方式有很多种，可以租借一台云服务器；找一个云虚拟主机专门用来放网页文件；或者只要你想，你可以把你自己正在用的这台电脑变成服务器。我自己尝试了云服务器和使用自己电脑两种方式，经过我的实测，还是感觉云服务器更方便，现在很多国内的互联网大厂都提供了云服务器租借服务，学生用还是很便宜的，所以更推荐使用租借云服务器的方式创建服务器。

方式1：云服务器（推荐）

现在很过国内的大厂都提供了云服务器租借服务，比如阿里云、腾讯云、华为云、网易云等等，经过我多方比较，发现在我购买的时候（2022.6.14），腾讯云最便宜，45块钱一年，（可能是赶上618活动了吧，哈哈哈）所以我就购买了腾讯云的。
腾讯云官网：https://cloud.tencent.com/act/cps/redirect?redirect=2260&cps_key=5c9d8709f8a7d925d2594ce534f28de5&from=console

系统方面更推荐用CentOS，至于版本，7.0以上的版本都可以，我这里选择的最新的CentOS 8.2。
购买完成后，点到控制台，在控制台中就能看到准备好的服务器了，点击登录
在这里插入图片描述

记得在上图的“更多”选项里改一个自己常用的密码，后面要用到的。有了服务器后，怎么把网页文件放进去呢？可以在控制台点击登录，直接在网页端操作服务器，但是这样显然不够灵活；所以一般我们使用ssh连接的方式远程操作服务器，常用的软件是xshell，一款免费的远程连接工具，具体的安装方法百度搜索即可。

xshell安装完成后，新建会话，名称写一个你方便记忆的名称就好，主机地址填写你的服务器公网ip，端口号就是22，直接点连接，输入用户名root和密码，然后你就可以像操作自己本地的电脑一样操作云服务器执行一些命令了。
新建一个web文件夹，然后把第一节写好的两个文件拖进去：

mkdir web
cd web
1
2

在这里插入图片描述

完成后如下图：
在这里插入图片描述

就会发现云服务器里的web文件夹下已经有咱们刚刚写好的index.html文件了。但是我们怎么在浏览器中看到这个文件呢？直接访问服务器的ip，再加上文件在服务器中的位置可以吗？你可以试一下，在浏览器中输入（10.41.62.166/web/index.html），（我这里假设我服务器ip是10.41.62.166，你需要换上你自己的云服务器ip;注意，是公网ip）发现不行，连接失败。因为当我们直接输入ip时，默认会访问服务器的80端口，我们敲netstat -nltp 命令看一下,发现80端口根本就没有程序在运行，因为我们还要安装web服务器软件，提供网站访问能力。博主推荐使用nginx，使用以下在线安装即可。

yum install nginx
1

安装过程需要输入Y确定，然后就一直刷刷刷，刷的非常开心，不一会儿就安装完成了。安装完成后，执行nginx命令启动web服务器，再netstat -nltp看一下端口占用，会发现80端口被nginx服务器占用了然后直接访问云服务器ip地址，在浏览器界面输入10.41.62.166（换成你自己的服务器ip），效果图如下，
在这里插入图片描述

虽然一片红，但是恰恰说明成功了，我们访问到了nginx的默认页面，nginx默认页面的html文件是放在/usr/share/nginx/html下面的。那接下来很简单了，我们只需要进入到这个存放网页的文件夹，

cd /usr/share/nginx/html 
1

然后我们把他原来的文件删掉

rm -rf index.html
1

再把自己的网页文件（前面自己写的index.html和pic.jpeg）拖到这个文件夹下面，然后我们再去浏览器界面访问服务器ip，我们的网站就访问成功了。
在这里插入图片描述

但是这种删除原有文件的方式其实是不好的，你要是一不小心把命令输错了不就成了删库跑路了嘛；所以，除了覆盖原目录下的文件，我们还可以将nginx的默认打开路径，修改为咱们自己的路径，步骤如下：

先进入nginx路径：

cd /usr/share/nginx/html
1

将第一步咱们新建的web文件夹（里面有html文件和jpeg文件）复制过来：

cp -R /root/web/ ./
1

在这里插入图片描述

然后进入到nginx的配置目录下

cd /etc/nginx
1

修改配置文件

vim nginx.conf
1

如下图，
在这里插入图片描述

默认他读取的是/usr/share/nginx/html下的网页文件，那我们只要把这个路径改成自己网页文件在服务器上所在的路径就可以了，比如修改为刚刚建立的web文件夹：
在这里插入图片描述
保存退出，然后重启nginx：

nginx -s reload
1

再去访问你服务器ip，结果如下：
在这里插入图片描述

方式2：使用自己的笔记本（不推荐）

我在前面提到过，只要你想，你自己的电脑也可以成为服务器；那么怎么实现呢，那么要求你的电脑有Ubuntu系统或CentOS系统，纯系统或者虚拟机都可以。下面分别介绍网页在Ubuntu和CentOS上的实现。

1、CentOS

配置上网

CentOS版本是7.6，安装在VMware虚拟机中，启动CentOS系统，先修改配置网卡配置文件：

vim /etc/sysconfig/network-scripts/ifcfg-ens33
1

在这里插入图片描述
修改ONBOOT=yes
然后重启网络服务：

systemctl restart network
1

测试一下网络：

ping baidu.com
1

在这里插入图片描述
能ping通说明网络没问题了。

设置静态ip

查看本地ip:

ifconfig
1

在这里插入图片描述
之前的网络配置是使用dhcp方式分配ip地址，这种方式会在系统每次联网的时候分配一个ip给我们用，也就是说有可能系统下次启动的时候ip会变，这样非常不方便我们管理。

网段和网关可以通过以下方式查看：
编辑->虚拟网络编辑器
在这里插入图片描述
然后按照1->2->3的步骤，即可看到网段为192.168.92.0；网关为192.168.92.2

配置静态ip首先需要打开网卡配置文件

vi /etc/sysconfig/network-scripts/ifcfg-ens33
1

修改启动协议 BOOTPROTO=static
手动配置ip地址，配置规则如下：

TYPE=Ethernet
PROXY_METHOD=none
BROWSER_ONLY=no
BOOTPROTO=static
DEFROUTE=yes
IPV4_FAILURE_FATAL=no
IPV6INIT=yes
IPV6_AUTOCONF=yes
IPV6_DEFROUTE=yes
IPV6_FAILURE_FATAL=no
IPV6_ADDR_GEN_MODE=stable-privacy
NAME=ens33
UUID=d768f819-cfc1-4a6d-8bf5-cd7359a86c75
DEVICE=ens33
ONBOOT=yes
# IP地址 （根据自己的环境修改）
IPADDR=192.168.92.101
# 子网掩码
NETMASK=255.255.255.0
# 网关（根据自己的环境修改）
GATEWAY=192.168.92.2
#DNS
DNS1=223.5.5.5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

IP地址根据上图的子网地址来生成，把子网的最后一个数字改大点就好，比如我改成了101，即192.168.92.101；子网掩码设置为255.255.255.0；网关按照上图中你的子网掩码设置；DNS设置为223.5.5.5；

完整配置截图如下：
在这里插入图片描述
环境不同，ip地址可能不同，所以需要安装自己的ip网段和网关地址进行配置。

接下来重启网络服务

systemctl restart network
1

查看ip地址，发现ip地址已经变成固定ip 192.168.92.101：

在这里插入图片描述

一些公网DNS服务器

#阿里
223.5.5.5
223.6.6.6
#腾讯
119.29.29.29
182.254.118.118
#百度
180.76.76.76
#114 DNS
114.114.114.114
114.114.115.115
#谷歌
8.8.8.8
8.8.4.4
1
2
3
4
5
6
7
8
9
10
11
12
13
14

安装nginx

安装nginx，整个过程跟云服务器上的CentOS完全一样了；首先是在线安装nginx

yum install nginx
1

遇到的问题1：
提示没有可用的软件包。
解决：
当出现这个问题时，说明yum源中已经没有对应的安装包了，需要我们安装epel( Extra Packages for Enterprise Linux 企业版 Linux 额外包),指令如下：

yum install -y epel-release
1

安装完成后，再执行安装nginx的命令即可安装成功。
然后启动nginx，输入以下指令：

nginx
1

此时运行netstat -nltp，可以看到80端口被nginx占用，此时就可以通过ip访问咱们的CentOS系统了。

在这里插入图片描述
使用ifconfig可以看到本机的ip，如下图所示：

在这里插入图片描述

此时正常来讲在浏览器输入你的CentOS ip，就能访问了，我们试一下
在这里插入图片描述
果然能访问了，如果你的还是不能访问，且确定nginx已经运行，80端口已经被nginx占用，那就可能是网络防火墙拦截了，把网络防火墙关闭即可。指令如下：

安装nginx后，80端口已经打开，但是网页还是无法打开
防火墙问题导致，这时需要关闭防火墙

systemctl stop firewalld.service
1

访问ip出现的是centOS欢迎页
在这里插入图片描述
访问服务器IP后发现出现的是CentOS的欢迎页面，而不是nginx的欢迎页面，起初以为是Nginx没有启动成功，后来发现nginx.conf中指向的就是CentOS的欢迎页面
root /usr/share/nginx/html; 这一条设置就是指向页面设置

 vim /etc/nginx/nginx.conf
1

在这里插入图片描述
要想访问自己的网页，那就把自己写的网页文件（第一节中创建的html文件和jpeg文件）放入 /usr/share/nginx/html这个目录下即可。此时再去访问CentOS ip，效果图如下：

在这里插入图片描述
但是这种删除原有文件的方式其实是不好的，你要是一不小心把命令输错了不就成了删库跑路了嘛；所以，除了覆盖原目录下的文件，我们还可以将nginx的默认打开路径，修改为咱们自己的路径，步骤如下：

先进入nginx路径：

cd /usr/share/nginx/html
1

将第一步咱们新建的web文件夹（里面有html文件和jpeg文件）复制过来：

cp -R /root/web/ ./
1

在这里插入图片描述

然后进入到nginx的配置目录下

cd /etc/nginx
1

修改配置文件

vim nginx.conf
1

如下图，
在这里插入图片描述

nginx -s reload
1

再去访问你服务器ip，结果如下：
在这里插入图片描述

Centos7 防火墙的关闭

CentOS 7.0默认使用的是firewall作为防火墙

查看防火墙状态

firewall-cmd --state
1

停止firewall

systemctl stop firewalld.service
1

禁止firewall开机启动

systemctl disable firewalld.service
1

放行端口

firewall-cmd --zone=public --add-port=80/tcp --permanent
1

重启防火墙

firewall-cmd --reload
1

2、Ubuntu

我使用的Ubuntu版本是Ubuntu 20.04，安装在VMware虚拟机。
进入Ubuntu系统，跟使用云服务器的方法类似，首先，在线安装nginx

sudo apt install nginx
1

安装完成后，再执行安装nginx的命令即可安装成功。
然后启动nginx，输入以下指令：

nginx
1

此时运行netstat -nltp，可以看到80端口被nginx占用，此时就可以通过ip访问咱们的Ubuntu系统了。
在这里插入图片描述
输入ifconfig查看自己电脑ip，

在这里插入图片描述
然后在浏览器输入此ip即可访问。结果如下图：

这是访问的nginx的默认页面，如果要访问咱们自己制作的网页，只需把刚刚创建的网页复制到/var/www/html/目录下，并将index.html改为index.nginx-debian.html，此时再去访问刚刚的ip，即可实现访问咱们自己的网页。

方法2：使用宝塔面板搭建

1、一个html文件和一张图片

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>
	<style>
		body{
			text-align:center;
			padding:50px;
		}
	</style>
</head>
<body>
	<p>求关注</p>
	<img src="pic.jpeg" />
</body>
</html>	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

完成后，将刚刚新建的index.html文件拖到浏览器中打开，即可在本地呈现最终的效果。如下图
在这里插入图片描述

2、创建服务器

xshell安装完成后，新建会话，名称写一个你方便记忆的名称就好，主机地址填写你的服务器公网ip，端口号就是22，直接点连接，输入用户名root和密码，然后你就可以像操作自己本地的电脑一样操作云服务器执行一些命令了。

有了云服务器后，安装宝塔面板：

宝塔面板是一款服务器管理软件，用户可以通过Web端轻松管理服务器，提升运维效率。例如：创建管理网站、FTP、数据库，拥有可视化文件管理器，可视化软件管理器，可视化CPU、内存、流量监控图表，计划任务等功能。

3、开放宝塔端口

首先，开放腾讯云服务器宝塔端口：
在这里插入图片描述
点进来后，点击防火墙：
可以看到我们的服务器仅开放了80、443、22、3389端口；腾讯云轻量应用服务器默认开放了80、443、22和3389四个端口；而宝塔Linux面板需要开放宝塔依赖的端口号8888、21和888，所以需要在防火墙增加开放对应的端口号。如下：
在这里插入图片描述
按照上图操作，分别添加8888、21和888端口：

4、安装宝塔

然后进入云服务器CentOS系统，如果你之前安装过Apache/Nginx/php/MySQL，要先删除；比如我之前通过yum在线安装了nginx，所以需要先卸载nginx：

yum remove nginx
1

然后安装宝塔：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
1

安装完成后，他会为我们提供一个默认的站点地址，默认用户名和密码，一定要保存好；如下图所示；
在这里插入图片描述
访问上图中的默认站点，

输入刚刚的用户密码进行登录，登录完成后，如果没有注册则进行注册，注册完成之后直接；
然后就进入宝塔主页面：

他会提示让我们安装一些软件，比如说nginx web服务器、数据库、PHP等。这里如果没什么特殊需求的话，我们就安装他推荐的环境，比较适合部署网站。安装过程如下：
在这里插入图片描述

等待安装的过程中，可以进入面板设置，修改一些设置，比如默认入口、默认用户名、密码等等。
至此，宝塔面板已经安装成功啦。

5、成功搭建网站

在宝塔界面，点击网站->添加站点->创建站点，输入域名，如果没有域名的话填你服务器ip就好，点击提交，成功创建站点。
在这里插入图片描述然后我们进入目录：

如下：

在目录里我们可以对网站文件进行管理，比如把里面的文件都删除，然后上传自己的文件：

然后点击“开始上传”，上传成功后如下：

然后我们打开一个浏览器，在浏览器里输入自己云服务器公网ip，最终效果如下：

在这里插入图片描述
OK，大功告成，一行代码都没敲。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/数据可视化灵魂/article/detail/61708