基本使用
測試你的安裝
在[安裝] 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 中設定 draft
、date
、publishDate
和 expiryDate
。預設情況下,Hugo 不會發布以下內容:
draft
值為true
date
時間在未來publishDate
時間在未來expiryDate
時間已過
你可以在執行 hugo
或 hugo 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
在簡單的主機環境下(例如使用 ftp
、rsync
或 scp
將檔案上傳至虛擬主機的根目錄),public
目錄的內容是你所需的全部。
大多數使用者會透過 CI/CD 工作流程部署網站,例如將檔案推送到 GitHub 或 GitLab 儲存庫後觸發建構與部署。熱門的提供商包括 AWS Amplify、CloudCannon、Cloudflare Pages、GitHub Pages、GitLab Pages 和 Netlify。
詳細資訊可參閱 [主機與部署] 章節。