Hugo Themes

Prev/Next: All Themes

Seven

A clean and beautiful Hugo theme, which built using Tailwind CSS.

Download Demo
Seven

Hugo theme Seven

A clean and beautiful Hugo theme, which built using Tailwind CSS.

English | 中文

Seven screenshot

Examples

→ Example Website

→ Example Code Repository

Prerequisites

Before using this Hugo theme, ensure that you meet the following requirements:

  1. Install Go . Refer to the documentation on Hugo Modules Prerequisite .
  2. Ensure that your Hugo version is v0.112.0 or later. Refer to the documentation for configure-cache-busters .

Quick Start

  1. Clone the example code .

    git clone https://github.com/mrhelloboy/hugo-theme-seven-demo.git

  2. Execute the commands:

    cd hugo-theme-seven-demo

hugo mod npm pack

npm install

hugo server

Starting from Scratch

  1. Install Go and Hugo.

  2. Create a new site.

    hugo new site [sitename]
cd [sitename]
# Remove the themes directory in the site
rm -rf themes

  3. Initialize Hugo module.

    hugo mod init github.com/[username]/[sitename]

  4. Import the theme module.

    In the hugo.toml file, configure the theme:

    [module]
[[module.imports]]
  path = 'github.com/mrhelloboy/seven'

    As the theme requires additional configuration parameters, to avoid errors, it’s recommended to first use the example’s hugo.toml and then customize as needed.

    Note: If using the example hugo.toml, comment out customSocial = "extra_social.html" to prevent an error during startup.

    For more information about Hugo modules and their usage, please refer to Hugo Modules .

  5. Install dependencies and start the server.

    hugo mod npm pack

npm install

hugo server

Updating Theme Module 

hugo mod clean
hugo mod get
hugo mod tidy

Updating package.json

First delete package-lock.json and package.json.

hugo mod npm pack
npm install

Deployment

Refer to the Hugo Deployment Documentation for details.

Deploying to Netlify Example:

  1. Copy the example’s netlify.toml to your own site and push the changes to GitHub.

  2. Register and log in to Netlify.

  3. Import your GitHub project; Netlify will automatically build based on the netlify.toml file.

Maintainers

@mrhelloboy

License

MIT © mrhelloboy.

See also