Hugo Themes
Seven
A clean and beautiful Hugo theme, which built using Tailwind CSS.
- Author: mrhelloboy
- GitHub Stars: 0
- Updated: 2024-01-09
- License: MIT
- Tags: Archive Blog Dark Mode Light Personal Responsive
A clean and beautiful Hugo theme, which built using Tailwind CSS.
English | 中文
Example
Link: Demo
The Demo code is in another GitHub repository: hugo-theme-seven-demo
Prerequisites
- The Hugo Modules feature is required. So you need to download Go locally. Please refer to the document Hugo Modules Prerequisite for details.
- Hugo version should be at least
v0.112.0
. It is recommended to use the latest version of Go and Hugo. Reference documentation configure-cache-busters
Usage
There are already Hugo sites using this theme, you need to delete the themes directory and related files (if any)
Initialize the site to module and execute the command in the root directory of your site:
hugo mod init github.com/[username]/[sitename]
Replace
username
andsitename
above with your ownIt is recommended to copy the
hugo.toml
file from the hugo-theme-seven-demo repository to the root of your site.If you are not using Demo’s
hugo.toml
file, please copy the following configuration to your ownhugo.toml
file:[module] # Recommend Chinese users to use this proxy configuration # proxy = 'https://goproxy.cn,direct' [[module.imports]] path = 'github.com/mrhelloboy/seven' [module.hugoVersion] extended = false min = "0.112.0" [[module.mounts]] source = "assets" target = "assets" [[module.mounts]] source = "hugo_stats.json" target = "assets/watching/hugo_stats.json" [build] writeStats = true [[build.cachebusters]] source = "assets/watching/hugo_stats\\.json" target = "styles\\.css" [[build.cachebusters]] source = "(postcss|tailwind)\\.config\\.js" target = "css" [[build.cachebusters]] source = "assets/.*\\.(js|ts|jsx|tsx)" target = "js" [[build.cachebusters]] source = "assets/.*\\.(.*)$" target = "$1"
Please refer to
hugo.toml
in the Demo for other configuration parameters required by the themeExecute the command
hugo mod npm pack
will generate the files
package.json
andpackage.hugo.json
and import the module and update thego.mod
andgo.sum
files, etc.Execute the command to download the required dependencies
npm install
Start local services
hugo server
Or:
hugo server --disableLiveReload --minify --gc -D
Update Theme Version
When there is an update to the theme version, you need to update the version number in the go.mod
file:
# Clear local module cache
hugo mod clean
hugo mod get
hugo mod tidy
Update package.json
When there is an update to the npm packages
that the theme depends on, you need to update the version number in the package.json
file.
Delete the package-lock.json
, package.json
files first.
hugo mod npm pack
npm install
Deployment
Please refer to Hugo Deployment Documentation
Deploy to Netlify
as an example:
Copy
netlify.toml
from the Demo repository to your own site and push it to GithubRegister and login to Netlify
Import the GitHub project, Netlify will read the
netlify.toml
file and build it automatically