使用 Render.com 作靜態網站的自動化佈署

作者： DD - 5月 01, 2025

最近在上課時，為了讓不想花錢申請 Azure 雲端服務的學員，也能夠實際體驗 CI/CD 的開發流程，我一直在尋找一個免費、簡單的網站部署的平台。希望用戶只要有 GitHub 帳號，就能將 repo 內的網站經由 GitHub Actions 自動佈署到雲端。

試過幾個方案之後，最後選擇了 Render.com。它不但提供免費的靜態網站託管，還能輕鬆與 GitHub 整合，自動化部署流程幾乎沒什麼難度，非常適合教學與初學者練習使用。

什麼是 Render.com

Render.com 是一個現代化的雲端平台，提供簡單、快速且免費的網站服務。透過與 GitHub 的整合，開發者可以輕鬆地將靜態網站自動部署到 Render，並利用 GitHub Actions 進行持續整合與部署（CI/CD）。

Render 支援多種服務類型，包括：

靜態網站（Static Sites）：適用於 HTML、CSS、JavaScript 等前端資源，透過全球 CDN 提供快速、安全的內容傳遞。
Web 服務（Web Services）：支援 Node.js、Python、Ruby 等後端應用程式的部署。(但不支援 .net)
私有服務（Private Services）、背景工作（Background Workers）、排程任務（Cron Jobs）：適用於內部服務、非同步處理及定時任務。

如何從 GitHub 部署靜態網站到 Render

Render 本身直接支援自動化佈署，你可用 GitHub 帳號申請Render.com，並且直接建立一個靜態網站：

你可以在建立站台的時候，直接選擇要從哪一個 GitHub Repo 進行佈署:

在選擇好後，你可以配置該網站關聯的資料來源位置(選擇Repo中的資料夾):

設定完成之後，只需要一鍵就能佈署完成：

如果要變成自動化呢?

我們可以在 GitHub Repo 中設定 Action，來進行網站的自動化佈署。由於Render.Com 提供一個自動化佈署的 WebHook(本質上就是一個API)，只要呼叫該API，Render.com 就可以自動從 GitHub repo 中取得最新的程式碼，並且佈署到伺服器端：

也因此，只要我們為其配置一個 GitHub Action ，就可以在程式碼有所修改的時候，自動將最新版的內容直接佈署到 Render.com 。例如：

name: Deploy Static Site to Render

on:
  push:
    branches:
      - main    # 你要自動部署的分支（通常是 main）

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v4

    # 如果你的靜態網站需要 Build，可以加這段
    # - name: Build static site
    #   run: npm install && npm run build

    - name: Deploy to Render
      run: |
        curl -X POST ${{ secrets.RENDER_DEPLOY_HOOK_URL }}

上面這段 YAML 就是一個 GitHub Actions 的設定，可以在每次程式碼被推送到 main 分支上時，自動觸發將網站部署到 Render.com 站台的流程。

其中最後一個步驟，是用 curl 指令呼叫 Render 提供的部署 Webhook（這個 URL 就是在 Render 靜態網站的設定中的 Deploy Hook），這樣就能通知 Render 去抓最新程式碼並重新部署。

我們把這個 Deploy Hook URL 設定在 GitHub Secrets 中，像上面範例中使用的 ${{ secrets.RENDER_DEPLOY_HOOK_URL }} 變數，這樣能安全地管理機敏資訊，不需要把敏感資訊寫死在 YAML 裡。

整體來說，透過這樣的設定，能讓我們可以很方便地從 GitHub 實現簡單、有效的 CI/CD 部署流程，尤其適合用在教學或 side project 的靜態網站上。

需要的朋友可以試用看看。

參考課程：
敏捷開發與Azure DevOps實戰

搜尋此網誌

.NET Walker