---
tags: 網頁架設
---

# Firebase Hosting｜架設靜態網站

> ### 主要步驟：
> 1. Installation｜創建專案＆安裝
> 1. Initializing & Testing｜初始化專案＆測試
> 1. Deploying a Static Website｜部署靜待網站

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

---

### Installation｜創建專案＆安裝

---

創建專案

↓

為專案命名

專案 ID 可以嘗試設定其他名稱，名稱只要沒有被使用過都可以。


↓

按造指示，進行下一步(共3步驟)

↓

等待系統安裝設置

↓

點選 Hosting → Get started

↓

因為後續要使用 npm，所以要安裝 Node.js

可啟用終端機 輸入：node -v
若有顯示出版本號，則代表曾經安裝過，可依需求更新。


↓

依循指示步驟進行

**步驟1. Install**
使用終端機 輸入指令 npm install -g firebase-tools

若你是使用 Mac 系統，則需要系統權限，
指令需要改成 sudo npm install -g firebase-tools
然後輸入系統密碼，即可安裝成功。



欲確認是否安裝成功：
於終端機輸入 firebase -V
有出現版本號即安裝成功

↓

步驟2. Deploy
使用終端機 輸入指令 firebase login
(若已經登入會顯示 Already logged in as “帳號名稱”)
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

---

### Initializing & Testing｜初始化專案＆測試

---
於你的專案程式中使用終端機 輸入 firebase init

// 在我們的專案輸入以下指令，如果你是第一次使用的話他應該會要求你登入
firebase init

// 選擇你要的功能，我們選擇hosting就行了，在下一步選擇你要的專案
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. 
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

使用預設公開即可，若不是一頁式網站，第二個問題請選 No ↓

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No

↓

將你要上傳的資料全部移動至 public 資料夾中

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

---

### Deploying a Static Website｜部署靜待網站

---
最後步驟，完成專案上傳
`於專案中使用終端機 輸入 firebase deploy`


↓

完成上傳後可於 firebase 看見歷史版本紀錄

↓

點選版本儲存空間設定，可保留更多歷史版本，供日後回復。

---
參考資料：
* [Firebase Hosting Tutorial #1 - Intro & Installation](https://youtu.be/mmmaeHBCTOw)
* [Firebase Hosting Tutorial #2 - Initializing & Testing](https://youtu.be/qbxj_36UkWs)
* [Firebase Hosting Tutorial #3 - Deploying a Static Website](https://youtu.be/GzG1hqej7UQ)
* [如何使用firebase hosting架設靜態網站](http://ben-do.github.io/2016/06/15/firebase-hosting/)
* [Day17 實戰！將專案打包部署到firebase](https://ithelp.ithome.com.tw/articles/10215478)
* [关于node.js：尝试安装Firebase时出现安装错误](https://www.codenong.com/51235225/)
*

---
###### tags:`firebase`