手把手教你搭建网站

前言

相信很多前端的小伙伴都有一个这样的想法：自己写了个前端项目，本地玩腻了，想着配个服务器，然后把自己的项目发布到服务器上，搭建一个属于自己的网站。没错，我很早就有了这样一个想法，但苦于知识量匮乏，很多东西都不懂，一直到现在，才真正搭建了属于自己的网站。

总体来说，如果对于一些只接触了纯前端，对服务器以及项目上线部署没什么了解的小伙伴们来说，从购买服务器到真正搭建自己的网站还是有一点困难的，所以，接下来，我将详细解读以及教小伙伴们怎么在服务器上搭建一个属于自己的网站。

在文章最后，我会对连接服务器、上传项目、以及搭建网站经常遇到的一些问题进行一些总结，以便各位小伙伴们遇到不同的情况都能够很好的解决。

首先声明，本人基于 Linux 下的 CentOS 8 系统镜像，接下来的操作可能大部分偏向系统镜像操作，但应用镜像操作也会涉及，小伙伴们请耐心看完全文，你会收获到自己想要的答案的。

预备知识

什么是云服务器？

云服务器(Elastic Compute Service, ECS)是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件，即可迅速创建或释放任意多台云服务器。

什么是域名？

域名（英语：Domain Name），又称网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识（有时也指地理位置）。由于 IP 地址具有不方便记忆并且不能显示地址组织的名称和性质等缺点，人们设计出了域名，并通过网域名称系统（DNS，Domain Name System）来将域名和 IP 地址相互映射，使人更方便地访问互联网，而不用去记住能够被机器直接读取的 IP 地址数串。

什么是 SSL 证书？

SSL证书是数字证书的一种，类似于驾驶证、护照和营业执照的电子副本。因为配置在服务器上，也称为 SSL 服务器证书。

SSL 证书就是遵守 SSL 协议，由受信任的数字证书颁发机构 CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能。

SSL 证书通过在客户端浏览器和 Web 服务器之间建立一条SSL安全通道（Secure socket layer(SSL), 安全协议是由 Netscape Communication 公司设计开发。该安全协议主要用来提供对用户和服务器的认证；对传送的数据进行加密和隐藏；确保数据在传送中不被改变，即数据的完整性，现已成为该领域中全球化的标准。

服务器选配

首先第一步，想要在服务器上部署项目，当然前提得有一台服务器呀，所谓工欲善其事，必先利其器嘛。

市场上服务器厂商都挺多，我们熟知的可能也就是阿里云，腾讯云，华为云，百度云等这些，个人推荐选择阿里云和腾讯云，我第一次搭建是因为百度云有个活动可以白嫖三个月，所以第一次选择了百度云。其实服务器的配置这些对于新手来说不必过多担心，我们购买服务器的用途也就是测试测试自己开发的项目，或者搞个自己的个人博客之类的放在服务器上，所以，一般的轻量级服务器就已经够我们用了，不必很在意服务器的配置，所以新手我推荐轻量级服务器。

而且如果是新用户，各大服务器厂商对新用户的优惠力度都特别大，所以购买一个轻量级的个人服务器不是很贵，注册之后记得实名，不实名的话是没办法购买服务器的。

对于活动推出的服务器，我们也不必担心怎么去配置服务器的参数那些，因为配置都配好了，顶多就是让你选择操作镜像，设置初始化用户名和密码等。不管选择哪个厂商，其实相同配置下，价格差异并不大。各大厂商都是点击最新活动，去享受优惠价格

阿里云官网链接

腾讯云官网链接

华为云官网链接

当我们注册好一个账户并实名认证成功之后，我们就可以去购买一个属于自己的服务器了，要是还在纠结的小伙伴，也可以去各厂商活动页面先申请一个免费体验的服务器先操作一下，等自己学会怎么玩服务器了再购买也不迟，哈哈，没错，就是像我一样，我第一次使用服务器并不是购买的，而是看到百度云里有活动，然后白嫖了三个月。百度云活动链接

参数配置详解

在购买服务器配置页，会让用户选择一些配置，接下来我将详细解释每个配置到底该怎么选，以便帮助各位小伙伴们选择出一台最适合自己的服务器。下面我以百度云和腾讯云为例，详细解读参数配置。

百度云

快速购买方式

这个界面基本不用自己配置什么参数，比较容易上手，对实例（服务器）的配置也有说明，可根据自己需求选配

地区及可用区

这里分两种情况，假如说自己买个服务器是因为项目要上线投入使用，那么这种情况，用户主要集中在那个区域就选那个区域，这样的话用户访问网站项目响应速度就相对较快。还有一种情况就是自己买了自己玩，这种的话就直接选择自己所在地区

实例配置

有的小伙伴可能会问，我买的不是服务器吗？实例是个什么鬼？实例是云端的虚拟计算资源，可理解为云服务器（Cloud Virtual Machine，CVM），包含 CPU、内存、操作系统、网络、磁盘等最基础的计算组件。云服务器实例可在云端提供安全可靠的弹性计算服务，实现计算需求；可随着业务需求的变化，实时扩展或缩减计算资源；可极大降低企业的软硬件采购成本，简化 IT 运维工作。这里说的实例配置其实就是服务器的配置，在快速购买这个页面，对不同实例的配置都做了说明，小伙伴们可以根据自己用途来进行选择

操作系统

其实这里的操作系统又可以称为操作镜像，简单理解就是服务器购买者通过什么样的方式访问到自己购买的服务器，这里也可能是新手比较纠结的一点，操作镜像呢又分为应用镜像和系统镜像。镜像是一个包含了软件及必要配置的服务器或磁盘模版，包含操作系统或业务数据，还可以包含应用软件 (例如，数据库软件) 和私有软件。镜像分为公共镜像、私有镜像、共享镜像、市场镜像。镜像服务 (Image Management Service) 提供镜像的生命周期管理能力。用户可以灵活地使用公共镜像、私有镜像或共享镜像申请弹性云服务器和裸金属服务器。一般推荐选择安装系统镜像，这样的话操作系统是纯净的，未安装过任何环境和程序的，方便我们操作。

带宽

简单理解就是在给定时间内可以传输的数据量。它相当于一条路，需要通过的数据相当于其中的车辆。如果道路狭窄，车辆通过所需的时间会相对较慢，这也是带宽会在一定程度上影响网页的打开速度的原因。如果把带宽比作水管，带宽实际上就是水管的流量而流量就是流出的水的总量。带宽影响主机的访问速度，网络带宽的大小对于访问量大的网站尤为重要。所以，带宽越大，就代表访问服务器和响应速度越快，但是呢，对于新手小白来说，一般带宽 1M~2M 已经够用了，大佬可滑走。

腾讯云

相同的地方我就不在赘述，咱们来说说一些不同的值得注意的点

安全组

安全组（Security Group）是一种有状态的包过滤功能的虚拟防火墙，它用于设置单台或多台云服务器的网络访问控制，可以将同一地域内具有相同网络安全隔离需求的云服务器实例加到同一个安全组内，通过安全组的网络策略对云服务器的出入流量进行安全过滤。出于安全考虑，腾讯云服务器默认只开放了 22 和 3389 端口，假设在这台云服务器上搭建网站，则需要 80 端口，就是通过配置安全组规则放行 80 端口来实现的。

登录方式

密码是每台云服务器实例专有的登录凭据。为保证实例的安全可靠，腾讯云提供以下两种加密登录方式：

SSH 密钥对：只需在控制台和本地客户端做简单配置即可远程登录实例，再次登录时无需再输入密码。此登录方式更为安全可靠，可以杜绝暴力破解威胁。

登录密码：任何拥有实例登录密码的人都可以通过被安全组允许的公网地址远程登录云服务器实例。

IP 地址

腾讯云提供 内网 IP 地址 和 公网 IP 地址。简单理解，内网 IP 提供局域网（LAN）服务，云服务器之间互相访问。公网 IP 在用户在云服务器实例上需要访问 Internet 服务时使用。

以上就是在选择服务器时一些比较值得注意的参数配置，小伙伴们看到这里，就可以去选择一台满足自己需求，适合自己的服务器啦。

系统镜像和应用镜像怎么选？

系统镜像，也就是我们平时所说的操作系统镜像，系统镜像是不包含任何软件以及插件的纯净版的操作系统。更多的人都会选择系统镜像，因为不同方向的人可以根据自己的需求安装自己所需要的服务以及软件，优点就是灵活性比较强。

应用镜像，简单理解就是服务器已经帮你选择了操作系统，并且在操作系统的基础上又额外安装了一些环境，相当于一条龙服务，自己不用动手去安装环境，可根据选择不同的应用镜像搭建不同的网站类型，常见的有 WordPress、LAMP、Node.js 等。优点就是相对于系统镜像来说，操作起来比较方便。

看到这里，相信各位小伙伴在于选择镜像问题上应该知道怎么选了吧，我刚开始一步直接到位选择了系统镜像，确实到后面也是花费了好多的时间才成功搭建起网站。所以对于没有基础的小伙伴来说，我觉得刚开始可以选择应用镜像，这种方式操作起来也相对简单，如果也有小伙伴想选择可玩性高的系统镜像，那么我推荐 Linux 下的CentOS镜像，版本越高越好，但需要一定的 Linux 基础。

登录控制台

当我们选好自己的配置并购买服务器后，就可以转到自己的控制台页面查看自己的购买的服务器，并且再次设置一些参数，比如安全组，重置密码等等。购买成功之后首次访问公网 IP 是没有响应的，因为默认浏览器访问的是 80 端口，而一般在服务器购买后没做任何配置 80 端口是没有被占用的。但是如果选择的是应用镜像的话，在访问的时候会根据自己选择应用镜像最终显示对应的页面

接下来我所讲的内容主要以 Linux 下的 CentOS 8 镜像为主，因为我选择的是系统镜像，但讲完系统镜像，我也会对应用镜像做一些教程，方便不同小伙伴们的需求。

购买服务器成功之后，有条件的小伙伴可以去注册一个属于自己的域名， 购买域名后到相应的界面进行备案，只有备案成功后，自己才可以通过域名来访问自己的网站，这个过程差不多需要两三天的审核时间。

个人建议先把自己的网站搭建出来在考虑购买域名和备案这些操作，这样比较把稳一点，不然域名买了，备案备了，自己网站搭建不出来，那岂不是白搭。

连接服务器

接下来要做的肯定就是连接服务器啦，我所知道的有三种方式，效果都差不多，看个人选择，但推荐选择使用远程连接软件连接。比如 Xshell 等。

使用网页 VNC 访问服务器

在控制台页面下点击自己购买的实例，可以看到使用 VNC 登录的方式。VNC 服务对浏览器有一定的要求，使用之前注意 VNC 页面的提示。登录之前要确保自己的实例正在运行，不然是没办法连接上的

现在只支持如下版本的浏览器

• Google Chrome 16+
• Firefox 3.6+
• iOS Safari 6.1+
• Opera 11+
• Internet Explorer 9+

对于 linux 系统，在 VNC 窗口 的的对话框中，在 “login” 后输入用户名，按 Enter。对于 Windows 操作系统，点击按钮 “发送 Ctrl+Alt+Del”，发送 Ctrl+Alt+Del 命令到操作系统。

在 “Password” 后输入密码，按 Enter。值得注意的是输入的密码默认是不显示的，别像我傻乎乎的，输入密码光标不动还以为是自己键盘坏了。如下图所示：

使用远程连接软件

此方式是大家都比较推荐的方式，原因很简单，方便，灵活性高。这里我使用的是 Xshell 远程连接
首先去官网下载 Xshell，官网链接 Xmanager 中文官网_Xshell,Xmanager,Xftp 7 下载，现在 Xshell 已经更新到 7 版本，小伙伴们自行下载就行。

打开软件后，新建一个会话，【名称】选项自己可以随意命名，不影响。【主机】选项填写自己的公网 IP 地址，也就是自己服务器的地址，在控制台可以查看自己的服务器 IP 地址，【端口号】选项默认是 22 端口，不用修改。22 端口就是用于 SSH 远程连接的端口。其他选项不用选择，直接点击【连接】按钮进行连接。

首次连接可能会跳出一个叫什么密钥配对的窗口，点击接受就可以了，然后就是输入【用户名】和【密码】，确定后就连接成功了，这里的用户名和密码就是当时购买服务器要填写的服务器用户名和密码哟。

显式这个页面即表示连接成功了哟，接下来就可以对自己的服务器进行一些操作了

使用远程桌面连接

这也是第三种远程连接服务器的方式，适用于选择了 Windows 镜像的用户，可以直接用自己电脑上的远程桌面连接到自己的服务器。

下载服务器 Web 服务

连接上自己的服务器之后，就可以对自己的服务器环境进行一些配置了，想要搭建网站，肯定少不了的就是使用 Web 服务来提供网站访问能力，当下一些比较主流的 Web 服务有：Apache HTTP Server、NGINX、Apache Tomcat、Node.js、Lighttpd 等。这里我推荐的使用的是Nginx，如果有小伙伴不了解这些是什么东西，记得先去查阅下资料哟。

Nginx

Nginx 可以作为静态页面的 web 服务器，同时还支持 CGI 协议的动态语言，比如 perl、php 等。但是不支持 java。Java 程序只能通过与 tomcat 配合完成。Nginx 专为性能优化而开发， 性能是其最重要的考量, 实现上非常注重效率 ，能经受高负载的考验, 有报告表明能支持高 达 50,000 个并发连接数。

首先，我们先创建一个文件夹，用于保存后面自己要上传的项目

接下来，查看自己的端口占用情况，上面我就提到了，服务器初始化状态下 80 端口是未被占用的

在 Linux 环境下下载 Nginx 非常的简单，Linux 提供了很多包管理工具，所以直接输入以下命令，敲下回车就可以下载 Nginx

下载过程中出现一下界面，直接选 y，一路下载

下载完成之后，我们输入nginx来启动服务，这时候我们再来查看端口占用情况就可以发现 80 端口已经被 nginx 占用了

然后直接访问自己服务器 IP 地址，出现如下界面就代表 Nginx 安装并运行成功了

如果安装完成之后，访问服务器IP地址不成功，可能存在两个问题，80 端口被其他服务占用或者Nginx 下载文件丢失或下载不成功。如果 80 端口被其他程序占用，则清空 80 端口或者设置 80 端口占用服务为 Nginx 即可。如果出现 Nginx 下载失败或者下载文件缺失损毁，则卸载 Nginx 再次重新安装就行了。

卸载 Nginx 命令：

上传网页项目

完成上述操作之后，接下来就可以把自己的项目上传到服务器啦，那如何上传呢，这里介绍两种方式

直接替换 Nginx 默认页面

找到 Nginx 默认显示页面

删除 nginx 默认显示页面

将自己的网页直接拖拽进目录下即可，然后查看是否成功。全选文件，直接拖拽

查看是否存在文件

到这一步，咱们就简单实现了一个静态页面上传服务器了，现在直接访问服务器 IP 地址，就可以看见自己的网页啦。

修改 Nginx 配置文件

第一种做法呢比较麻烦，万一要是文件夹删错了，那可不就废了。所以，我比较推荐第二种方法。

首先下载 Xshell 配套的文件传输软件 Xftp 7（远程文件传输的软件有很多，不一定非要使用这个，可根据自己选择），连接上自己的服务器，连接方式和 Xshell 7 一样。上面说道我新建了一个web 文件夹，接下来我们把文件上传到这个 Web 文件夹下。

接着找到Nginx 的配置文件，修改默认配置，指向自己创建的文件夹下的 html 文件即可。

打开 Nginx 文件夹：

文本编辑打开 Nginx 配置文件：

修改配置文件

完成这一系列操作之后，再次重启 nginx 服务，然后访问服务器 IP 地址，也能看到自己的网页啦。

到此，简单的静态页面网站就搭建成功啦，至于怎么搭建动态网站，配置数据库，后端，等等一些操作，我还正在摸索。那有没有更简单的方式呢，当然有，接下来我就讲讲宝塔面板的使用。

宝塔 linux 控制面板

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

宝塔面板分为 Windows 版本和 Linux 版本，我主要介绍的是 Linux 版的宝塔面板怎么下载和使用，Windows 版本其实相差无几。

下载

在下载之前，可先进入宝塔面板官网，注册一个宝塔账户，后文服务器绑定时需要宝塔账户。在 Linux 系统中，使用一行命令就可以下载宝塔面板。

因为我的服务器是Centos版本，所以，直接在 Xshell 中输入以下命令：

下载完成之后，会出现以下界面，包含访问面板 IP 地址，登录宝塔面板的用户名和密码，最好截图保存一下，以便后续登录。

在浏览器访问宝塔面板，输入用户名和密码，第一次登录要绑定自己的宝塔账户，绑定之后出现以下界面

选择一键安装后，在面板的左上角，会自动显示任务的数量，点击后进入任务列表。在当前界面会显示程序的安装进度，或程序执行进度等。等待一段时间后，查看任务列表中的信息，查看是否完成。

等待安装的过程中，自己可以了解面板的各模块

创建站点

服务下载完成之后，点击左侧网站一栏，创建新的站点

【域名】：填写需要绑定的域名以及端口。没有域名可填写服务器 IP 地址

【根目录】：当前站点文件的路径，可以自己选择创建点，尽量使用默认路径（www/wwwroot）方便管理。

创建站点成功后，进入目录下，删除默认网页文件，上传自己的网站文件，然后访问服务器 IP 地址就能看见自己的网站啦，到这里，网站建站就成功了

常见问题

建站失败报错

有时候登录到宝塔面板想要新建一个站点时，会出现建站失败的报错，一般情况下考虑 Nginx 配置文件有问题，可重新下载 Nginx，并重新配置 Nginx 配置文件

宝塔面板连接不上云服务器

这个报错我遇到过一次，登录上面板后一直弹窗说连接不上云服务器，后来百度各种解决方案，感觉比较靠谱的就是重新下载面板，但也有可能是端口占用问题。

端口未放行

以下云服务商，安装宝塔后需开端口，不开启将无法使用。

腾讯云：https://www.bt.cn/bbs/thread-1229-1-1.html
阿里云：https://www.bt.cn/bbs/thread-2897-1-1.html
华为云：https://www.bt.cn/bbs/thread-3923-1-1.html

更多详情，请查看【宝塔手册】序言 · 宝塔面板手册 · 看云

其实讲到宝塔面板，也涉及应用镜像这一块了，如果在选择服务器配置选择了应用镜像，那么首次访问服务器 IP 就会出现对应应用镜像的默认页面，对应的，在控制台页面也会给出登录各应用的控制面板，可自行根据需求操作。

常见的应用镜像说明

• wordpress 是全球最应用范围最广的开源的个人博客系统，并逐步演化成一款内容管理系统软件，具备使用简单、功能强大、灵活可扩展的特点，提供丰富的主题插件，该镜像还预装了 Nginx、php、Mysql 数据库，基于 Centos8.2 操作系统
• Node.js 是一个基于是一个基于 Chrome V8 引擎的 JavaScript 运行环境， 用于方便地搭建响应速度快、易于扩展的网络应用。该镜像基于 centos7.9 操作系统，预装了 Mysql。
• ASP.NET 是一个开源的服务端 Web 应用程序框架，用于构建动态网页、应用和服务。该镜像中内置 MySQL 8.0.19 数据库，基于 Windows Server 2012 R2 操作系统。
• LNMP 环境 LNMP 环境代表 Linux 系统下 Nginx + MySQL/MariaDB + PHP 组成的网站服务器架构。

各厂商的应用镜像描述不一样，可根据自己的需求选择对应的应用镜像。

连接服务器常见问题

拒绝远程连接

有时候使用 Xshell 远程连接服务器会出现拒绝连接这种情况，一般就是 SSH 连接端口没有开启，可在控制台安全组设置访问规则。

项目发布常见问题

页面停留在 Nganix 默认页

这个问题其实和上面的差不多，就是修改 Nginx 配置文件可能未生效，重新修改配置文件并保存退出，然后重启 Nginx 服务，重启服务器即可

图片加载不出来

这种情况我搭建网站的时候遇到过，说来惭愧，我有些静态资源是以中文命名的，比如有些图片，后来我把图片重命名后就加载得出来啦。还有可能就是自己的路径不对，改下路径就 OK 了。

总结

以上就是我在购买服务期后自己搭建网站的一些经验和总结，写这篇文章的目的也是为了能够帮助小伙伴们在购买服务器以及搭建网站的时候不那么费力，少走点弯路。同样，这也是我第一次尝试把自己的网页放到服务器上，并且能够成功访问，之前也没接触过到服务器有关的知识和操作，所以在这段路上我尝试了很多次，也失败了很多次，遇到过很多各种各样的问题，经过多方面的不断借鉴以及参考，终于成功在服务器上访问到了自己的网页。