This guide will walk you through installing the Sans theme for your Hugo site.

Prerequisites

Before installing the Sans theme, ensure your development environment meets the following requirements:

Verify Hugo Installation

Confirm that Hugo is properly installed and meets the minimum version requirement:

1

hugo version

Expected output:

1

hugo v0.146.0+extended darwin/amd64 BuildDate=...

Important: Ensure you have the Extended version of Hugo installed, as the theme requires Hugo Extended features for SCSS/Sass processing.

Verify Git Installation

1

git --version

Verify Node.js and npm

1
2

node --version
npm --version

Installation Methods

Option A: Git Submodule (Recommended)

Using Git submodules is the recommended approach as it allows easy theme updates and maintains a clean separation between your content and the theme.

Step 1: Initialize Git Repository

If your site isn’t already a Git repository:

1
2

cd your-hugo-site
git init

Step 2: Add Theme as Submodule

1

git submodule add https://github.com/psugam/sans themes/sans

This creates a themes/sans directory containing the theme.

Step 3: Copy Required Files

Copy the following directories from the theme to your site root:

1
2
3

cp -r themes/sans/exampleSite/content ./
cp -r themes/sans/exampleSite/assets ./
cp -r themes/sans/exampleSite/config ./

Step 4: Configure Theme

Move hugo.toml from the config folder to your site root:

1

mv config/hugo.toml ./hugo.toml

Open hugo.toml and verify the theme name is set correctly:

1

theme = "sans"

Step 5: Test Installation

1

hugo server

Visit http://localhost:1313 to see your site.

Option B: Manual Download

If you prefer not to use Git submodules, you can manually download the theme.

Step 1: Download Theme

1. Visit the Sans theme repository
2. Click Code → Download ZIP
3. Extract the ZIP file

Step 2: Move Theme to Hugo Site

1
2

# Assuming extracted folder is named 'sans-theme-main'
mv sans-theme-main your-hugo-site/themes/sans

Important: Ensure the theme folder is named exactly sans (not sans-theme-main or any other variation).

Step 3: Copy Required Files

Follow the same steps as Option A (Steps 3-6):

1. Copy content, assets, and config directories
2. Move hugo.toml to site root
3. Verify theme = "sans" in configuration
4. Run npm install
5. Test with hugo server

Post-Installation Configuration

Directory Structure

After installation, your site structure should look like this:

1
2
3
4
5
6
7
8
9

your-hugo-site/
├── assets/
├── config/
├── content/
├── themes/
│   └── sans/
├── hugo.toml
├── package.json
└── node_modules/

Update Theme Configuration

Edit hugo.toml or configuration files in the config/ directory to customize:

• Site title and description
• Author information
• Theme colors and appearance
• Social media links
• Menu structure
• Search functionality

Refer to the Configuration Guide for detailed options.

Updating the Theme

For Git Submodule Installation

1
2

cd your-hugo-site
git submodule update --remote --merge

For Manual Installation

1. Download the latest version from GitHub
2. Replace the themes/sans directory with the new version
3. Review the changelog for breaking changes

Next Steps

Now that you’ve installed the Sans theme, you can:

1. Configure Your Site - Customize theme settings
2. Enable Search - Set up Pagefind search functionality
3. Deploy Your Site - Publish to hosting platforms