发布您的网站

有哪些选择？

发布网站是一个复杂的话题，因为有许多方法可以做到。本文不打算记录所有可能的方法。相反，它解释了三种适合初学者的方法的优缺点。然后，它详细介绍了一种对许多读者都立即有效的方法。

获取托管和域名

为了更好地控制内容和网站外观，大多数专业人士/企业选择购买网络托管和域名。

• 网络托管是托管公司网络服务器上租用的文件空间。您将网站文件放在网络服务器上。网络服务器向网站访问者提供网站内容。
• 一个域名是人们找到您的网站的唯一网络地址，例如https://www.mozilla.org或https://www.bbc.co.uk。您可以从域名注册商那里租用您的域名，租期可以是你想要的任意年限。

如果您从同一家公司获取网络托管和域名，它们通常会自动配置以相互通信。但是，如果您从不同的公司获取它们，或者想将您的托管更改为不同的公司，您需要进行一些设置以将域名指向正确的服务器。这样，当人们导航到该网址时，他们将看到您的网站。这通常通过登录您的域名注册商网站，并将您的域名的名称服务器设置为您的托管公司提供的名称服务器来完成。

公司使用各种机制将文件传输到其网络服务器。许多公司将提供不止一种选项；典型的选项包括：

• 拖放界面（稍后您将在通过GitHub发布中看到一个示例）。
• 一个文件传输协议（FTP）程序。FTP程序种类繁多，但通常您必须使用托管公司提供的详细信息（通常是用户名、密码、主机名）连接到您的网络服务器。然后，程序会在两个窗口中显示您的本地文件和网络服务器的文件，并提供一种在两者之间传输文件的方法。
• 将网站源代码保存在GitHub仓库中（见下文），并授予托管公司访问权限，以便他们可以获取源代码，并在必要时构建和发布它。
• 一些公司将提供命令行工具供您使用来传输文件。

查找托管和域名的提示

• MDN不推广特定的商业托管公司或域名注册商。要查找托管公司和注册商，只需搜索“网络托管”和“域名”。所有注册商都将提供一个功能，允许您检查您想要的域名是否可用。
• 您的家庭或办公室互联网服务提供商可能会为小型网站提供一些有限的托管。可用功能集将受到限制，但它可能非常适合您的首次尝试。
• 还有一些免费服务可用，例如Neocities、Google Sites和WordPress。此类服务范围可能有限，但它们足以满足初步试验的需求。

使用在线工具

一些工具允许您在线发布您的网站

• GitHub是一个“社交编程”网站。它允许您上传代码仓库以存储在Git 版本控制系统中。然后，您可以协作进行代码项目，并且该系统默认是开源的，这意味着世界上任何人都可以找到您的GitHub代码，使用它，从中学习，并改进它。GitHub有一个非常有用的功能，称为GitHub Pages，它允许您将网站代码实时展示在网络上。
• Netlify是一个网络托管平台，可以直接从您的GitHub仓库为静态网站提供托管。它还提供许多附加功能，例如部署预览、无服务器函数和表单处理。
• Fly.io是一个平台，允许您将应用程序和数据库部署到靠近用户的地方。如果您的Web应用程序需要后端服务，这更适合。

这些选项通常是免费的，但功能集有限。

使用基于网络的IDE，例如CodePen

有许多网络应用程序模拟网站开发环境，允许您编写HTML、CSS和JavaScript，然后将其渲染并显示在输出窗格中。一般来说，这些工具易于使用，非常适合学习，擅长共享代码（例如，如果您想与不同办公室的同事分享技术或寻求调试帮助），并且免费（基本功能）。它们将您的渲染页面托管在一个独特的网址。但是，功能有限，这些应用程序通常不提供资产（如图像）的托管空间。

尝试使用以下一些示例，找出哪个最适合您

• Scrimba ^{MDN学习伙伴}
• JSFiddle
• JSBin
• CodePen

通过GitHub发布

现在，让我们看看如何通过GitHub Pages发布您的网站。

1. 首先，注册GitHub并验证您的电子邮件地址。

2. 接下来，您需要创建一个仓库来存储文件。在此页面上：

   1. 在仓库名称框中，输入用户名.github.io，其中用户名是您的用户名。例如，我们的朋友Bob Smith会输入bobsmith.github.io。
   2. 单击页面底部的创建仓库按钮。

3. 在下一页上，找到上传现有文件链接，然后单击它。这应该会将您带到文件上传页面。

4. 此时，您应该能够将文件从本地文件系统拖放到网页上，以将其上传到GitHub仓库。为此：

   1. 在您的计算机上打开一个文件浏览器/查找器窗口。
   2. 确保您可以看到文件浏览器和网页浏览器窗口——将它们并排放在屏幕上。
   3. 将文件浏览器窗口导航到包含您的示例网站的文件夹。

      注意：确保您的文件夹有一个index.html文件。

   4. 选择您的示例网站的所有文件（例如，使用Ctrl + A键盘快捷键，或在macOS上使用Cmd + A）。
   5. 将文件从您的文件浏览器拖到GitHub页面的“将文件拖到此处以将其添加到您的仓库”部分。
   6. 该部分的边框和文本会发生变化，表示可以放置文件。此时放下文件。
   7. 单击页面底部的提交更改按钮。

5. 将您的浏览器导航到用户名.github.io，以在线查看您的网站。例如，对于用户名chrisdavidmills，请访问chrisdavidmills.github.io。

   注意：您的网站可能需要几分钟才能上线。如果您的网站没有立即显示，请等待几分钟然后重试。

要了解更多信息，请参阅GitHub Pages帮助。

延伸阅读

• 什么是网络服务器
• 了解域名
• 在网络上做某事需要多少钱？
• 部署网站：来自Codecademy的一个不错的教程，它更进一步，展示了一些额外的技术。

• 上一页
• 概述：你的第一个网站
• 下一页