帮助初学者理解如何上线网站

前几天我收到了一位名叫 Josh Long 的朋友发来的邮件。用他自己的话说，他“对网页设计比较陌生”，并且对网站上线的概念有些困惑。我应该说我很乐意收到这样的邮件，而且我总是会阅读它们，但我通常无法通过邮件提供技术支持。如果我能回复的话，我通常会引导人们去 其他社区资源。

在这种情况下，我意识到这对 Josh 来说是一个完美的时刻。他有点困惑，但他已经了解了一些知识，并开始提出很多问题，并尝试理清所有这些东西。我认为这是一个绝佳的机会来深入探讨他的问题，希望能帮助到他，也许还能帮助到其他处于类似境地的人。

以下是 Josh 发送给我的原始段落之一，未经编辑

我对网页设计比较陌生，但我参加了一些 HTML 和 CSS 课程，并且学习了 Codecademy 上的 JavaScript 课程。但是，（可能跳跃到相当长一段时间之后！）在完全设计和编写了一个 HTML/CSS/JS 网站或网页之后，我不完全理解从使用 mamp/wamp 托管的本地站点到使用 WordPress（？）或其他主机发布公共站点的完整过程，以及如何找到合适的服务器以及托管图像/视频或其他内容的方法。（如果听起来我好像不明白其中一半的意思，那是因为不幸的是我确实不明白！……但我真的很想了解！）

你能感受到这种热情吗？我爱死它了。

我们一起稍微修改了一下他的一些问题，以便用于这篇文章，但它们仍然是 Josh 的原话。让我们开始吧！

什么是 **域名注册商**？我理解它们是用于注册域名的，但它们之间有什么区别？你如何知道哪一个适合你？在 Google 上快速搜索“最佳域名主机”后，我看到了 5 个域名注册商/主机的广告，以及 9 个“十大”风格的页面，这些页面看起来似乎与他们推荐的至少一家公司存在某种关联。我只是寻找最便宜的那个吗？

你完全正确，域名注册商是用于注册域名的。如果你想要 **joshlongisverycool.com**，你就必须购买它，而域名注册商就是帮助你做到这一点的公司。

令人沮丧的是，网页搜索结果充斥着广告和充满联盟链接的 SEO 劫持页面。你永远无法从那里获得完全诚实的答案，因为这些页面充满了链接，这些链接会推广那些愿意支付最多费用以获取新客户的公司。甚至 Google 本身也会出售域名给你。

事实是，你不会在这里犯太大的错误。域名有点像商品，数百家出售域名的公司主要在营销方面展开竞争。

一些需要注意的事项

• **一些公司将域名视为亏本销售。**就像杂货店以低价出售牛奶，希望你在那里购买更多商品一样。任何域名注册商的结账流程几乎肯定会试图向你出售大量额外的商品。例如，他们可能会试图向你出售你可能不需要的其他域名或电子邮件托管。只需小心即可。
• **网页主机（我们接下来会讲到）通常会将域名与托管一起出售给你。**我想这也没什么问题，但我认为这有点利益冲突。假设你有一天选择更换主机。这家主机公司会不希望你轻易离开。如果域名在其他地方处理，那么该域名注册商就会有动力帮助你进行更改。

我不希望给你增加更多噪音，但这里有一些我个人使用过的域名注册商，**他们既没有支付赞助费用，也没有联盟链接**

• Hover
• GoDaddy
• Google Domains
• Network Solutions
• Amazon Route 53

我们自己的 Sarah Drasner 建议查看 ZEIT 域名，它们非常有趣，因为你可以在命令行中完全购买和管理它们。

如果可以预见你未来会拥有多个域名，我建议你将它们**集中到一个注册商**。管理域名不是一件经常做的事情，因此很容易忘记你在哪个注册商注册了哪些域名，更不用说如何在不同的注册商之间更改所有设置了。

我还建议你可以在这里进行尝试。我们所有人都是这样学习的。选择一个你不太讨厌的界面（UI）和一个值得信赖的氛围。也许你的朋友也使用那个。希望一切顺利。如果你不喜欢它，需要做一些工作，但你随时可以切换。

什么是 **网页主机**，为什么我需要它？Google 搜索会给你一大堆“最佳网页主机”的文章和广告。这些网站似乎都充满了诸如“共享主机”和“托管主机”之类的术语。我在某些网站上看到了“推荐主机”。你如何找到合适的主机？我甚至不确定我的需求是什么。我只是寻找最便宜的那个吗？

仅仅因为你**拥有**一个域名并不意味着它会做任何事情。事实上，在你购买域名后，域名注册商可能会为你设置一个“即将推出”页面

要在你的新域名上托管网站，你需要配置新域名的 DNS 以指向连接到互联网的服务器。这里有一个有趣的花絮……如果你愿意，可以直接从家里做到这一点。你家里的互联网服务提供商（ISP）可能会为你提供一个 IP 地址。这有点技术性，但你可以将你的域名指向该 IP，并设置你的电脑作为响应传入请求并提供网站内容的 Web 服务器。不过几乎没有人这样做。你不会希望你的 Web 服务器因为你关闭了笔记本电脑或你的 ISP 更改了 IP 而停止工作。

网页托管服务为你提供该服务器。与域名注册商一样，网页主机几乎也是一种商品。有很多主机提供类似的服务，因此价格被压得很低，它们会寻找其他方面来进行竞争。

不过，购买网页托管比购买域名要复杂一些。在做出选择时，你需要了解一些关于你打算托管的网站的信息。它会是一个 WordPress 网站吗？还是另一个基于 PHP/MySQL 的 CMS 网站（我们稍后会讲到这些）？这意味着你的主机需要支持这些技术。大多数主机都支持，有些则不支持。如果你不确定，可以查看其文档或直接询问他们，然后再做出决定。运行网站的技术有很多种。假设该网站将使用 Ruby on Rails——这有一套不同的要求，并非所有主机都提供。或者 Node……或者 Python……情况相同。

如果一家网页主机表示他们专注于特定的一组技术，而这正是你需要的，那么这可能是一个不错的选择，尤其是在你刚开始的时候。让我们简单地浏览一下。同样，这些不是联盟链接或付费链接，它们是我想到的一些随机选择的网页主机

• WP Engine 是一家专门专注于 WordPress 的网页主机。
• Media Temple 提供 WordPress 特定的托管服务，但也提供 更广泛的服务，从非常小且经济实惠的到大型且贴心的服务。
• BlueHost 提供 非常便宜的 托管选项，但具有与其他主机基本相同的功能。

现在，这里还有一些不太传统的网页主机。请原谅这里的一些技术术语——如果它们对你没有任何意义，只需忽略即可。

• Netlify 提供静态网站托管，这非常适合静态网站生成器和 JAMstack 网站等。
• Zeit 是一家你只能通过命令行与之交互的主机。
• DigitalOcean 有他们自己描述托管的方式。他们称他们的服务器为 Droplets，它们有点像具有额外功能的虚拟机。
• Heroku 非常适合托管具有 Node、Ruby、Java 和 Python 等即用型后端的应用程序。
• Amazon Web Services (AWS) 是一套 完整的产品，具有专门的托管重点，适用于非常高级的用户。Microsoft Azure 和 Google Cloud 类似。

同样，我想说，从某种意义上说，在这里犯一些错误是可以的。如果你托管的不是什么特别重要的东西，比如你的个人网站，可以选择一个看起来符合你需求的主机，然后试一试。希望一切顺利——如果不是，你可以迁移。迁移并不总是那么有趣，但每个人最终都会这样做，而且你会在过程中学习。

当你购买网页托管时，该主机会告诉你如何使用它。一种常见的方式是，主机会为你提供 SFTP 凭据。然后，你将使用专门用于通过 SFTP 连接到服务器的软件，这将允许你将文件上传到 Web 服务器。

这是一个神奇的时刻！

假设你一直在处理一个名为 index.html 的文件，它加载了一个 style.css 文件。通过 SFTP 将这些文件上传到主机告诉你的该站点正确的 **公共根目录** 文件夹中。

这就是将站点从本地迁移到线上的过程！它也没有什么问题。这被称为部署，这是最基本和最简单的部署方式。即使更高级的部署方式有时最终也会在幕后执行此操作。我们稍后会更深入地了解部署。

如果一家公司同时提供域名注册商和网页主机，你是否应该将它们捆绑在一起？

我上面稍微提到过这一点：我通常不建议这样做。一方面，它非常方便。例如，共享账单和单次结账流程。主机还会为你配置 DNS，以便你完全准备好使用他们的托管服务，你可能甚至不必考虑它。

但假设有一天你不再喜欢这家主机了。你找到了更划算的交易、超出了他们的服务范围、对他们的支持或服务感到失望，或任何其他原因。你想更换主机。问题在于，他们不仅是你的主机，而且还是你的域名注册商。你是否将域名留在他们那里，只更换主机？可能不会，你正试图离开他们。现在你需要迁移两样东西。这使得迁移变得更加危险，但更糟糕的是，这家公司并没有动力快速有效地响应你的请求，因为他们知道他们正在失去你作为客户。

什么是“CMS”？它的用途是什么？我发现WordPress、Joomla和Drupal是内容管理系统中最流行的名称，从它们的描述来看，它们听起来都很相似。是什么样的功能将它们彼此区分开来？仅仅使用CMS就能将网站从本地电脑发布到公网吗？

CMS（内容管理系统）是一个相当通用的术语。它字面意思是指任何可以帮助你管理内容的东西。正如你所看到的，有一些大型玩家，例如WordPress和CraftCMS。它们与在本地工作站上构建网站并将其发布到互联网之间并没有直接关系。但它们确实使这个过程变得更加复杂。

你使用CMS的原因是让网站的维护工作更容易。想想你现在正在看的这个网站。这个网站上有数万个页面。如果每个页面都是一个手工编写的file.html文件，那将是不可行的。

相反，CMS允许我们通过组合数据和模板来创建所有这些页面。

让我们考虑一下WordPress背后的技术，WordPress是一个对CSS-Tricks来说运行效果相当不错的CMS。为了让WordPress运行，它需要以下组件：

1. PHP（后端语言）
2. MySQL（数据库）
3. Apache（Web服务器）

你可以在本地完成所有这些！

我使用Local by Flywheel来实现这一点（适用于Mac和Windows），但还有许多方法可以使这些技术运行起来：MAMP、Docker、Vagrant等。

这将使你能够在本地启动并运行你的CMS。这是一件很棒的事情。为你的网站建立一个良好的本地开发环境至关重要。但它并不能帮助你将网站发布到线上。

我们稍后会详细介绍如何将所有这些内容发布到线上网站，但你应该知道：你运行的Web服务器将需要运行相同的技术。以上面的WordPress示例为例，你的Web服务器也需要运行PHP、MySQL和Apache。然后，你需要设置一个系统，将所有文件从本地电脑传输到Web服务器，就像你对任何其他网站所做的那样，但可能还需要一个处理数据库的系统。数据库有点棘手，因为它不是像网站其他大部分内容那样的“平面文件”。

CMS可以使用任何一组技术构建，而不仅仅是上面列出的那些。例如，参见KeystoneJS。Keystone使用Node.js而不是PHP。它使用MongoDB而不是MySQL作为数据库。它使用Express而不是Apache。只是一组不同的技术。这两者你都可以在本地和线上Web服务器上运行。

CMS甚至可以根本没有数据库！静态网站生成器就是这样。你可以在本地运行网站，它们会生成一组平面文件，然后你将这些文件移动到你的线上服务器。这是一种不同的方法，但绝对仍然是CMS。我一直说的是，最好的CMS是根据你的需求定制的。

什么是“资产托管”？资产不是内容吗？CMS和资产托管服务有什么区别？资产托管服务做什么？

让我们定义一下什么是资产：任何“平面”文件。也就是说，不是像CMS生成HTML文件那样动态生成的。图像是一个典型的“资产”示例。但也包括CSS和JavaScript文件，以及视频和PDF文件。

在我们继续之前：你可能不需要立即担心这个问题。你的Web主机可以托管资产，这对你在小型网站上的早期阶段来说已经足够了。

人们使用资产托管服务（可能更常被称为CDN或内容分发网络）的一个主要原因是为了提高速度。资产托管服务也是服务器，就像你的Web主机的Web服务器一样，但它们的设计是为了超快速地托管这些平面文件资产。因此，这些资产不仅能够超快速地交付给查看你网站的人，而且还能减轻Web服务器的负担。

你甚至可以将YouTube之类的东西视为资产托管服务。你花园里蝴蝶的100 MB视频对你那小小的Web服务器来说是一个沉重的负担，如果你的出站带宽有限制（通常情况下是这样的），那也可能是一个问题。将该视频上传到YouTube会将你的视频放到整个社交网络中，但除了社交方面之外，这么做的一个主要原因是它为你托管了该视频资产。

我听说过“仓库”（repositories），但并不真正理解它们是什么。我听到有人说“只需将其上传到我的Git仓库”。这到底是什么意思？我感觉自己很蠢，竟然要问这个问题。什么是Git？它有什么用？我需要使用它吗？它是否与“本地到线上”的过程相关？

很抱歉你遇到了一个“只需”的问题。在技术对话中，存在一种流行现象，人们会用它来让接下来要说的话听起来很简单且显而易见，但实际上，这对于不同的人来说可能并非如此。

但让我们开始谈谈Git仓库。

Git是一种特定的版本控制形式。还有其他一些版本控制系统，但Git在Web行业中占据主导地位，以至于几乎不值得提及其他任何系统。

假设你我正在一起开发一个网站。我们已经购买了域名和主机，并将网站发布到了线上。我们共享了SFTP凭据，以便我们都可以访问并更改线上网站上的文件。这可能非常危险！

假设我们都编辑了一个文件并通过SFTP上传了它……哪一个更改会生效？是最后上传文件的人。我们不知道谁做了什么。我们互相覆盖彼此的更改，并且无法同步彼此的更改，更改会立即影响线上网站，这可能会导致问题，而且我们无法撤销更改以防我们破坏了某些东西。这种情况是不可接受的，因此实际上从未发生过。

相反，我们使用版本控制，例如Git。使用Git，当我们进行更改时，我们会将它们提交到一个仓库。仓库可以托管在任何地方，甚至可以在你的本地机器上。但为了使其真正有用，它们通常托管在互联网上的某个地方，每个人都可以访问。你肯定见过GitHub，它托管这些仓库并添加了许多其他功能，例如问题跟踪。类似的平台还有GitLab和Bitbucket。

现在假设你我正在开发同一个网站，但我们为此设置了一个Git仓库。当我进行更改时，我将其提交到仓库。如果你也想要进行更改，则必须拉取我的更改，这会将它们合并到你的代码副本中。然后，你可以将你的更改推送到仓库。就像任何事情一样，它会变得越来越复杂，但这就是它的核心思想。

但Git仓库并不是线上网站本身。你需要自行将文件从Git仓库传输到线上网站。幸运的是，每个人都会遇到这种情况，因此有很多选择。好消息是你的最后一个问题就是关于这个的！

好的。现在所有这些都理清了……从本地到线上，你从哪里开始？你将HTML、CSS和JavaScript文件“上传”到哪里？如何将你闪亮的新域名链接到这些文件并在网络上查看它？哪个服务负责向你的网站添加新内容或更新内容？如果每个服务都由不同的公司提供，是否会变得非常混乱？

让我们从一个我认为是典型Web主机上的非常简单的网站开始。假设你的本地电脑上只有index.html、style.css和script.js文件，它们构成了你的整个网站。你已经购买了一个域名并将DNS设置指向一个Web主机。该主机已为你提供了SFTP凭据。你将在允许SFTP连接的应用程序中使用这些凭据登录

你的主机还会告诉你哪个文件夹是网站的“公共根目录”。该文件夹中的文件将公开发布到互联网上，供全世界查看！

你可能会听到人们将“线上”网站称为“生产”网站。当有人问类似“那个错误是否已进入生产环境？”这样的问题时，他们指的是该错误是否出现在线上网站上。“开发”环境是指你的本地电脑。你可能还会有一个“登台”网站，它是线上网站的克隆，位于与线上网站相同的硬件/软件环境中，用于测试。

还记得我们之前谈到的Git仓库吗？虽然仓库本身并不能直接帮助你将其中的文件传输到Web服务器，但大多数帮助你完成本地到线上过程的系统都与你的仓库配合使用。

“本地到线上”指的是部署。当你想将更改发布到你的生产网站时，你需要部署它们。这是将你的工作从“开发”环境移动到“生产”环境的过程。

Beanstalk是一个有助于部署的解决方案。Beanstalk托管你的Git仓库，此外你还需要提供服务器的SFTP凭据——这样，当你在仓库中提交更改时，它就可以将文件移动到你的Web服务器上。很酷，对吧？假设你想要在其他地方托管该Git仓库，例如GitHub、Bitbucket或Gitlab。看看DeployBot，它执行相同的操作，只是它还可以连接到这些网站。到目前为止，你可能已经不感到意外了，这里有很多选择，价格和复杂程度各不相同。

让我们回到我们的WordPress示例。

1. 你在本地（电脑上）完美地运行了它，现在想将其发布到线上。
2. 你已从注册机构购买了一个域名。
3. 你已购买了满足WordPress要求的主机。
4. 你已将域名的DNS指向Web主机。
5. 你已验证一切正常（简单方法：通过SFTP将index.html文件上传到公共根目录，并验证在浏览器中输入域名时它是否可以加载）。

现在，你还有其他一些工作要做

1. 为网站设置一个Git仓库。
2. 设置一个部署服务，将文件从仓库移动到线上网站。
3. 根据需要配置/设置线上网站。例如，你需要在线上网站上创建一个数据库。你需要创建它（你的主机会有相关说明），并执行一些操作，例如运行WordPress安装程序并更新配置文件。
4. 如果你想将本地数据库中的内容移动到线上网站，你可能需要导出/导入这些内容。这可以通过使用WordPress的原生导入/导出功能或WP DB Migrate Pro之类的插件在原始MySQL级别进行。

这是一个不小的工作量！抱歉。但是，这个过程对于任何网站来说都非常相似。你需要配置并设置你的生产Web服务器使其完全符合要求，然后将文件部署到其中。每个网站都略有不同，但你会逐渐掌握整个流程的。

这确实是一场大舞会。我在这里只为你描绘了一幅画面。我试图选择一幅通用且足够广泛的画面，以便展现需要完成的工作的大致情况。但是，在这个过程中，每个步骤都有不同的方法可以做，不同的服务可以选择，不同的公司试图在不同的痛点上提供帮助……这是一个不断变化的世界。

现在，Netlify 非常受欢迎，因为它是为数不多的真正帮助你部署网站的 Web 主机之一。它们会监视你的 Git 代码库，并为你完成部署！Netlify 仅适用于静态网站，但这本身就是一个广阔的世界。ZEIT 在帮助部署和托管 Web 项目方面也极具创新性，包括直接连接 GitHub。

---

祝你好运！

希望这篇文章对你有帮助。记住，你并不孤单。无数其他开发者都曾走过这条路，你可以在互联网上找到帮助。

哦，还要记住：学习任何东西的最佳方法是……