TOC
Firebase 體驗
- 同時支援 Android、iOS 及網頁的 app 雲端開發平台
- 快速綁定 DNS 自動上 https
- 支援基本 Authentication
- 可對線上網站進行版本控制
- 可輕鬆進行 A/B testiing
環境建置
以下列資訊為例 專案名稱: blog
- 安装 hugo
brew install hugo
- 新建 blog 專案
hugo new site blog
- 進入 blog 目錄
cd blog
初始化樣板
以下列資訊為例 專案名稱: blog 版型作者: author 版型名稱: theme-name
建立
themes資料夾並下載版型mkdir -p themes && cd themes && git clone https://github.com/author/theme-name.git
建立 git 子模組
git submodule add https://github.com/author/theme-name.git themes/hugo-creative-portfolio-theme
直接套用
樣板範例(要先到專案根目錄)cp -r themes/theme-name/exampleSite/* ./
常用指令
本地端建置
hugo
啟動本地端 dev 模式 (Live Reload)
hugo server
使用 theme (可依照同目錄結構切換版型)
hugo -t theme-name
新建文章
hugo new PAGE_NAME.md- 會按照
archetypes內對應的 type 新增一篇文章
小技巧
- 可以個
draft資料夾在根目錄下當作草稿資料夾 - 將版型另外命名成自己客製化的名稱
- 在
config.toml將 theme 指向自己的 theme 資料夾
- 在
好用工具 or 套件
- 安裝 cli
npm install -g firebase-tools
- 登入 google 帳號 (會另開視窗)
cd <部落格資料夾>
firebase loginfirebase init- 選
Hosting即可 - 看看
https://console.firebase.google.com/project/<專案名稱>/hosting/main
啟動
firebase serve
-
可以在 markdown 右鍵選擇快速新增 table
部署 BLOG
hugo && firebase deploy
結合 CI/CD
即 git push 就觸發部署
- 取得 firebase 部署用的 token
firebase login:ci
- 編寫 CI/CD 相關 yml 檔
- 設定 REPO
- 至 repo 設定 CI/CD 區塊
- key:
FIREBASE_TOKEN - Value:
<token>
遇到問題
ERR_CONNECTION_REFUSED css- 應該是 functions 資料夾底下的 npm 有問題
- 靠北 結果是 functions 底下在容器裡得先裝 eslint
- 解法
- init 時不要裝 functions
- 刪除 functions 資料夾
Unexpected rules format- 要改 firebase.json
網站無法驗證DNS
- 在
GoDaddy的 域名部分要用@ - 參考連結
- 在
參考連結
- 請 Toby 喝珍奶，你請我就喝 -
Lil Toby Blog
YA~大杯還小杯～看你誠意 ❤ ️
使用手機掃描 QRCODE 完成 pay 下去就對
