將 Jekyll 網站部署至 Azure Static Web Apps

發行項
10/22/2023

本文示範如何將 Jekyll Web 應用程式建立及部署至 Azure Static Web Apps 。

在本教學課程中，您會了解如何：

建立 Jekyll 網站
設定 Azure Static Web Apps 資源
將 Jekyll 應用程式部署至 Azure

如果您沒有 Azure 訂閱，請在開始之前，先建立 Azure 免費帳戶。

必要條件

安裝 Jekyll
- 您可以視需要使用Windows 子系統 Linux 版並遵循 Ubuntu 指示。
具有有效訂用帳戶的 Azure 帳戶。如果您沒有帳戶，您可以免費建立帳戶。
GitHub 帳戶。如果您沒有帳戶，您可以免費建立帳戶。
已安裝 Git 安裝程式。如果您沒有 Git，您可以安裝 Git 。

建立 Jekyll 應用程式

使用 Jekyll 命令列介面建立 Jekyll 應用程式（CLI）：

從終端機執行 Jekyll CLI 以建立新的應用程式。
```
jekyll new static-app
```
移至新建立的應用程式。
```
cd static-app
```
初始化新的 Git 存放庫。
```
 git init
```

認可變更。

git add -A
git commit -m "initial commit"

將您的應用程式推送至 GitHub

Azure Static Web Apps 會使用 GitHub 發佈您的網站。下列步驟示範如何建立 GitHub 存放庫。

從 https://github.com/new 名為 jekyll-azure-static 建立空白的 GitHub 存放庫（不要建立讀我檔案）。
將 GitHub 存放庫新增為遠端至本機存放庫。請務必在下列命令中新增您的 GitHub 使用者名稱，以取代 <YOUR_USER_NAME> 預留位置。
```
git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static
```
將本機存放庫推送至 GitHub。
```
git push --set-upstream origin main
```
注意

您的 Git 分支名稱可能與不同 main 。以正確的值取代 main 此命令中的。

部署 Web 應用程式

下列步驟示範如何建立新的靜態網站應用程式，並將其部署至生產環境。

建立應用程式

移至 Azure 入口網站
選取 [建立資源]
搜尋靜態 Web 應用程式
選取 靜態 Web 應用程式
選取 [建立]

在 [基本] 索引標籤中，輸入下列值。

屬性	值
訂用帳戶	您的 Azure 訂用帳戶名稱。
資源群組	jekyll-static-app
名稱	jekyll-static-app
方案類型	免費
Azure Functions API 和預備環境的區域	選取最接近您的區域。
來源	GitHub

選取 [使用 GitHub 登入]，並使用 GitHub 進行驗證。
輸入下列 GitHub 值。

屬性值

組織選取您想要的 GitHub 組織。

存放庫選取 jekyll-static-app 。

分支選取 main 。

注意

如果您沒有看到任何存放庫，可能需要在 GitHub 中授權 Azure Static Web Apps。流覽至您的 GitHub 存放庫，並移至 [設定 > 應用程式 > 授權的 OAuth Apps]，選取 [Azure Static Web Apps ]，然後選取 [ 授與 ]。針對組織存放庫，您必須是組織的所有者才能授予許可權。
在 [ 建置詳細資料] 區段中，從 [ 建置預設 ] 下拉式清單中選取 [自訂 ]，並保留預設值。
在 [ 應用程式位置] 方塊中，輸入 ./ 。
將 Api 位置 方塊保留空白。
在 [ 輸出位置] 方塊中，輸入 _site 。

屬性	值
組織	選取您想要的 GitHub 組織。
存放庫	選取 jekyll-static-app 。
分支	選取 main 。

檢閱及建立

選取 [ 檢閱 + 建立 ] 以確認詳細資料都正確無誤。
選取 [建立 ] 以開始建立 App Service 靜態 Web 應用程式，並布建 GitHub Actions 以進行部署。
部署完成後，請選取 [移至資源 ]。
在資源畫面上 ，選取 URL 連結以開啟已部署的應用程式。您可能需要等候一兩分鐘，GitHub Actions 才能完成。

自訂 Jekyll 設定

當您產生靜態 Web 應用程式時，會產生工作流程檔案，其中包含應用程式的發佈組態設定。

若要設定環境變數，例如 JEKYLL_ENV ，請將區 env 段新增至工作流程中的 Azure Static Web Apps GitHub Actions。

- name: Build And Deploy
   id: builddeploy
   uses: Azure/static-web-apps-deploy@v1
   with:
      azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
      repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
      action: "upload"
      ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
      # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

清除資源

如果您不打算繼續使用此應用程式，您可以透過下列步驟刪除 Azure 靜態 Web 應用程式資源：

開啟 Azure 入口網站
在頂端搜尋列中，依您稍早提供的名稱搜尋您的應用程式
按一下應用程式
按一下 [ 刪除] 按鈕
按一下 [ 是 ] 以確認刪除動作

下一步

新增自訂網域