发布静态网站教程 (HTML 应用程序主机 自动)
在本文中，我们将学习如何使用 HTML 应用程序主机自动发布静态网站，HTML 应用程序主机是一种托管服务，它允许您将静态网站部署到云端，以便用户可以通过网络访问您的网站，在本教程中，我们将使用 GitHub Pages 和 Vercel 这两个流行的 HTML 应用程序主机来演示如何自动发布静态网站。
步骤1：创建一个新的静态网站项目
我们需要创建一个新的静态网站项目，您可以使用任何文本编辑器创建一个新文件，Notepad++ 或 Visual Studio Code，将以下代码复制到新文件中，以创建一个基本的 HTML 页面：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>我的静态网站</title>
</head>
<body>
<h1>欢迎来到我的静态网站！</h1>
<p>这是一个使用 HTML 应用程序主机自动发布的静态网站示例。</p>
</body>
</html>
保存文件，并将其命名为 index.html。
步骤2：将静态网站部署到 GitHub Pages
接下来，我们将使用 GitHub Pages 将我们的静态网站部署到云端，确保您已经安装了 Git，按照以下步骤操作：
1、打开命令提示符或终端，导航到包含 index.html 文件的文件夹。
2、初始化一个新的 Git 仓库：git init
3、将 index.html 文件添加到仓库：git add index.html
4、提交更改：git commit m "Initial commit"
5、在 GitHub 上创建一个新的仓库，将其命名为 yourusername.github.io（将 yourusername 替换为您的 GitHub 用户名），这将作为您的网站的主页。
6、将本地仓库与远程仓库关联：git remote add origin https://github.com/yourusername/yourusername.github.io.git（将 yourusername 替换为您的 GitHub 用户名）
7、将本地仓库推送到远程仓库：git push u origin master
现在，您的静态网站已成功部署到 GitHub Pages，访问 https://yourusername.github.io（将 yourusername 替换为您的 GitHub 用户名），您应该能看到您的静态网站。
步骤3：将静态网站部署到 Vercel
除了 GitHub Pages，我们还可以使用 Vercel 将静态网站部署到云端，确保您已经安装了 Node.js，按照以下步骤操作：
1、打开命令提示符或终端，导航到包含 index.html 文件的文件夹。
2、安装 Vercel CLI：npm install g vercel
3、在项目文件夹中创建一个名为 vercel.json 的文件，并将以下内容粘贴到文件中：
{
"version": 2,
"name": "mystaticwebsite",
"builds": [{ "src": "index.html", "use": "@vercel/builders" }],
"routes": ["/*"],
"env": { "NODE_ENV": "production" }
}
4、将本地仓库与远程仓库关联：git remote add origin https://github.com/yourusername/yourrepositoryname.git（将 yourusername 和 yourrepositoryname 替换为您的 GitHub 用户名和仓库名称）
5、将本地仓库推送到远程仓库：git push u origin master
6、在浏览器中访问 Vercel，登录您的帐户并点击“Import”，输入您的项目名称、GitHub 用户名和仓库名称，然后点击“Continue”。
7、Vercel 现在将自动构建和部署您的静态网站，完成后，您将在浏览器中看到一个消息，指示您的网站已成功部署，点击“Go to your site”链接以查看您的静态网站。
至此，您已经学会了如何使用 HTML 应用程序主机自动发布静态网站，您可以根据需要使用其他 HTML 应用程序主机，如 Netlify、Firebase Hosting 等，希望本教程对您有所帮助！
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/473908.html
微信扫一扫