TL;DR

• Hugo 介紹: Hugo 是一個開源的靜態網站產生器，擁有極快的網站架設速度，適合用於建立網站的框架。
• Docker 設定與建置: 提供了詳細的 Dockerfile 以及如何使用它來建構 Hugo 的 Docker image，並且說明如何啟動、停止和刪除容器。
• Hugo 的基本用法: 包括 Hugo 的安裝測試、命令查看、建立網站、處理草稿和過期內容、以及開發和測試網站的方法。
• 部署網站: 提到如何在準備部署網站時，透過 Hugo 建立網站，並且說明了在簡單的託管環境中如何上傳文件，以及使用 CI/CD 工作流程進行網站部署的常見做法。
• 附加功能: 也介紹如何使用 LiveReload 進行即時重新載入和自動重定向，以提升開發體驗。

Docker Setup

首先建立 dockerfile, 能夠建立 image, 使用這個 image 建立 container.

FROM golang:alpine as builder

ENV GOGC=50

# gcc/g++ are required to build SASS libraries for extended version

RUN apk update && \
    # [自選] 編譯 Image 時間較短
    apk add --no-cache --repository=https://dl-cdn.alpinelinux.org/alpine/edge/community hugo && \
    # [自選] 編譯 Image 時間太長
    # apk add --no-cache gcc g++ musl-dev git && \
    # go install -tags extended github.com/gohugoio/hugo@latest && \ 
    # [自選] 確認 hugo 安裝路徑及版本
    $(which hugo) && hugo version

########################################################
FROM alpine:latest as base

LABEL maintainer="yingchao <yingchao.tw@google.com>"

# 更新 apt 及安裝套件.
RUN apk update && apk add --no-cache \
    ca-certificates \ 
    libc6-compat \
    libstdc++ \
    procps \
    shadow \
    curl \
    sudo \
    git \
    # [自選] vim 套件安裝，會增加 image.
    vim 

########################################################
FROM base as user_config

ARG USER
ARG USERID
ARG GROUPID
ARG PASSWORD

# 在 OSX 環境上，一般用戶 UID 為 501，小於預設 UID_MIN 1000
RUN echo -e "UID_MIN 500\nUID_MAX 60000" > /etc/login.defs;

# 確認群組是否存在，如不存在則建立群組，在 docker 編譯失敗時，暫存中會有上一次編譯的群組名稱。
RUN if ! getent group $GROUPID > /dev/null 2>&1; then \
      groupadd -g $GROUPID $USER; \
    else \
      groupmod -n $USER $(getent group $GROUPID | cut -d: -f1); \
    fi

# 新增用戶並設定 UID 及 GID
RUN useradd -m -u $USERID -g $GROUPID -s /bin/bash $USER

# 設定用戶密碼
RUN echo "$USER:$PASSWORD" | chpasswd
RUN echo "%$USER ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers
RUN addgroup $USER wheel

########################################################
FROM base as final

# 設定環境變數
ARG USER
ENV PROJECT=/home/$USER/usbridge

COPY --from=user_config /etc/sudoers /etc/passwd /etc/group     /etc/
COPY --from=user_config /home/$USER     /home/$USER
COPY --from=builder     /usr/bin/hugo    /usr/bin/hugo
COPY .profile      /home/$USER/

# [自選] 編譯 Image 時間太長
# COPY --from=builder     /go/bin/hugo    /usr/bin/hugo

# 登入非 root 用戶
USER $USER

CMD ["/bin/sh", "-l"]

# 設定工作目錄
WORKDIR $PROJECT

# 轉 HUGO 預設 PORT 1313
EXPOSE 1313

Build

docker build 命令用於從 Dockerfile 構建 Docker image。 docker build 命令通過讀取 Dockerfile 中定義的指令，逐步構建 image，並將最終結果保存到 local 端的 image 中。

$ DOCKER_BUILDKIT=1 docker image build --no-cache \
        -t <yourself>:latest \
        --build-arg USER=$(whoami) \
        --build-arg USERID=$(id -u) \
        --build-arg GROUPID=$(id -g) \
        --build-arg PASSWORD=taiwan123 .

Start

docker run 命令用於創建並啟動一個新的容器。

• 透過 iamge 執行並產生一個新的 container
• docker run [Image 名稱]:[Image 版本] [執行指令]

$ docker run -it --rm --name website-srv \
        --volume <your blog origin folder path>:/home/$(whoami)/blog \
        --volume /etc/localtime:/etc/localtime:ro \
        --workdir /home/$(whoami)/blog \
        --hostname website-srv \
        -p 1313:1313 

Attach

docker attach 指令用於附加到正在執行的 Docker 容器的標準輸入、輸出和錯誤輸出（stdin、stdout、stderr）。允許使用者直接與容器交互，就像與正在運行的進程交互一樣。

$ docker attach website-srv

Stop

docker stop 指令用來停止一個運作中的容器。

$ docker stop website-srv

Remove

刪除容器

docker rm 指令用於刪除一個或多個已經停止的容器。 docker rm 指令不會刪除正在執行的容器，如果你需要先停止容器，可以使用 docker stop 指令。

刪除鏡像

docker rmi 指令用於刪除一個或多個 Docker 映像。 docker rmi 指令對於管理本機儲存的映像非常有用，可協助使用者清理不再需要的映像，釋放儲存空間。

$ docker images --filter reference=website-srv --format "{{.ID}}"
# 記住輸出的 Image ID
$ docker rm {image-id}
$ docker rmi {image-id}

Hugo

Hugo 是一個用 Go 編寫的靜態網站生成器，2013由 Steve Francia 原創，自 v0.14 (2015年) 由 Bjørn Erik Pedersen 主力開發，並由全球各地的開發者和使用者提交貢獻。Hugo 以 Apache License 2.0 授權的開放原始碼專案。

Hugo 一般只需幾秒鐘就能生成一個網站（每頁少於 1 毫秒），被稱為「世界上最快的網站構建框架」，也使 Hugo 大受歡迎，成為最熱門的靜態網站生成器之一，被廣泛採用。例如，2015年7月，Netlify 推出專為 Hugo 而設的網站代管服務，而2017年，Smashing Magazine 推出重新設計的官方網站，從原來的 WordPress 遷移到基於 Hugo 的 JAMstack 解決方案。¹

Hugo 基本用法

Hugo的命令行介面（CLI）功能齊全，但使用簡單，即使對於那些在命令列工作經驗有限的人來說也是如此。

安裝測試

安裝 Hugo 後，透過執行以下方式測試您的安裝：

$ hugo version

你應該看到這樣的東西：

hugo v0.130.0+extended linux/arm64 BuildDate=unknown

顯示可用的命令

要檢視可用命令和標誌的列表：

hugo help

要獲得子命令的幫助，請使用–help標誌。 例如：

hugo server --help

構建您的網站

要構建您的網站，請使用 cd 指令進入您的專案目錄並執行：

hugo

hugo 命令構建您的網站，將檔案釋出到 public 目錄。 要將您的網站釋出到其他目錄，請使用 --destination 標誌或在站點配置中設定 publishDir 。

Hugo 在構建您的網站之前不會清除 public 目錄。 現有檔案被覆蓋，但不會被刪除。 此行為是故意防止無意中刪除您在構建後可能新增到 public 目錄中的檔案。

根據您的需求，您可能希望在每次構建之前手動清除公共目錄的內容。

草稿、未來和過期的內容

Hugo允許您在內容的前面設定 draft、date、publishDate和expiryDate。 預設情況下，雨果不會在以下情況下釋出內容：

• draft價值是true
• date在未來
• publishDate是在未來
• expiryDate是過去的

Hugo 釋出草稿、未來和過期節點頁面的後代。 為了防止這些後代的釋出，請使用 cascade 前端欄位將選項級聯構建到後代頁面。

使用命令列標誌執行 hugo 或 hugo server 時，您可以覆蓋預設行為：

hugo --buildDrafts    # or -D
hugo --buildExpired   # or -E
hugo --buildFuture    # or -F

雖然您也可以在網站配置中設定這些值，但除非所有內容作者都瞭解並理解設定，否則可能會導致不想要的結果。

如上所述，Hugo在構建您的網站之前不會清除 public 目錄。 根據當前對上述四個條件的評估，構建後，您的 public 目錄可能包含之前構建的無關檔案。

一種常見的做法是在每次構建之前手動清除public目錄的內容，以刪除草稿、過期和未來內容。

開發和測試您的網站

要在開發佈局或建立內容時檢視您的網站，請使用 cd 指令進入您的專案目錄並執行：

hugo server --bind 0.0.0.0 

hugo server 命令將您的網站構建到記憶體中，並使用最小的HTTP伺服器為您的頁面提供服務。 當您執行hugo server時，它將顯示您本地網站的URL：

Web Server is available at http://localhost:1313/ 

當伺服器執行時，它會監視您的專案目錄對資產、配置、內容、資料、佈局、翻譯和靜態檔案的更改。 當它檢測到更改時，伺服器會重建您的網站，並使用LiveReload重新整理您的瀏覽器。

大多數 Hugo 構建速度非常快，除非您直接檢視瀏覽器，否則您可能不會注意到變化。

在本機預覽 Hugo 網頁

1. 在 Hugo 網站根目錄開啟終端機，輸入 $ hugo server --bind 0.0.0.0 -D 啟動網站。
2. 終端機會顯示 Web Server is available at，表示網站伺服器已開啟。
3. 開啟 browser, 輸入 http://localhost:1313 就能看到自己網站的樣子。
4. 如果要停止本機伺服器，在終端機按下 CTRL+C

參考內容

• Installing Hugo (or anything else) into a Docker Container

現場重新載入

當伺服器執行時，Hugo將JavaScript注入生成的HTML頁面。 LiveReload指令碼透過網路套接字從瀏覽器建立到伺服器的連線。 您不需要安裝任何軟體或瀏覽器外掛，也不需要任何配置。

自動重定向

編輯內容時，如果您希望瀏覽器自動重定向到您上次修改的頁面，請執行：

hugo server --navigateToChanged

部署您的網站

如上所述，Hugo在構建您的網站之前不會清除公共目錄。 在每次構建之前手動清除公共目錄的內容，以刪除草稿、過期和未來內容。

當您準備好部署您的網站時，請執行：

hugo

這將構建您的網站，將檔案釋出到公共目錄。 目錄結構將看起來像這樣：

public/
├── categories/
│   ├── index.html
│   └── index.xml  <-- RSS feed for this section
├── posts/
│   ├── my-first-post/
│   │   └── index.html
│   ├── index.html
│   └── index.xml  <-- RSS feed for this section
├── tags/
│   ├── index.html
│   └── index.xml  <-- RSS feed for this section
├── index.html
├── index.xml      <-- RSS feed for the site
└── sitemap.xml

在簡單的託管環境中，您通常將檔案ftp、rsync或scp到虛擬主機的根目錄，public目錄的內容就是您所需要的。

Hugo 的大多數使用者使用CI/CD工作流程部署他們的網站，其中推送²到他們的 GitHub 或 GitLab 儲存庫會觸發構建和部署。 熱門提供商包括AWS Amplify、CloudCannon、Cloudflare Pages、GitHub Pages、GitLab Pages和Netlify。

在託管和部署部分瞭解更多資訊。