使用firebase快速建立并上线一个静态网页

date
Dec 23, 2024
slug
fast-build-a-static-web-page
status
Published
tags
建站
Web开发
summary
使用firebase的快速建立一个可供访问的静态网页。我的Web开发基础还停留在大学的时候上过几门Web开发课程的水平…
type
Post
我的Web开发基础还停留在大学的时候上过几门Web开发课程的水平
想要自己一点点开发一个网站是不可能的
 
我们可以借助cursor来帮我们开发
因为网页十分简单 不想借助任何框架，就简单的html + css + javascript来做；如果你有觉得某个网站的UI还不错，可以直接截图给cursor，让他照着这个来做。
这是我的prompt
notion image
几秒钟就给我写好了
 
下面我们将它通过firebase发布
选择一个已有的项目（如果没有，可以新建一个）
→ 选择左边栏Hosting
→ 再添加一个网站
→ 输入一个唯一的 my-site-id ，后面可以通过 https://my-site-id.web.app 访问你的网站，这里我使用 cff-tools.web.app 后面还可以通过 cff-tools.firebaseapp.com 来访问
 
在firebase新建后之后，接下来就是在本地terminal里操作了
项目结构
  • index.html
  • style.css
  • script.js
位于同一根目录，在项目根目录里执行：
  1. 安装Firebase CLI npm install -g firebase-tools 已经安装过的话可以跳过
  1. 登录Google, firebase login 已经登录过也可以跳过
  1. firebase init 初始化项目，会跳出相关选项设置
      • 选择 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
      • Use an existing project 根据实际情况选择
      • 这里选择默认 用public目录
          • notion image
      • 完成之后会新增下列文件
        • .firebaserc
        • firebase.json
        • public 目录 里面会带有 index.html 和 404.html
  1. 将允许公开访问的资源移动到 public 目录，这里是：
    1. 在 firebase.json 中指定你的网站
      1. 本地测试 firebase serve
      1. 本地测试无误后 部署项目
          • firebase deploy --only hosting:cff-tools
      1. (可选) 你也可以选择添加自定义域名，根据它的提示，添加一条CNAME记录就可以了
      1. 成功之后过一会儿 就可以通过上面的域名访问你的网站了
       

      © cham 2023 - 2025