使用 Firebase Hosting 部署网站

2025-05-27

使用 Firebase Hosting 部署网站

市面上有很多便宜甚至免费的项目部署方案。其中我最喜欢的是 Google 的 Firebase Hosting 服务。

这是我第一篇用英语写的文章。我来自巴西，由于我的葡萄牙语还不够流利，我决定尝试用一种比葡萄牙语更广为人知的新语言写一系列文章，并借助翻译工具。所以，如果您发现任何错误，请提供反馈和指正。谢谢！

Firebase是 Google 的一套服务，为您提供BaaS（后端即服务），这意味着您无需再为项目部署后端而烦恼。Firebase Hosting是其中一项服务，您可以用它来部署用 HTML、JavaScript 和 CSS 编写的网站或 Web 应用。

我将向您展示如何在 Firebase Hosting 中零成本部署一个简单的网站。

创建项目

我们需要点击右上角的“转到控制台”。

Firebase 页面

Firebase 控制台。现在，我们点击“添加项目”来创建一个项目（我没找到如何在 Firebase 控制台上更改语言）。

替代文本

现在，我们选定了项目名称，继续！在我的项目中，我选择了“Firebase Lab”这个名字。

替代文本

您现在可以在这里禁用 Google Analytics：

替代文本

项目最终创建：

替代文本

部署网站

我们将创建一个文件夹和一个简单的 html：

$ mkdir firebase-lab-website
Enter fullscreen mode Exit fullscreen mode

看看文件夹中我们的简单 html：

firebase-lab-网站/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase Lab</title>
  </head>
  <body>
    <h1>Firebase Lab</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

现在，我们需要使用以下命令安装 firebase 的 CLI：

$ npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

现在，我们需要登录：

$ firebase login
Enter fullscreen mode Exit fullscreen mode

之后在网站目录中执行此命令并选择正确的项目：

$ firebase init
Enter fullscreen mode Exit fullscreen mode

  • 首先，使用空格键选择选项“托管：配置和部署 Firebase 托管站点”，然后按 Enter。

  • 其次，按 Enter 键选择“使用现有项目”选项。

  • 第三，选择您创建的项目。

  • 第四步，输入你的index.html文件夹。默认是“public”，但我这里是“./”。

  • 最后，我们需要说明您的网站是否是单页应用程序。

一切就绪！现在，目录中的最后一条命令是部署：

$ firebase deploy
Enter fullscreen mode Exit fullscreen mode

我们的网站上线啦！！

您可以在左侧菜单的“托管”选项中查看部署的详细信息：

替代文本

给我反馈！:) 谢谢！

文章来源：https://dev.to/gabrielrufino/deploy-a-website-using-firebase-hosting-4ek4
Devto 翻译
PREV
JavaScript 测试简介
NEXT
git 捆绑