教學

Hugo 介紹

發佈日期:

基於 Hugo、Tailwind CSS、DaisyUI 和 Alpine.js 的靜態網站開發模板,提供高性能、SEO 友好的網站解決方案。結合現代化 CSS 和互動式 JavaScript,提升開發效率和用戶體驗。使用 Webpack 和套件管理工具精確控制專案依賴和資源管理。

hugo  introduce 
• 4 分鐘閱讀

Tailwind CSS & daisyUI & Alpine.js 整合配置

發佈日期:

學習如何在 Hugo 專案中整合 Tailwind CSS, DaisyUI 和 Alpine.js,提升網站開發效率與互動性,打造現代化且美觀的網站。了解安裝配置過程及使用優勢。

tutorials  Tailwind CSS  daisyUI  Alpine.js 
• 9 分鐘閱讀

Webpack & PostCSS 整合配置

發佈日期:

學習如何將 Webpack 和 PostCSS 整合到 Hugo 專案中,實現模組化開發、熱重載和優化打包。此指南涵蓋了 Webpack 配置、PostCSS 設定,以及在 Hugo 中設置 Tailwind CSS 的步驟。

Webpack  PostCSS 
• 0 分鐘閱讀

安裝 Hugo 及 npm

發佈日期:

提供 Windows 和 macOS 安裝 Hugo 和 npm 的詳細步驟。包括透過 Chocolatey 或 Homebrew 安裝 Hugo,並設置 Node.js 和 npm。還有安裝驗證以及注意事項,幫助順利完成安裝並進行開發。

Install  npm  PowerShell  brew 
• 2 分鐘閱讀

建構 Hugo 專案及主題

發佈日期:

介紹如何建立 Hugo 專案及自訂主題。包括檢查 Hugo 和 npm 是否安裝成功、創建新專案及其檔案結構解釋,並說明如何創建和配置自建主題。透過詳細步驟,協助快速搭建與自訂個人化的 Hugo 網站。

Projects  Themes 
• 5 分鐘閱讀