點燈坊

失くすものさえない今が強くなるチャンスよ

Hugo 初體驗

Sam Xiao's Avatar 2023-12-24

Hugo 是由 Go 所寫的 SSG，也是目前 JAMstack 下最快的 SSG。

Version

Hugo 0.121

Installation

$ brew install hugo
$ hugo version
  • 使用 Homebrew 安裝 Hugo。

Create New Site

$ hugo new site hugo-lab --format json
  • hugo new site：使用預設的骨架建立新網站
  • --format json : 以 JSON 格式建立設定檔

Create NPM Config

$ npm init -y
  • 建立空的 NPM 設定檔

Layout

layouts/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Hugo</title>
  </head>
  <script></script>
  <body>
    <div>Hello JAMstack</div>
  </body>
</html>
  • 在 layouts 目錄建立 index.html

NPM Config

package.json

{
  "name": "hugo-lab",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "hugo server",
    "build": "hugo --minify"
  }
}

Line 5

"scripts": {
  "dev": "hugo server",
  "build": "hugo --minify"
}
  • dev : 以 Development Mode 啟動 Web Server
  • build : 以 Production Mode 編譯 HTML/CSS/JavaScript

Development Mode

$ npm run dev
  • 以 Development Mode 啟動 Web Server

Production Mode

$ npm run build
$ serve public
  • 以 Production Mode 編譯 HTML/CSS/JavaScript 在 public 目錄下
  • 以 serve 將 public 目錄啟動 Web Server

Conclusion

  • 雖然 Hugo 由 Go 所寫的 SSG，我們仍可使用 NPM 來管理 Hugo

Reference

Hugo, Quick Start

# Hugo