Hugo Starter Tailwind Basic 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00312/article/details/141592488

Hugo Starter Tailwind Basic 项目教程

hugo-starter-tailwind-basicA basic and simple to set up Hugo with TailwindCSS starter project.项目地址:https://gitcode.com/gh_mirrors/hu/hugo-starter-tailwind-basic

1. 项目的目录结构及介绍

.
├── assets
│   └── css
├── content
├── layouts
├── static
├── .gitignore
├── .hugo_build.lock
├── LICENSE
├── README.md
├── go.mod
├── hugo.toml
├── hugo_stats.json
├── netlify.toml
├── package-lock.json
├── package.hugo.json
├── package.json
├── postcss.config.js
└── tailwind.config.js

assets/css: 存放自定义的CSS文件。
content: 存放网站的内容文件。
layouts: 存放网站的模板文件。
static: 存放静态资源文件，如图片、字体等。
.gitignore: 指定Git忽略的文件和目录。
.hugo_build.lock: Hugo构建锁文件。
LICENSE: 项目许可证文件。
README.md: 项目说明文件。
go.mod: Go模块文件。
hugo.toml: Hugo配置文件。
hugo_stats.json: Hugo统计信息文件。
netlify.toml: Netlify配置文件。
package-lock.json: npm锁定文件。
package.hugo.json: Hugo的npm包文件。
package.json: npm包配置文件。
postcss.config.js: PostCSS配置文件。
tailwind.config.js: TailwindCSS配置文件。

2. 项目的启动文件介绍

hugo.toml: 这是Hugo的主要配置文件，包含了项目的各种设置，如站点标题、语言、菜单等。
package.json: 包含了项目的npm依赖和脚本命令。可以通过运行npm install来安装依赖，通过npm start或hugo server来启动开发服务器。

3. 项目的配置文件介绍

hugo.toml:

[module]
[module.hugoVersion]
extended = false
min = "0.112.0"
[[module.mounts]]
source = "assets"
target = "assets"
[[module.mounts]]
source = "hugo_stats.json"
target = "hugo_stats.json"

这个文件配置了Hugo模块的版本和挂载点。

netlify.toml:
```
[build]
publish = "public"
command = "hugo --gc --minify"
```
这个文件配置了Netlify的构建命令和发布目录。

tailwind.config.js:

module.exports = {
  purge: {
    content: [
      './layouts/**/*.html',
      './content/**/*.md',
    ],
  },
  darkMode: 'media',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

这个文件配置了TailwindCSS的清除、暗模式、主题、变体和插件。

postcss.config.js:
```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```
这个文件配置了PostCSS的插件，包括TailwindCSS和Autoprefixer。