Host on AWS Amplify

January 1, 1

前置作業

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

建立 AWS 帳戶
安裝 Git
建立 Hugo 網站並使用 hugo server 在本機測試
將變更提交到本機版本庫
將本機版本庫推送到您的 GitHub、GitLab 或 Bitbucket 帳戶

流程

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

步驟 1
：在專案的根目錄中建立一個名為 amplify.yml 的檔案。

touch amplify.yml

步驟 2
：將以下 YAML 複製並貼到您建立的檔案中。根據需要更改應用程式版本和時區。

amplify.yml

version: 1
env:
  variables:
    # 應用程式版本
    DART_SASS_VERSION: 1.81.0
    GO_VERSION: 1.23.3
    HUGO_VERSION: 0.139.3
    # 時區
    TZ: America/Los_Angeles
    # 快取
    HUGO_CACHEDIR: ${PWD}/.hugo
    NPM_CONFIG_CACHE: ${PWD}/.npm
frontend:
  phases:
    preBuild:
      commands:
        # 安裝 Dart Sass
        - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
        - sudo tar -C /usr/local/bin -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
        - rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
        - export PATH=/usr/local/bin/dart-sass:$PATH

        # 安裝 Go
        - curl -LJO https://go.dev/dl/go${GO_VERSION}.linux-amd64.tar.gz
        - sudo tar -C /usr/local -xf go${GO_VERSION}.linux-amd64.tar.gz
        - rm go${GO_VERSION}.linux-amd64.tar.gz
        - export PATH=/usr/local/go/bin:$PATH

        # 安裝 Hugo
        - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz
        - sudo tar -C /usr/local/bin -xf hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz
        - rm hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz
        - export PATH=/usr/local/bin:$PATH

        # 檢查安裝的版本
        - go version
        - hugo version
        - node -v
        - npm -v
        - sass --embedded --version

        # 安裝 Node.JS 相依套件
        - "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci --prefer-offline || true"

        # 解決 Hugo 問題
        - git config --add core.quotepath false
    build:
      commands:
        - hugo --gc --minify
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths:
      - ${HUGO_CACHEDIR}/**/*
      - ${NPM_CONFIG_CACHE}/**/*

步驟 3
：提交並推送變更到您的 GitHub 版本庫。

git add -A
git commit -m "Create amplify.yml"
git push

步驟 4
：登入您的 AWS 帳戶，導航到 Amplify Console，然後按下 Deploy an app 按鈕。

步驟 5
：選擇一個原始碼提供者，然後按下 Next 按鈕。

螢幕截圖

步驟 6
：授權 AWS Amplify 存取您的 GitHub 帳戶。

螢幕截圖

步驟 7
：選擇您的個人帳戶或相關組織。

螢幕截圖

步驟 8
：授權存取一個或多個版本庫。

螢幕截圖

步驟 9
：選擇一個版本庫和分支，然後按下 Next 按鈕。

螢幕截圖

步驟 10
：在 App settings 頁面，捲動至底部，然後按下 Next 按鈕。Amplify 會讀取您在步驟 1-3 中建立的 amplify.yml 檔案，而非使用此頁面的設定值。

步驟 11
：在 Review 頁面，捲動至底部，然後按下 Save and deploy 按鈕。

步驟 12
：當您的網站部署完成後，按下 Visit deployed URL 按鈕以檢視您已發佈的網站。

螢幕截圖

Host on AWS Amplify

前置作業

流程

延伸閱讀