无术语指南 – 文章 2 – 让你的第一个网站上线

真正精彩的东西……

目录

• 介绍
• 关于本博客
• 读者须知
• 真正有趣的东西
• 如何部署我的网站？
• 了解细节
• 我如何找到主机？
• 在选择主机时需要注意什么？
• 如何创建域名？
• 下一步是什么？
• 设置指南
• 额外阅读——什么是云？
• 结论

介绍

对于一个 25 岁以上、在学校没有学过计算机科学的人来说，进入科技行业是令人畏惧的。

我今年 29 岁，我在学校接受的“技术”教育仅限于使用PowerPoint建立一个网站——是的——你没看错——就是 PowerPoint。

我跌跌撞撞地度过了一生，我知道科技是我很感兴趣的东西，但我一直认为它遥不可及。

如果您正在阅读这篇文章，并且感觉和我一样，那么我在这里告诉您……

科技就是为你而生！我的使命就是帮助你开启美好的未来。

关于本博客

欢迎来到我的博客——这是一系列面向新手的文章，旨在用非常简单的英语解释我发现具有挑战性的事情，以便对您来说轻而易举（希望如此）。

作为一个新手，我经常发现我读的指南里有一些我本来就应该知道的技术“内容”。它们似乎都要求读者具备相关领域的先验知识，所以我创建了这个博客，希望能帮助大家解决那些我觉得比较难的部分。

我乐于接受反馈，请在下方留言或在 Twitter 上联系我。我也乐于涵盖您认为最有用的主题，如果您有急切的问题/担忧，请联系我，我会尽力将其纳入本系列。

这是第二篇文章。我进行了一项民意调查，以了解首先要涵盖哪些主题，投票结果如下：

1. Git/GitHub - 参见此处
2. 主机/域名
3. Web Dev 到底是什么？（这将是对行业、角色、语言、工作选择等的概述）

只是为了让你知道接下来会发生什么😊

给读者几点说明

导航 - 您可以一口气阅读本指南的全部内容，也可以使用上面的内容列表跳转到您需要的部分。

本指南旨在为有抱负的 Web 开发者提供一站式学习部署首个网站的指南，并概述了 Web 的工作原理、主机托管和域名。我建议您通读全文，以便更好地理解，但如果您时间紧迫，可以直接跳到“设置指南”部分😊

本指南假设您对 Web 开发感兴趣并已开始学习以某种形式编写代码。

我已尝试用非常简单的方式解释一切，如果您觉得受到冒犯，我很抱歉，但作为一个发现其他指南过于技术性的人，我想尝试一种不使用行话的方法。

好吧，如果您还跟着我，那就让我们开始吧。

真正精彩的东西……

学习成果

在本文结束时，我希望您能够：
• 了解如何让您的网站公开可用
• 进一步了解网络的工作原理
• 了解域名以及何时可能需要域名
• 了解托管
• 了解不同的托管选项
• 了解一点云知识

如何使我的网站上线？

好了，你的第一个网站代码编写完成了！恭喜！

你现在用它做什么？

如何让其他人能够访问它？

说实话，如果你是个注重细节的人，需要知道为什么以及如何做，答案并不简单，而且它可能会把你带入一个你从未真正想过的兔子洞，但是……别害怕！本指南将逐步涵盖所有内容。

下一部分将介绍网络的工作原理以及这对您的网站意味着什么，但是，如果您着急，可以跳至此处的设置指南 。

现在，如果你真的想要了解详情，让我们来了解一下细节……

对于具有计算机科学资格的人来说，您可能知道访问网络的工作原理（您看不到的部分），但对于那些不熟悉的人来说，这里有一个图表：

正如你所知，我不是一名艺术家，但我希望这可以帮助你在更详细的解释之前进行形象化：

1. 登录您的电脑并打开浏览器。

2. 您的 PC 运行其协议
您的计算机具有内置网络软件，该软件运行“协议”来检查您是否具有访问网络的必要权限，它还会检查在网络和您之间交换数据时应使用的进程。

3. 您获得一个 IP 地址
您的互联网服务提供商 (ISP) – 为您提供互联网连接的公司，为您提供一个 IP 地址。

IP 地址
就像您电脑的返回地址，有些人认为他们的 IP 地址是永久的——其实不然。您的 IP 地址是临时的，并且可能随时更改，例如重启或路由器等简单操作都可能导致 IP 地址发生变化。每个 IP 地址都是唯一的，并确保数据返回到您的设备。

IP 地址是 4 组数字，每个数字有 1 到 3 位，每组数字之间用句号分隔，如下所示：

66.171.248.170

有趣的事实- 曾几何时，世界上的 IP 地址用完了，科技公司陷入了大规模恐慌，这导致 IP 地址迁移到最新版本 - IPv6，其理论上的最大数字组合数为：

340,282,366,920,938,463,463,374,607,431,768,211,456

🤯

4. 输入 URL 或域名

URL
完整的网址，例如：

https://www.google.com/
https://www.lauracharvey.dev/about-me.html

域名
网页名称，例如：

www.google.com
www.lauracharvey.dev

5. 你的浏览器弹出域名搜索

您的浏览器向域名系统 (DNS) 发送一条消息以获取域名的 IP 地址。

域名系统 (DNS)
一组非常复杂的服务器，其设置类似于互联网地址簿，它们负责将域名转换为 IP 地址，然后将其传回给您的浏览器。

服务器：
一种硬件（我想不出一个词来代替它——它就像一台真正的计算机，是一个可以触摸的物体）或软件（计算机程序），用于维护/管理/或服务计算机网络。服务器有很多不同的类型——如果你想了解更多，谷歌是个不错的选择。

6. 您的浏览器向服务器发送请求

要查看存储的文件，您的浏览器需要向存储数据的服务器请求权限。此请求通过 HTTP 发出。

HTTP
超文本传输​​协议——网络规则，用于决定如何传输消息和数据，以及服务器和浏览器在收到命令时应采取的操作。例如，您的浏览器向服务器发送“fetch”消息，然后服务器将网页传输到浏览器。

7. 服务器接受请求

然后，服务器使用 HTTP 将必要的数据发送到您的浏览器。

8. 您看到网页

您的浏览器将呈现一个闪闪发光的网页在您眼前！

这一切都发生在几秒钟内，当我意识到人类想出了整个系统时，我真的很震惊——我是说怎么做到的？！

很酷，我如何在万维网上找到一个家？

为了让您的网页在万维网上发布，文件、图片、源代码和其他数据都需要一个存放空间，以便浏览器轻松访问。因此，您需要在网络服务器上“租用”一些空间。这就像租一套公寓，只不过是用来存放文件。

除非您就职于大型机构，否则您的服务器（实际硬件）很可能由像 Blue Host 这样的网络托管公司拥有。他们拥有实际的物理服务器，这些服务器只是用于存储数据的大型计算机，您的网页会在其中一台服务器上分配一个空间，并拥有独立的 IP 地址。

正如您所想象的，服务器空间非常宝贵，因此通常您需要为托管服务支付费用。

有多种托管选项：

• 共享主机

您与其他人共享服务器，并且您无法控制该服务器的设置，硬件和软件由托管公司控制

• 专用主机

您租用整个服务器并控制其设置

• 虚拟专用服务器 (VPS)

就像共享和专用的混合体一样，它模仿专用服务器，以便您可以自定义设置，但实际上，它在物理上仍然是共享服务器，但您只获得相当于私人套件的东西！

• 云

我确信您一直都听说过云，当我听到人们谈论它时，我总是很困惑，我在想“它一定在某个地方，它不可能就在天上，或者可以吗？！”

需要确认的是，它并非架空，而是在物理服务器上，这些服务器遍布全球，并通过互联网连接。云之所以受欢迎，是因为人们只需连接互联网，就能在低配置设备上访问功能强大的应用程序。数据存储在云端，因此运行/存储数据无需占用大量内存。此外，软件背后的公司也无需维护任何自己的IT基础设施。

云是一个独立的世界，如果您想了解更多，我在这篇文章的底部添加了额外的阅读部分。

作为新手，您不太可能考虑专用服务器、VPS 或云，因此我暂时会选择共享主机。

好的，我如何找到主持人？

我真的很喜欢 Netlify - https://www.netlify.com/，因为它是免费的，而且使用起来非常简单，但如果你很挑剔，这里还有一些其他建议：

• Blue Host https://www.bluehost.com/
• Hostinger - https://www.hostinger.co.uk/
• HostGator - https://www.hostgator.com/
• A2 Hosting - https://www.a2hosting.com/

谢谢，但我实际上在寻找什么样的主持人？

您需要根据以下几点来选择主机：

• 网站类型

您想用来展示技能的个人网站、商业网站，还是一个有趣的业余项目？网站的类型、用途以及预期的访客数量，都会影响主机托管的选择。

• 您所需的带宽

带宽是指每秒以特定兆比特为单位传输的最大数据量。它指的是在特定时间段（例如一个月或一年）内，您的网站可以传输/接收的数据量。它有时会与网速混淆，但两者截然不同。基本上，一家预计页面访问量超过 2 万的大型公司需要大约 5000MB/5GB 的带宽，因此低于这个数字就足够了。不要支付过高的费用，否则您将得不偿失。仅供参考 - Netlify 提供 100GB 的标准带宽。

• 是否包含电子邮件？

如果您希望有人能够通过laura@lauracharvey.dev而不是 Gmail 或 Hotmail 帐户与您联系，您有时可以在托管包中获得此服务。

• 托管选项

以上已涵盖😊

• SSL 证书

这些是存储在服务器上的小型数据插件，它们可以安全地传输信息。如今，越来越多的网站使用它们，但如果您要收集敏感的个人信息或信用卡信息，它们就尤为重要。它们会激活 HTTPS 协议，因此网址将变为：

https://lauracharvey.netlify.app

而不是：

http://lauracharvey.netlify.app

好的，我已经选择了我的主机，我该如何给我的网站起一个好听的名字呢？

要拥有个性化的网站地址，您需要一个域名，它基本上就像您网站的邮政地址，您也可能知道它被称为URL（这与上面讨论的略有不同）。域名是唯一的，没有两个域名可以相同。

举个例子，如果我想拥有自己的域名，只要该域名没有被别人占用，我就可以：

www.lauracharvey.dev（我实际上是该网站的骄傲拥有者）

好吧，你可能会想，为什么我在主机上设置的时候不能直接这么叫呢？嗯……你可以这么做，但你得付费。

任何时候你想要一个以.com、.co.uk、.io之类的结尾的特定域名，你都必须支付年费才能保留它。所以，你肯定不想在不必要的情况下花钱购买域名（没错，我说的就是你，就是那个拥有 10 个附带项目，每个项目都有域名，但没有源代码的你……）。

目前，我建议将您的域名和主机放在同一个地方，这可能会稍微贵一点，但至少可以让您已经过度劳累的大脑少担心一件事！

如上所述，您的域名必须是唯一的，所以如果您的名字是 John Smith，您可能会很遗憾！如果您无法获取 johnsmith.com，您可以尝试不同的后缀，或者尝试使用中间名首字母，但别忘了……

如果您购买 johnsmith.com，johnsmith 后跟任何其他组合.co.uk、.io、.dev等均不包含在内，这可能意味着另一个 John Smith 可能会购买 johnsmith.dev，这可能会让搜索您的网站并最终访问他的网站的客户和雇主感到困惑。

此外，如果您购买域名是为了投资组合，那么它需要看起来很专业，所以不要选择类似这样的域名：johnsmith1990.com。

像 Name Cheap： https://www.namecheap.com/这样的网站非常适合搜索，如果您的域名不可用，它会为您提供其他选择。

您可能需要考虑购买前 3 个选项以将它们从市场上撤下，从而使其他人无法购买。

太棒了！我买了 johnsmith.com，现在怎么办？！

恭喜！您可以继续执行下面的设置说明；您也可以直接跳到第 1 点，快速上手。

设置指南

如果您直接跳到此处，本设置指南默认您不想知道具体操作方法和原因，仅提供网站部署的基本说明。如果您想了解详细信息，请从头开始阅读！😊

要部署网站，您需要托管，并且还需要决定是否要购买域名。

域名是人们了解和访问您的网站的方式，因此，如果您决定使用 Netlify 进行托管（例如）并且选择不使用特定域名，则您的网站 URL 将始终以以下内容结尾：.netlify.app/

例如：http://laurasrockpaperscissors.netlify.app/

但是，如果您选择拥有自己的域名，您可以决定它是否以.com、.co.uk、.io等结尾。唯一的麻烦是您必须为特权付费！

大多数托管服务都会提供购买域名的机会，但是，如果您真的很吝啬，您可能会在其他地方找到更便宜的域名！

在部署项目之前，您需要考虑：

• 网站类型
• 所需带宽
• 是否包含电子邮件服务
• 托管选项
• 是否包含 SSL 证书

今天，我假设您正在尝试部署一个个人项目，并向您讲解如何使用 Netlify 进行设置。

1. 首先，将您的项目发布到 GitHub。

如果您还不了解 Git 和 Git Hub，请查看我之前的文章，了解有关上传项目的完整说明。

1. 在此处设置 Netlify 帐户：https://www.netlify.com/

2. 链接你的 GitHub

在 Netlify 中，有一个按钮“从 Git 新建站点”

您将看到以下屏幕：

点击底部的“GitHub”

然后它会要求你登录 GitHub，然后它会拉取你活动的 repo

1. 选择你的仓库

一旦你的列表被拉出来，请选择相关的 repo。

1. 选择您的部署设置

如果您没有任何内容要添加，则可以将构建设置留空。

1. 部署站点

来吧，点击那个按钮！

1. 更改名称

您的网站将有一个疯狂的名字，因此请在此处进行更改：

如果您想更改名称并在地址中包含 .netlify.app，请参阅站点设置

如果您想选择/添加自己的域名，请访问域名设置

1. 惊叹于您在万维网上拥有的一小块地产！

额外阅读——什么是云？

云无处不在，本质上，云访问通过互联网连接的数百台服务器来为您带来内容。

它允许用户更轻松地访问应用程序，例如，如果您要将 Microsoft Office 下载到您的计算机上，您将需要一台功能足够强大的计算机来运行它，以及大量内存来存储应用程序及其数据，而如果您使用基于云的服务（如 Google Docs），您可以通过互联网访问相同的功能，而无需下载任何内容到您的计算机上。

在云计算出现之前，软件应用程序只能绑定在一台计算机上，您无法在 PC 和智能手机上访问相同的软件或数据。

云不属于任何人，而是集体管理，并且其易于访问的特性使得许多新应用程序可以免费提供，而一些旧应用程序可以以更便宜的价格提供。

例如，Adobe 应用程序的一个许可证过去要花费数百英镑，现在您只需每月支付费用即可访问整个 Adob​​e Creative Suite。

云计算也让这些应用程序背后的企业运营变得更加便捷和经济。企业现在在后端设置方面有了更多的选择，无需组建一整支IT专业团队，他们只需通过云端即可访问全部或部分服务。

云有三种类型：

• 公共
• 私人
• 混合

对于不同类型的云服务，还有一个类似层级的系统：

基础设施即服务 (IaaS)

这是最基本的级别，您可以租用后端服务，例如：服务器、存储、网络、防火墙等。

平台即服务 (PaaS)

PaaS 涵盖了 IaaS 的所有内容，但它还添加了“中间件”，包括操作系统、开发工具（由云提供商管理的易于访问的开发软件）、商业智能（分析）服务、数据库管理

软件即服务 (SaaS)

SaaS 最好被想象成一个大型组织，通过像 Microsoft Outlook 这样的大型网络使用该软件，该公司将从云提供商那里租用硬件和软件，以便所有员工都可以访问该应用程序。

还有：

无服务器计算

它与 PaaS 非常相似且交叉，但它具有高度可扩展性和事件驱动性，这意味着代码仅在必要时执行，因此“租用者”需要按确切使用量付费，而不是按订阅金额付费。

云计算服务的示例包括：

AWS
IBM Cloud
谷歌云

这就是我对云的了解程度，所以请不要提问！

开玩笑的，我喜欢问问题，来找我吧兄弟💪

结论

我真的希望本指南能帮助您了解部署第一个网站所需的步骤，并帮助您更多地了解网络，而不会被术语所困扰。

如果您有任何疑问或者我没有解释清楚的地方，请给我留言。

正如简介中所述，我正在编写一系列指南，因此如果您希望我介绍任何内容，请在 Twitter 上发表评论或联系我。

我很喜欢整理这个指南，所以请给我更多可以写的内容！😊