发布静态网站教程：怎样用 html 应用程序主机自动完成部署_好文分享

如何利用 HTML 应用程序主机自动部署静态网站

在当今数字时代，网站是一个人或企业展示其品牌、散播信息并与受众互动的有效方式。但是，当您想要建立一个自己的网站并让其在互联网上可用时，退缩的最大挑战之一之一是维护其服务器。然而，HTML 应用程序主机将是这一问题的解决方案。在这篇文章中，我们将讨论 HTML 应用程序主机以及它如何帮助您自动发布静态网站。

步骤1：创建一个新的静态网站项目

首先，您需要打开一个文本编辑器（如 Visual Studio Code 或 Notepad++）并创建一个新的文件。创建一个默认的 HTML 页面，并按照以下示例代码进行编辑：

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>我的静态网站</title>
    </head>
    <body>
      <h1>欢迎来到我的静态网站！</h1>
      <p>这是一个使用 HTML 应用程序主机自动发布的静态网站示例。</p>
    </body>
  </html>

保存文件，并将其命名为 index.html。

步骤2：将静态网站部署到 GitHub Pages

接下来，我们将使用 GitHub Pages，这是一个流行的 HTML 应用程序主机将我们的静态网站部署到云端。在继续操作之前，请确保已经安装了 Git。

使用命令提示符或终端导航到包含 index.html 文件的文件夹，然后执行以下步骤：

初始化一个新的 Git 仓库：git init
将 index.html 文件添加到仓库：git add index.html
提交更改：git commit -m "Initial commit"
需要一个名为 yourusername.github.io 的新存储库，其中 yourusername 是您的 GitHub 用户名。该存储库将成为您的网站的主页。
将本地存储库与远程存储库相关联：git remote add origin https://github.com/yourusername/yourusername.github.io.git（将 yourusername 替换为您的 GitHub 用户名）。
将本地存储库推送到远程存储库：git push -u origin master
现在，您的静态网站已成功部署到 GitHub Pages。在浏览器中访问 https://yourusername.github.io（将 yourusername 替换为您的 GitHub 用户名），您应该能看到您的静态网站。

步骤3：将静态网站部署到 Vercel

除了 GitHub Pages，我们还可以使用 Vercel 将静态网站部署到云端，确保已经安装了 Node.js 并按照以下步骤操作：

打开终端并导航到包含 index.html 文件的文件夹。
安装 Vercel CLI： npm install -g vercel
在项目文件夹中创建一个名为 vercel.json 的文件，并将以下代码复制并粘贴在其中：

    {
      "version": 2,
      "name": "my static website",
      "builds": [{ "src": "index.html", "use": "@vercel/builders" }],
      "routes": ["/*"],
      "env": { "NODE_ENV": "production" }
    }

将本地存储库与远程存储库相关联：git remote add origin https://github.com/yourusername/yourrepositoryname.git（将 yourusername 和 yourrepositoryname 替换为您的 GitHub 用户名和您在步骤3中创建的存储库的名称）。
将本地存储库推送到远程存储库：git push -u origin master
在浏览器中访问 Vercel 网站，在该网站中登录并点击 “Import Project”按钮，输入您的项目名称、GitHub 用户名和存储库名称，然后点击 “Continue”按钮。
Vercel 将自动构建和部署您的静态网站。完成后，您将在浏览器中看到消息通知，指示您的网站已成功部署，点击“Go to your site”链接以查看您的静态网站。

结论

在本文中，我们已经学习了如何使用HTML应用程序主机自动发布静态网站。我们已经了解了在 GitHub Pages 和 Vercel 中发布静态网站的步骤，这两个 HTML 应用程序主机都是强大的工具，可轻松地构建和部署网站。现在，您已经了解了如何将您的静态网站添加到这些 HTML 应用程序主机中之一。希望这些知识可以帮助您轻松地开始构建您的静态网站，并展示您的技能和才华。