使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

最後更新於 2021 年 10 月 3 日

前文:使用 VuePress 從 0 開始建置自己的文檔網站 – (1)基本建置

安裝VuePress並設置好網站內容後,我們就需要將網站部署到平台上,否則只能在本機上瀏覽,無法供其他人觀看。

本篇教學使用 Firebase 來做部署,除此之外還可以部署到 GitHub Pages、Netlify…等。

安裝 Firebase CLI

Firebase 命令行界面 (CLI) 工具可用於從命令行測試、管理和部署 Firebase 項目。

透過指令安裝

npm install -g firebase-tools
firebase 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

注意:Firebase CLI 需要Node.js v10.13.0 或更高版本。

建立 Firebase 專案

登錄你的 Google 帳號後,進入 Firebase 網站建立專案

firebase2 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase
image 67 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

接著在專案根目錄底下創建 firebase.json.firebaserc 兩個檔案

firebase.json:

{
    "hosting": {
        "public": ".vuepress/dist",
        "ignore": []
    }
}

.firebaserc:

{
  "projects": {
    "default": "<YOUR_FIREBASE_PROJECTNAME>"
  }
}

登錄並測試 Firebase CLI

進入專案目錄底下輸入指令,遇到問題就回答 yes

firebase login

然後會自動彈出google登入頁面,登錄你 firebase 專案的 google 帳號:

firebase9 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase
firebase10 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

出現 Success! Logged in as youremail@email.com 字樣即為成功。

firebase11 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

接著輸入指令:

firebase projects:list

能獲取你的 firebase 專案列表代表連接已成功。

firebase12 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

建置 VuePress 專案

輸入指令

yarn build

我們會獲得 .vuepress\dist 資料夾,我們需要將這個資料夾的內容部署到 firebase

build1 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

初始化 Firebase 項目

輸入下方指令,Are you ready to proceed 輸入 Y

firebase init
init 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

使用上下鍵調整到 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys 選項,按下空白鍵選擇,並按 Enter 確定

init2 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

接著會詢問你上傳的目錄(預設是public),我們需要填入 .vuepress/dist

init3 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

剩下的問題根據個人需求回答,個人是全部寫 N

init4 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

完成之後會自動幫你重寫 .firebasercfirebase.json
.firebaserc :

{
  "hosting": {
    "public": ".vuepress\\dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

firebase.json :

{
  "projects": {
    "default": "myvuepress2021"
  }
}

部署到 firebase

完成以上步驟之後,輸入指令:

firebase deploy

即可將 VuePress 部署到 Firebase 上。

firebase13 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase

打開瀏覽器輸入 htts://yourprojectname.web.app 即可看到網站內容。

image 68 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase
firebase14 使用 VuePress 從 0 開始建置自己的文檔網站 – (2)部署網站到 Firebase
0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論