Hugo 是一項快速的現代化靜態網頁生成工具，也是由可愛的水獺 Golang 製作而成的！( 迷之音: 牠明明是地鼠 )。在 Hugo 的架構中，我們主要需要撰寫 YAML 格式的 data 並讓 Hugo 幫我們以 template 的方式塞進 HTML 中，基本上與 Flask Jinja2 template 或是 Django Template 相同的概念。這對於想要快速產生網站的需求來說，真的是一大利器！

對於熱愛新技術和自動化的我來說，當然要把 Hugo 尬 GitHub Action 迸出新滋味！( 年代梗 XD )

Hugo Installation

你/妳可以在官方安裝文件中找到更詳細以及更多作業系統的安裝方法，在這邊我就不重複介紹各種安裝方法了。我個人使用的作業系統就是 Window 10 + Scoop 做套件管理，這邊分享一下，簡簡單單的三行就可以安裝好 Hugo 囉！

1Set-ExecutionPolicy RemoteSigned -Scope CurrentUser # Optional: Needed to run a remote script the first time
2irm get.scoop.sh | iex
3scoop install hugo

儘管在本地端安裝簡單順利，但是我個人淺見認為在做 CI/CD Pipeline 時，要設定好 Hugo 環境還是有點小麻煩，所以為了讓我們的人生更快樂更幸福，選用好的第三方 GitHub Action 是很重要的！

Github Action

先條列好 CD Pipeline 中的所有任務是至關重要的：

Get our source code ( GitHub Action )
Setting up AWS credential ( GitHub Action )
setup Hugo ( GitHub Action )
Hugo Build ( Hugo CLI )
Deploy to S3 ( AWS CLI )

CD Pipeline 中使用了三種 GitHub Action 來幫助我們設置環境

actions/checkout@v3 用於 pull source code. aws-actions/configure-aws-credentials@v1 用於設定 aws credential. peaceiris/actions-hugo@v2 用於安裝 Hugo.

AWS CLI

此外，為了讓 AWS CLI 擁有權限上船靜態網頁至 S3，需要額外建立擁有 programmatic access 的 AWS User，這邊給讀者參考官方建立教學，我就不在這裡過度撰寫細節了。

這步驟使用官方的 aws-actions/configure-aws-credentials@v1 GitHub Action 來設定，也就讓我們無須痛苦地跟 stdin 打交道了~

記得不要把 Credential 明文寫在 GitHub Action Script 中！！

放在 Github Secret 中確保 Credential 的加密和保護！

1- name: Configure AWS credentials
2  uses: aws-actions/configure-aws-credentials@v1
3  with:
4    aws-access-key-id: '${{ secrets.AWS_ACCESS_KEY_ID }}'
5    aws-secret-access-key: '${{ secrets.AWS_SECRET_ACCESS_KEY }}'
6    aws-region: '${{ secrets.AWS_REGION_ID }}'

Hugo Build

接著 Hugo Build 產生靜態網頁

對，沒錯使用第三方 Gthub Action 就是可以如此簡單的安裝並打包

1- name: setup hugo
2  uses: peaceiris/actions-hugo@v2
3  with:
4    hugo-version: latest
5    extended: true
6- name: Hugo Build
7  working-directory: ./
8  run: hugo

S3 Sync

最後，我們使用 AWS CLI aws s3 sync 同步地端與 s3 的檔案

1- name: Deploy
2  run: |
3    aws s3 sync --acl public-read ./public s3://${{ secrets.S3BUCKET_NAME }} --delete

至於為何使用 `aws s3 sync` 而不是 `aws s3 cp` 呢?

因為 sync 可以對比新舊版本的檔案，並將不存在於新版本的檔案刪除，這對於常變動的圖檔或是靜態文本幫助方常大！

相較於其他自動化流程，這算是較簡單的 Pipeline 很適合初學者拿來當專案練習，除此之外，S3 + Cloudfront 也非常適合作為靜態網頁的部署，單純使用 S3 部屬的話，根本幾乎不需要費用！( 當然要用 route53 + cloudfront 的話就要大概 10~~20 塊的費用啦~~