GETTING STARTED

基本使用

測試你的安裝

在[安裝] Hugo 後,透過執行以下命令測試安裝是否成功:

hugo version

你應該會看到類似以下的輸出:

hugo v0.123.0-3c8a4713908e48e6523f058ca126710397aa4ed5+extended linux/amd64 BuildDate=2024-02-19T16:32:38Z VendorInfo=gohugoio

顯示可用命令

若要查看可用的命令和參數列表:

hugo help

若需要查詢子命令的幫助資訊,可使用 --help 參數。例如:

hugo server --help

建構你的網站

進入你的專案目錄,執行以下命令建構網站:

hugo

hugo 命令會建構你的網站,將檔案發布至 public 目錄。若要將網站發布到其他目錄,可以使用 --destination 參數或在網站設定中設定 publishDir

草稿、未來及已過期的內容

Hugo 允許你在內容的 Front Matter 中設定 draftdatepublishDateexpiryDate。預設情況下,Hugo 不會發布以下內容:

  • draft 值為 true
  • date 時間在未來
  • publishDate 時間在未來
  • expiryDate 時間已過
New in v0.123.0

你可以在執行 hugohugo server 時,透過命令參數覆寫預設行為:

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

雖然也可以將這些設定加入網站設定檔中,但若內容作者對設定不熟悉,可能會導致非預期的結果。

開發與測試你的網站

在設計佈局或創建內容時,進入專案目錄並執行:

hugo server

hugo server 命令會將你的網站建構到記憶體中,並使用簡單的 HTTP 伺服器提供頁面服務。執行 hugo server 後,會顯示本地網站的 URL:

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

伺服器運行時,會監控專案目錄中的資產、設定、內容、資料、佈局、翻譯及靜態檔案的變更。一旦偵測到變更,伺服器會重新建構網站並使用 [即時重整] 刷新瀏覽器。

由於大多數 Hugo 建構速度極快,你可能無法感覺到變更,除非直視瀏覽器。

即時重整 (LiveReload)

伺服器運行時,Hugo 會在生成的 HTML 頁面中插入 JavaScript,即時重整腳本會透過 Web Sockets 在瀏覽器和伺服器間建立連接。你不需要安裝額外的軟體或瀏覽器外掛,也不需要額外的設定。

自動導向

若希望在編輯內容時,瀏覽器自動跳轉至最後修改的頁面,執行:

hugo server --navigateToChanged

部署你的網站

當準備好部署網站時,執行以下命令:

hugo

此命令會建構你的網站,並將檔案發布至 public 目錄,目錄結構如下:

public/
├── categories/
│   ├── index.html
│   └── index.xml  <-- 此區塊的 RSS feed
├── posts/
│   ├── my-first-post/
│   │   └── index.html
│   ├── index.html
│   └── index.xml  <-- 此區塊的 RSS feed
├── tags/
│   ├── index.html
│   └── index.xml  <-- 此區塊的 RSS feed
├── index.html
├── index.xml      <-- 網站的 RSS feed
└── sitemap.xml

在簡單的主機環境下(例如使用 ftprsyncscp 將檔案上傳至虛擬主機的根目錄),public 目錄的內容是你所需的全部。

大多數使用者會透過 CI/CD 工作流程部署網站,例如將檔案推送到 GitHub 或 GitLab 儲存庫後觸發建構與部署。熱門的提供商包括 AWS AmplifyCloudCannonCloudflare PagesGitHub PagesGitLab PagesNetlify

詳細資訊可參閱 [主機與部署] 章節。