Host on Netlify

前置作業

在繼續之前，請完成以下任務：

1. 建立 Netlify 帳戶
2. 安裝 Git
3. 建立 Hugo 網站 並使用 hugo server 在本機測試
4. 將更改提交到您的本機版本庫
5. 將本機版本庫推送至您的 GitHub、GitLab 或 Bitbucket 帳戶

流程

此流程將啟用從 GitHub 版本庫的持續部署。如果您使用 GitLab 或 Bitbucket，流程基本相同。

步驟 1
：登入您的 Netlify 帳戶，導航至 Sites 頁面，按下 Add new site 按鈕，並從下拉選單中選擇 “Import an existing project”。

步驟 2
：選擇您的部署方式。

步驟 3
：按下 Authorize Netlify 按鈕，授權 Netlify 連接您的 GitHub 帳戶。

步驟 4
：按下 Configure Netlify on GitHub 按鈕。

步驟 5
：選擇您的 GitHub 帳戶，安裝 Netlify 應用程式。

步驟 6
：按下 Install 按鈕。

步驟 7
：從列表中點選網站的版本庫。

步驟 8
：設定網站名稱和部署的分支。

步驟 9
：定義建置設定，按下 Add environment variables 按鈕，然後按 New variable。

步驟 10
：建立名為 HUGO_VERSION 的環境變數，並將值設為 最新版本。

步驟 11
：按下頁面底部的 Deploy my new site 按鈕。

步驟 12
：在畫面底部等待部署完成，然後點擊部署日誌項目。

步驟 13
：按下 Open production deploy 按鈕以檢視線上網站。

配置檔案

在上述流程中，我們使用 Netlify 的使用者介面設定網站。大多數網站擁有者更喜歡使用檢入版本控制的配置檔案。

在專案目錄的根目錄中建立一個名為 netlify.toml 的新檔案。最簡單的配置檔案如下：

[build.environment]
HUGO_VERSION = "0.137.1"
TZ = "America/Los_Angeles"

[build]
publish = "public"
command = "hugo --gc --minify"

如果您的網站需要 Dart Sass 將 Sass 編譯為 CSS，配置檔案應如下：

[build.environment]
HUGO_VERSION = "0.137.1"
DART_SASS_VERSION = "1.80.6"
TZ = "America/Los_Angeles"

[build]
publish = "public"
command = """\
  curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
  tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
  rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
  export PATH=/opt/build/repo/dart-sass:$PATH && \
  hugo --gc --minify \
  """