[技術分享] 為了 Apink 回歸！如何在一天內打造全自動更新的 YT 整理網站

前言：迷妹/迷弟的極限開發

作為一個 Panda (Apink 粉絲)，看到 Apink 帶著 Mini 11《RE：LOVE》回歸，心情激動之餘，也發現大量的物料（MV、Live 舞台、綜藝、電台、應援法）散落在 YouTube 各處。為了讓大家能更方便地補檔，我決定做一個整理網站。

但問題是：我只有不到一天的時間。回歸期每一分每一秒都很珍貴，我不能花太多時間在寫扣上，但又希望網站能自動更新、介面好看。

這篇文章將分享我如何利用 Python + Google Sheets + GitHub Actions，在一天內快速搭建出一個自動化、低成本且易於維護的偶像回歸整理站。

核心架構：什麼最快？

為了追求極致的開發速度與最低的維護成本，我選擇了以下的「非典型」技術堆疊：

CMS (內容管理系統) -> Google Sheets
為什麼？ 沒有比 Excel/Sheets 更直覺的後台了。手機也能編輯，方便隨時隨地新增影片網址。
後端/建置 -> Python (Pandas + Jinja2)
為什麼？ Python 處理資料最強。用 Pandas 讀取 Sheets，用 Jinja2 產生 HTML。
資料庫 -> 無 (Static Site)
為什麼？ 靜態網頁最快，免費託管選擇多（GitHub Pages, Vercel 等）。
自動化 -> GitHub Actions
為什麼？ 只要我更新 Google Sheets，觸發 Action，它就自動跑 Python 腳本更新網頁並 Push 回去。

技術實作細節

1. Google Sheets 當作簡易資料庫

我建立了一個 Google Sheet，裡面有好幾個分頁（Tab），分別對應「主打歌」、「收錄曲」、「綜藝」等分類。欄位只需要一個「YouTube 連結」和選填的「標題」。

在程式碼中，我直接使用 Sheets 的 CSV 輸出功能，不需要申請複雜的 Google API 權限，只要公開試算表即可：

# build.py
def fetch_data(sheet_id, gid='0'):
    url = f'https://docs.google.com/spreadsheets/d/{sheet_id}/export?format=csv&gid={gid}'
    df = pd.read_csv(url, header=None)
    # ... 處理資料

2. 自動抓取 YouTube 資訊 (省去手動輸入)

為了讓整理更輕鬆，我不想手動複製貼上影片標題和發布日期。所以我接了 YouTube Data API 和 oEmbed。

標題：利用 oEmbed 介面，不需要 API Key 也能抓到標題。
日期：為了做「按時間排序」的功能，我使用 YouTube Data API 批次抓取影片的 publishedAt。

# build.py (簡化版)
def fetch_youtube_title(video_url):
    oembed_url = f"https://www.youtube.com/oembed?url={video_url}&format=json"
    data = requests.get(oembed_url).json()
    return data.get('title')

這樣我只需要在 Excel 貼上網址，標題 and 日期都會由程式自動補完。

3. 靜態網頁生成 (SSG)

雖然現在有 Next.js / Nuxt 這些強大的框架，但對於這種單頁應用，寫一個簡單的 Python Script 搭配 Jinja2 模板是最快的。

流程如下：

Python 跑蟲把資料抓下來整理成 JSON 物件。
將資料倒進 index.html 的 Jinja2 模板。
輸出最終的 index.html。

4. GitHub Actions 實現 CI/CD

這是最關鍵的一步。我寫了一個 Workflow，每當我 Push Code 或是手動觸發時，它會：

Check out 程式碼。
安裝 Python 環境。
執行 build.py (抓新資料 -> 產出新 HTML)。
將變更的 index.html Commit 並 Push 回儲存庫。

這樣一來，網站隨時保持最新，而且完全不用手動去 deploy。

# .github/workflows/build.yml
steps:
  - name: Build site
    env:
      YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
    run: python3 build.py

  - name: Commit and push changes
    run: |
      git config --local user.email "[email protected]"
      git add index.html
      git commit -m "Auto-update index.html"
      git push

前端亮點：多語系與簡單互動

前端部分保持簡單，使用了 Vanilla JS (原生 JavaScript)。特別加了一個功能：多語系切換 (繁中/韓/英/日)，讓海外粉絲也能使用。這是透過一個簡單的 JS 字典替換 DOM 文字實現的。

// 多語系切換邏輯
function changeLanguage(lang) {
    document.querySelectorAll('[data-key]').forEach(elem => {
        const key = elem.getAttribute('data-key');
        if (translations[key] && translations[key][lang]) {
            elem.textContent = translations[key][lang];
        }
    });
}

成果與心得

這套系統的優點在於：

快：開發快，讀取快（純靜態檔）。
省：完全免費（GitHub Actions + Google Sheets）。
懶：更新資料只需要動手指貼連結到 Google Sheets。

不到一天的時間，就完成了一個能自動排列時間、支援多語系、視覺風格符合此次回歸概念（粉黑配色）的整理站。

對於想要快速整理資訊並分享給社群的工程師來說，這套「Google Sheets + Python SSG + GitHub Actions」的組合拳，絕對是 CP 值最高的選擇！

因為有 AI 的工具，得以能快速將這次網站建置完成，謝謝各位支持。

Apink FIGHTING! RE：LOVE 大發！