发布你的网站

完成网站代码编写和文件整理后,需要将其发布到网上以便人们查找。本文介绍如何轻松地将简单的示例代码发布到网上。

有哪些选项?

网站发布是一个复杂的话题,因为有很多方法可以实现。本文不会尝试记录所有可能的方法。相反,它解释了三种对初学者来说比较实用的方法的优缺点。然后逐步介绍一种对许多读者来说可以立即使用的方法。

获取主机和域名

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

  • 网络托管是指在托管公司 Web 服务器 上租用的文件空间。您将网站文件放置在 Web 服务器上。Web 服务器向网站访问者提供网站内容。
  • 域名 是人们查找您的网站的唯一地址,例如 https://www.mozilla.orghttps://www.bbc.co.uk。您可以从 域名注册商 处租用域名,租期可长达数年。

许多专业网站都是以这种方式上线的。

此外,您还需要一个 文件传输协议 (FTP) 程序(有关更多详细信息,请参阅 费用:软件),才能将网站文件实际传输到服务器。FTP 程序种类繁多,但通常您需要使用托管公司提供的详细信息(通常是用户名、密码、主机名)连接到您的 Web 服务器。然后,该程序会在两个窗口中显示您的本地文件和 Web 服务器的文件,并提供一种在文件之间传输文件的方法。

An FTP client showing all files and folders of a website and uploading them to a server

查找主机和域名的提示

  • MDN 不推广特定的商业托管公司或域名注册商。要查找托管公司和注册商,只需搜索“网络托管”和“域名”即可。所有注册商都将提供一项功能,允许您检查您想要的域名是否可用。
  • 您的家庭或办公室 互联网服务提供商 可能会为小型网站提供一些有限的托管服务。可用的功能集将受到限制,但它可能非常适合您的第一次实验。
  • 还有一些免费服务可用,例如 NeocitiesGoogle SitesBloggerWordPress。有时一分钱一分货,但有时这些资源足以满足您最初的实验需求。
  • 许多公司提供托管和域名服务。

使用 GitHub 或 Google App Engine 等在线工具

某些工具允许您将网站发布到网上。

  • GitHub 是一个“社交编码”网站。它允许您上传代码存储库以存储在 Git 版本控制系统 中。然后,您可以协作处理代码项目,并且该系统默认是开源的,这意味着世界上任何人都可以找到您的 GitHub 代码,使用它、从中学习并对其进行改进。GitHub 有一项非常有用的功能,称为 GitHub Pages,它允许您在 Web 上实时公开网站代码。
  • Google App Engine 是一个功能强大的平台,允许您在 Google 的基础架构上构建和运行应用程序,无论您需要从头开始构建多层 Web 应用程序还是托管静态网站。有关更多信息,请参阅 如何在 Google App Engine 上托管您的网站?

这些选项通常是免费的,但您可能会超出有限的功能集。

使用基于 Web 的 IDE,例如 CodePen

有很多 Web 应用程序可以模拟网站开发环境,允许您输入 HTML、CSS 和 JavaScript,然后将该代码的结果显示为网站,所有这些都在一个浏览器选项卡中。一般来说,这些工具相对简单,非常适合学习,适合共享代码(例如,如果您想与同事共享技术或在不同的办公室寻求调试帮助),并且免费(对于基本功能)。它们会在唯一的 Web 地址上托管您呈现的页面。但是,功能有限,并且这些应用程序通常不提供资产(如图像)的托管空间。

尝试使用其中一些示例,找出最适合您的示例。

Screenshot of JS Bin web based IDE

通过 GitHub 发布

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

  1. 首先,注册 GitHub 并验证您的电子邮件地址。
  2. 接下来,您需要 创建存储库 以存储文件。
  3. 在此页面上的“存储库名称”框中,输入 username.github.io,其中 username 是您的用户名。例如,我们的朋友 Bob Smith 将输入 bobsmith.github.io。选中“使用 README 初始化此存储库”框。然后单击“创建存储库”。 GitHub 存储库页面的示例
  4. 将网站文件夹的内容拖放到您的存储库中。然后单击“提交更改”。

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

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

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

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

进一步阅读