发布静态网站教程 (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 等,希望本教程对您有所帮助!
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。