网页建站部署萌新向详细教程 - 让别人访问你的主页非常简单

写在前面

为什么想到写部署教程

最近向服务器商租借了一台虚拟主机vps用于搭建自己的代理，然后看着服务器上分配的几十GB空闲空间，想到何不顺道搭建一个个人主页放在上面呢？否则月租费交了，空间不用也是浪费。正好一直以来也是有搭建一个个人主页的想法，不用过于花哨，只要静态的html+css网页放一放自己的个人简历、文章索引、一些小资源就好了。写出一个静态网页能在本地浏览器预览很简单，但将它部署到服务器上，让别人能通过一个自己钟意的、好记的域名访问到它，这一流程环环相扣，萌新可能会碰壁良多，网上暂时也没有整合起来的中文文章。故在此写一篇比较详细的文章，为萌新梳理一下网站的搭建究竟是什么样的框架，需要什么样的流程。

不讲什么、会讲什么

• 本文不是html+css教程，如果还未入门html+css可以在 菜鸟教程html 和 菜鸟教程css 跟着教程学一学，在没有JavaScript和PHP脚本插手去实现一些成熟网站的fancy功能的情况下，学用html和css样式表写一个好看又有一定互动的静态网页真的非常简单，很快就能有所成。
• 本文会梳理一下一个html文件要被他人通过域名成功访问，究竟需要哪些平台工具和步骤。大部分文章都主要是博主为自己做的备忘、或是针对某一环节讲一些特殊事项，一般不会提及基本概念的梳理。本着对萌新的友好，我会从最基础的讲起。
• 本文会以Vultr服务器商+Freenom域名+DNSPod国内解析（即我的个人主页所使用的流程）为例，以实例来讲解一下具体的部署流程。

前置

• 本地需要有一套已经写好的、可以本地在浏览器中浏览的网页文件夹。遵从习惯，请将您的导览主页命名为index.html。如以下就是一个主页文件夹的的示例结构：

|- homepage
   |- index.html
   |- blogs.html
   |- resources.html
   |- about-me.html
   |- img
      |- img1.png
      |- img2.jpg
   |- icon
      |- icon1.png
      |- icon2.ico
   |- css
      |- style.css

• 如果想要学习一下有关部署的知识，但还没有成型的网页，也可以简单的写一个hello world先试试部署能否成功。
• 最好准备有架梯子的工具，因为目前Vultr等网站似乎已经需要梯子才上的去了。相信这并不是什么难事。

网页部署基本概念

一个网页文件能够被别人通过一个域名访问到，需要三个要素：

1. 服务器：承载存储你的网页的平台；每个主机都有自己的ip地址，别人能够通过这个ip地址顺利地访问服务器上的内容。
2. 域名：一个代替ip地址的、好听的、好记的“名字”，通过域名字符串，从而定位到你的服务器的ip地址，继而浏览器可以从上面获取网页文件。
3. DNS服务：将一串域名字符串和你的服务器的ip地址绑定起来的服务，没有它，域名和你的网页本身是无法关联的。

服务器

服务器商在网上提供租赁的网页用服务器一般是一些集中运行在机房大楼里的主机，他们维护这些主机持续地开机运行，然后将这些集群的存储和算力分割成不同大小的小块，在网上按不同的套餐价位将一块块空间和算力提供租赁。我们租到的一个“服务器”，实际上不一定是一台完整的电脑主机和一块完整的存储空间，而是租赁商分割出来的某一服务器集群中虚拟的一小块的使用权，简单来说这就叫虚拟主机（vps）。
一台租赁的/购买了永久使用权的虚拟主机（相信会看本文的读者一般也没有经济实力能自己购买、安置并持续维护一整台服务器吧）有几个重要的要素：

• 位置地点：这台服务器的机器本身在什么位置？例如在美国洛杉矶，或者日本东京。
• ip地址：每一台虚拟主机都必须有一个自己的ip地址，它就是一台机器在互联网世界中的门牌号，其他接入网络的设备可以通过这一唯一且独特的ip地址找到这台主机。这是计算机网络的基本知识了。
• 操作系统：这台虚拟主机上可以选择安装什么操作系统来提供服务。服务器端的操作系统一般是Linux系，如CentOS、Ubuntu等。你需要使用Linux命令行的基本能力。
• 用户名+密码：服务器商给了你虚拟主机的使用权，也就要提供你登入这台主机的用户以及密码，一般通过root用户登录，以及一串随机登录密码。
• 硬件条件：CPU、Memory和磁盘存储空间的大小。

拥有了虚拟主机后，我们就可以在其上安装网页服务客户端，然后把网页文件上传到上面，其他人就可以随时通过互联网访问到你的网页了。这台主机也就是常说的 服务器端/后端 ，而别人能够查看到的网站网页即 前端 。

域名

域名就是一个名字，一个名字字符串比ip地址的四个数字要好记的多，这就是为什么我们需要域名。就像你在地图上搜索一个目的地，你直接拿街道+门牌号搜索也能搜索的到，但总是搜索一个简单好记的地名更容易些。
简短的域名、或是特别好记或有特殊含义的顶级域名都很贵，但也有许多免费的域名暂且空闲，可以通过域名服务网站来搜索抢注和购买。有关域名的知识，可以参考 维基百科 。

DNS服务

DNS服务就是将一个域名和你的服务器的ip地址进行绑定的服务，即一条“什么名字对应你的服务器的门牌号”的记录。当注册了一个DNS服务，然后将域名和一个ip地址绑定之后，每当一个用户在浏览器中输入这一域名字符串，它就将这一字符串发送给DNS服务商，而后DNS服务将其 解析 到绑定好的ip地址发回给浏览器，从而浏览器就可以从这个ip地址访问到你的服务器，经由服务器上搭建好的网页客户端从上面获取网页信息。

详细部署流程实例

Step 0. 准备静态网页

本文的目的主要是部署中的概念和流程的解释教学，因此只会涉及最基础的静态html+css实现的网页的部署，不涉及任何JavaScript、PHP等动态脚本语言的运用，且不包括有关反向代理、流量控制和高级的安全控制等进阶内容。

本地网页编写

先在本地编写好静态网页及样式表，并在浏览器中本地打开，查看格式、链接跳转等是否正常，保证网页在本地先能够成功解析。（Tips：需要部署的网页在编写时需要考虑一下不同浏览器内核的css解析兼容问题，尽量在Chrome、Mozilla Firefox、IE等都测试一下，因为访问你的网页的用户可能使用不同的浏览器内核）。网页文件夹的大致结构参看上文。

</