HUGO
News Docs Themes Community GitHub

aafu

Portfolio and blog theme with search and dark/light theme.

License
MIT
GitHub Stars
56
Last Updated
2025-04-05

aafu Theme

aafu is a modern, responsive portfolio and blog theme built with Hugo and powered by Tailwind CSS 4.x.

🌍 Live Demo

Experience the theme in action: aafu.pages.dev

πŸš€ Installation

πŸ§ͺ Local Development

Option 1: Standalone Project

The repository functions as a complete Hugo site out of the box. To run it locally:

# Clone the repository
git clone https://github.com/darshanbaral/aafu.git
cd aafu

# Install dependencies
npm install

# Start the development server
hugo server

Option 2: Use as a Hugo Theme

To use aafu as a theme within your own Hugo project:

  1. Add the theme:

    git submodule add https://github.com/darshanbaral/aafu.git themes/aafu
  2. Copy the following files/folders from aafu/ to your project root:

    • Files:
      • config.yaml
      • package.json
      • tailwind.config.js
    • Folders:
      • assets/
      • static/

    The project structure should look something like:

    your-hugo-project/
    β”œβ”€β”€ config.yaml
    β”œβ”€β”€ package.json
    β”œβ”€β”€ tailwind.config.js    
    β”œβ”€β”€ assets/
    β”œβ”€β”€ content/
    β”œβ”€β”€ static/
    β”œβ”€β”€ themes/
    β”‚   └── aafu/
  3. Enable the theme by setting the theme in config.yaml:

    theme: aafu
  4. Install dependencies and start development server:

    npm install
    hugo server

πŸ”§ Getting Started

Configuration (config.yaml)

Customize the theme by modifying the config.yaml.

Key customization options:

  • Define which sections appear in the accordion.
  • Control the order of sections.
  • Choose which section should be expanded by default.

Profile Image

Replace profile.jpg in static/images with your own profile picture.

Theme Modes

To configure the theme mode, modify the params.theme.mainTheme attribute in config.yaml.

  • Light Mode (light)
  • Dark Mode (dark)
  • Auto Mode (null - adjusts based on user’s device settings)

πŸ“¦ Deployment

This theme supports search functionality using Pagefind. Before deploying, index your content using the following command:

hugo && npx -y pagefind --site public

🐞 Reporting Issues & Feature Requests

If you encounter any bugs or have feature suggestions, please open an issue.


Enjoy using aafu! πŸš€

Β