Yingchao’s lesson learnt notes

在這篇筆記中，將紀錄如何在 n8n 中設定 Google OAuth2 認證，以串接像是 Google Sheets、Gmail 或 Google Drive 等服務。 最後也加上在設定過程中可能會遇到的常見錯誤，尤其是在 自架環境 中非常容易發生的 redirect_uri_mismatch 問題，並提供解法。 📦 你需要準備的環境 已運行中的 n8n（本機或雲端部署均可） Google 帳號 Google Cloud Console 存取權限 在 Google Cloud Console 建立 OAuth2 憑證 前往 Google Cloud Console 建立一個專案（或使用現有專案） 到 API 和服務 > 憑證 點「建立憑證 > OAuth 用戶端 ID」 👉 若首次設定會要求填寫「OAuth 同意畫面」： 使用者類型：選「外部」 填寫應用名稱、支援信箱 可略過 Scopes 設定（或先加入基本 openid/email/profile） 加入測試用戶（輸入你自己的 Gmail） 然後建立 OAuth 用戶端 ID： 應用類型：網頁應用程式 ...

🧪 TL;DR <n8n-demo> 是官方推出的 Web Component，可以把 n8n workflow 直接嵌入網頁，讓讀者不用進 n8n 編輯器也能理解流程。本文教你怎麼在 Hugo 網站中啟用這個功能，從設定 unsafe HTML、建立 shortcode 到把 workflow JSON 編碼成可用格式。適合想要在技術部落格中分享 n8n 範例的你。 ✨ 什麼是 <n8n-demo> 組件？ <n8n-demo> 是官方提供的 Web Component，可用來視覺化預覽 n8n 的 workflow。這可以直接在網頁中嵌入一個互動式流程圖，讓讀者不必進入 n8n 編輯器，也能快速理解整體流程邏輯。 如果沒有這個組件，要達到同樣的效果可能會非常繁瑣。就必須要： 匯出 workflow JSON 截圖或自行繪製流程圖 解釋每個節點如何運作 或嵌入 iframe 指向 n8n 編輯器（但這通常不公開） 有了 <n8n-demo>，只需要貼上 workflow JSON 編碼成 URL 的格式，就能直接顯示清晰的圖形介面，大幅減少說明成本，也讓讀者更容易理解。 ✅ 步驟一：設定 Hugo 允許 HTML 在 config.toml 中啟用 unsafe HTML，否則 Markdown 中的 <script>、<n8n-demo> 等 HTML 會被過濾。 ...

基本設置與 IP 分配配置 安裝：從 SourceForge 下載 Open DHCP Server（例如 OpenDHCPServerInstaller64bitV1.84.exe），安裝至預設路徑（C:\OpenDHCPServer）。 服務啟動：執行 InstallService.exe 註冊服務，在 services.msc 中啟動「Open DHCP Server」。 配置文件（OpenDHCPServer.ini）： [LISTEN_ON]：指定網卡 IP，例如 192.168.1.2。 [RANGE_SET]：設置 IP 分配範圍，例如 DHCPRange=192.168.1.100-192.168.1.150。 重啟服務以生效。 測試：將設備設為「自動獲取 IP」，確認是否獲取範圍內的地址。 指定網卡分配 IP 確認網卡 IP：用 ipconfig 查看目標網卡的 IPv4 地址（例如 192.168.1.2）。 修改配置： [LISTEN_ON] 192.168.1.2 注意： 網卡需設為靜態 IP。 防火牆需允許 UDP 67 和 68 端口。 日誌分析與問題排查 日誌範例（OpenDHCPServer.log）： [08-Apr-25 13:43:49] Listening On: 192.168.1.2：服務正常監聽。 Warning: No IP Address for DHCP Static Host...：靜態主機未指定 IP。 Warning: Section [HTTP_INTERFACE], invalid entry...：HTTP 配置錯誤。 解決靜態主機警告： 在 [STATIC_HOSTS] 中添加： [STATIC_HOSTS] 00:ff:a4:0e:ef:99=192.168.1.10 修復 HTTP 問題： 確保 [HTTP_INTERFACE] 格式正確： [HTTP_INTERFACE] IP=127.0.0.1 Port=6789 檢查防火牆（TCP 6789）與端口衝突（netstat -an | find "6789"）。 HTTP 介面無法訪問 (127.0.0.1:6789/localhost:6789) 問題：IP 分配成功，但無法連上 HTTP 介面。 排查步驟： 確認端口監聽：netstat -an | find "6789"。 修正配置並重啟服務。 開放防火牆 TCP 6789。 測試：curl http://127.0.0.1:6789。 未解決時：檢查日誌是否有 HTTP 相關錯誤。 CLI 查看 IP 分配狀態 方法 1：監控日誌： PowerShell：Get-Content "C:\OpenDHCPServer\OpenDHCPServer.log" -Tail 10 -Wait。 cmd：迴圈 type 與 timeout。 方法 2：提取 HTTP 資訊（需修復 127.0.0.1:6789）： curl http://127.0.0.1:6789。 PowerShell 迴圈：while ($true) { Invoke-WebRequest -Uri "http://127.0.0.1:6789" | Select-Object -ExpandProperty Content; Start-Sleep -Seconds 5 }。 方法 3：檢查租約文件： 查看 DHCPLeases.ini：type "C:\OpenDHCPServer\DHCPLeases.ini"。 PowerShell 即時監控：Get-Content "C:\OpenDHCPServer\DHCPLeases.ini" -Tail 10 -Wait。 推薦配置範例 [LISTEN_ON] 192.168.1.2 [RANGE_SET] DHCPRange=192.168.1.100-192.168.1.150 [HTTP_INTERFACE] IP=127.0.0.1 Port=6789 [GENERAL] DefaultLeaseTime=36000 [LOGGING] LogLevel=Normal 注意事項 防火牆：確保 UDP 67/68（DHCP）和 TCP 6789（HTTP）端口開放。 衝突：關閉網路中其他 DHCP 服務（如路由器）。 靜態 IP：網卡 IP（192.168.1.2）需設為靜態，避免與範圍重疊。

shields.io 是一個生成靜態和動態徽章的線上服務，適用於類似 GitHub, GitLab 等專案頁面。透過調整 URL 參數，可以輕鬆地創建顯示專案狀態和顏色匹配的徽章。對於簡單的動態徽章，例如 last-commit，可以直接構造 URL，而對於複雜的動態徽章，如網頁訪問量等，則可能需要額外的工具，如 substats，來獲取數據。 其實，如果是靜態的徽章，使用起來非常簡單。只需按照以下格式撰寫圖片的 URL，即可直接插入到 Markdown 中： <!-- badge 加上連結的語法 -->  <!-- badge 加上實際連結 --> [](https://github.com) 效果如下 客製 Logos 在網站上有時候希望加入一些徽章（badge）時，可能會到網站上自訂想要的樣式。然而，由於世界上有如此多的徽標，shields.io 並未將所有徽標都收錄在資料庫中，因此它提供了客製化徽標的方式。 任何自訂徽標都可以透過將其進行 base64 編碼後，作為 URL 參數傳遞。例如： 我想要使用下面 github 這張圖片作為 badge 的 logo 首先我必須將圖片下載下來，再上傳至 cloudconvert 網站轉檔之後將圖片大小更換成 14px 正方形尺寸的圖片 再上傳至 b64 可以得到如下的資訊。 /* file size: 1ko | optimized file size: 0.8ko | base64 size: 1ko */ .github-logopng { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAABqlBMVEUAAABnZ2d3d3f///8CAgIhISH09PTp6enLy8u2trbF4uiutbo5Nzbw8PCw/f8Auv/6/v8L0//u/P905v/z/f/3/v/G9f+GhoZgYGCgoKCqqqqmpqaXl5dgYGCLi4tRUVEPDw8cHBwbGxsaGhoZGRkRERFZWVlCQkI/Pz/////V1dUhISEdHh63t7ft7e3h4eHR0dInJiYpJiW8vb3i4uLq6urj4+PS0tLS0tJSUVGad2VJRkTNzc7Q0NDf39/o6Ojf3t7Hzs+Lk5J3bGajg3KWcF2ohXN6aV91d3f////b29vl5eXY8vhzf39ZYF85PTwJCQoICAg1Njfs9/yHhYVOTUsuLi0eHh4eHh42Njb8/PzK//+g9/9EanIeNDgeNTk0VFyK3/Kz8/+V7P9o4fyE6v////+s8P+E6v9p0/9bw/9aw/9lz/9+6f+d7f/////O7f+y4f+v4f/F6//y/f8EBAQAAAAdFhJfSj9dRztcRTpiTEAlHBiYdGPqrZ37v6H+waHrr56pgXDqrp37vqD9v5/tsp+uhXOWbltGqtY8lr8/msFBoM1i3Pkn9f8rAAAAdXRSTlMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACFRGxcYH1IdXvTR0dPW81N8gwEOwMoTBA0jydQqDwY3bGan/bpnbEoSFyV3mtj+5aQvCRYXHJOXsff6pgwZfMnl56kIEVvF9fXXcyNr+aIHKJHH2tzPpkUDFSQmGgfx/2dVAAAAiUlEQVQIW2NkQAGMQCTGCAFP/gG5zIzSUO7930Au2y91P6Aahv+bGe/9ZGTgUGL0AUtuYLzznVEPyIBxgcAMRHiCiC0gwh4sw+i8D0IzcDlBGIw7fvwFWcTpAeFu/gxyBjO3L1R6LeMHIJcviFEVxLvBuOYdkCsQApXd/foN0D3MQlFg3qK3fxkAiHIfzSIHcYEAAAAASUVORK5CYII=); } 加入自定義 logo 後 badge 的效果如下 ...

TL;DR Hugo 介紹: Hugo 是一個開源的靜態網站產生器，擁有極快的網站架設速度，適合用於建立網站的框架。 Docker 設定與建置: 提供了詳細的 Dockerfile 以及如何使用它來建構 Hugo 的 Docker image，並且說明如何啟動、停止和刪除容器。 Hugo 的基本用法: 包括 Hugo 的安裝測試、命令查看、建立網站、處理草稿和過期內容、以及開發和測試網站的方法。 部署網站: 提到如何在準備部署網站時，透過 Hugo 建立網站，並且說明了在簡單的託管環境中如何上傳文件，以及使用 CI/CD 工作流程進行網站部署的常見做法。 附加功能: 也介紹如何使用 LiveReload 進行即時重新載入和自動重定向，以提升開發體驗。 Docker Setup 首先建立 dockerfile, 能夠建立 image, 使用這個 image 建立 container. FROM golang:alpine as builder ENV GOGC=50 # gcc/g++ are required to build SASS libraries for extended version RUN apk update && \ # [自選] 編譯 Image 時間較短 apk add --no-cache --repository=https://dl-cdn.alpinelinux.org/alpine/edge/community hugo && \ # [自選] 編譯 Image 時間太長 # apk add --no-cache gcc g++ musl-dev git && \ # go install -tags extended github.com/gohugoio/hugo@latest && \ # [自選] 確認 hugo 安裝路徑及版本 $(which hugo) && hugo version ######################################################## FROM alpine:latest as base LABEL maintainer="yingchao <yingchao.tw@google.com>" # 更新 apt 及安裝套件. RUN apk update && apk add --no-cache \ ca-certificates \ libc6-compat \ libstdc++ \ procps \ shadow \ curl \ sudo \ git \ # [自選] vim 套件安裝，會增加 image. vim ######################################################## FROM base as user_config ARG USER ARG USERID ARG GROUPID ARG PASSWORD # 在 OSX 環境上，一般用戶 UID 為 501，小於預設 UID_MIN 1000 RUN echo -e "UID_MIN 500\nUID_MAX 60000" > /etc/login.defs; # 確認群組是否存在，如不存在則建立群組，在 docker 編譯失敗時，暫存中會有上一次編譯的群組名稱。 RUN if ! getent group $GROUPID > /dev/null 2>&1; then \ groupadd -g $GROUPID $USER; \ else \ groupmod -n $USER $(getent group $GROUPID | cut -d: -f1); \ fi # 新增用戶並設定 UID 及 GID RUN useradd -m -u $USERID -g $GROUPID -s /bin/bash $USER # 設定用戶密碼 RUN echo "$USER:$PASSWORD" | chpasswd RUN echo "%$USER ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers RUN addgroup $USER wheel ######################################################## FROM base as final # 設定環境變數 ARG USER ENV PROJECT=/home/$USER/usbridge COPY --from=user_config /etc/sudoers /etc/passwd /etc/group /etc/ COPY --from=user_config /home/$USER /home/$USER COPY --from=builder /usr/bin/hugo /usr/bin/hugo COPY .profile /home/$USER/ # [自選] 編譯 Image 時間太長 # COPY --from=builder /go/bin/hugo /usr/bin/hugo # 登入非 root 用戶 USER $USER CMD ["/bin/sh", "-l"] # 設定工作目錄 WORKDIR $PROJECT # 轉 HUGO 預設 PORT 1313 EXPOSE 1313 Build docker build 命令用於從 Dockerfile 構建 Docker image。 docker build 命令通過讀取 Dockerfile 中定義的指令，逐步構建 image，並將最終結果保存到 local 端的 image 中。 ...