Hugo 介紹
1.介紹
本文件提供了一個基於 Hugo、Tailwind CSS、DaisyUI 和 Alpine.js 的開發模板，幫助開發者快速搭建現代化的靜態網站。透過這個專案，您可以輕鬆地創建具高度客製化、高性能及良好用戶體驗的網站。
特色
- 靜態網站生成器 (Static Site Generator, SSG) 採用 Hugo 作為 SSG，生成高性能、SEO 友善的靜態網站。
- 現代化 CSS 框架 使用 Tailwind CSS 提供高度客製化的樣式，搭配 DaisyUI 提供豐富的 UI 元件，加速開發流程。
- 互動式 JavaScript 框架 導入 Alpine.js，為 HTML 元素添加動態行為，提升用戶體驗。
- 模組打包工具 使用 Webpack 打包管理專案中的 JavaScript、CSS 等資源，並提供開發伺服器等功能。
- 套件管理 採用 NPM 或 Yarn 作為套件管理工具，精確控制專案的依賴關係。
技術堆疊
- Hugo: 靜態網站生成器
- Tailwind CSS: 功能強大的 CSS 框架
- DaisyUI: 基於 Tailwind CSS 的 UI 元件庫
- Alpine.js: 輕量級 JavaScript 框架
- Webpack: 模組打包工具
- Yarn: 套件管理工具
優勢
- 開發效率高 Tailwind CSS 和 DaisyUI 提供了豐富的預設樣式和元件，減少樣式編寫工作量。Alpine.js 讓您在 HTML 中直接添加交互行為，簡化 JavaScript 邏輯。
- 客製化程度高 Tailwind CSS 提供高度客製化能力，可根據設計需求自由調整樣式。
- 性能優異 靜態網站生成器生成的 HTML、CSS、JavaScript 檔案可直接提供給瀏覽器，無需伺服器端渲染，性能極高。
- SEO 友善 靜態網站對搜尋引擎非常友好，有助於提高網站搜尋排名。
- 易於維護 Webpack 幫助管理專案中的各種資源，使專案結構清晰、易於維護。
專案架構 (範例)
my-site/ ├── content/ ├── static/ ├── themes/my-themes ├── layouts/ ├── assets/ │ ├── js/ │ ├── css/ │ └── images/ ├── hugo.toml ├── package.json ├── webpack.config.js ├── tailwind.config.js ├── postcss.config.js └── …
hugo.toml: Hugo 的配置文件，配置網站基本信息、主題等。content: 存放網站內容的目錄。static: 存放靜態資產的目錄。layouts: 存放 Hugo 的佈局模板。assets: 存放自定義的 JavaScript、CSS 和圖片等資產。package.json: 記錄專案的依賴關係。webpack.config.js: Webpack 的配置文件，配置打包規則。tailwind.config.js: Tailwind CSS 的配置文件。postcss.config.js: PostCSS 的配置文件，用於處理 CSS 檔案，特別是與 Tailwind CSS 整合。