Hugo Themes

Prev/Next: All Themes

Showcase

Minimal, one page, theme for showcasing your work

Download
Showcase

Showcase theme for Hugo

Latest Release Showcase hugo theme Hugo generator

Showcase is a minimal, single page theme for Hugo

Preview

Features:

  • Auto-generated menu
  • Responsive content
  • Filtering content
  • Social links
  • Custom menu
  • Darkmode

Get the theme

Run from the root of your Hugo site:

git clone https://github.com/apvarun/showcase-hugo-theme.git themes/showcase

Alternatively, you can include this repository as a git submodule. This makes it easier to update this theme if you have your Hugo site in git as well:

git submodule add https://github.com/apvarun/showcase-hugo-theme.git themes/showcase

Preview the theme

Showcase theme ships with an fully configured example site. For a quick preview:

Copy the package.json file from themes/showcase folder to your hugo website root folder, and run npm install.

cd themes/showcase/exampleSite/
hugo serve --themesDir ../..

Then visit http://localhost:1313/ in your browser to view the example site.

Migrating to v1.3.0

Minimum Hugo Version: 0.69.0

  • Copy the package.json file from themes/showcase folder to your hugo website root folder, and run npm install.

Add content

The following explains how to add content to your Hugo site. You can find sample content in the exampleSite/ folder.

Structure: 

.
├── ...
├── projects       # Section Name
│   ├── project1   # Project 1
│   ├── project2   # Project 2
│   └── _index     # (optional) Customize section name &
│                  # default image for section contents
└── ...

Configure your site

From exampleSite/, copy config.toml to the root folder of your Hugo site and change the fields as you like. Helpful comments are provided.

Menu in Showcase theme is auto-generated from the sections inside your content folder.

Exclude Sections from Menu

It is possible to exclude sections from the auto-generated list. In order to exclude a section, create an _index.md file in that section and set the property private to true. Refer example index file.

Custom Menu

You can also add a custom menu item using the config.toml and disable auto-generated sections if not required. Refer config in exampleSite

Dark mode

In order to enable darkmode toggle in your side, set the params.darkMode property to true in your config.toml.

Google Analytics

Set googleAnalytics in config.toml to activate Hugo’s internal Google Analytics template.

Used By

Issues

If you have a question, please open an issue for help and to help those who come after you. The more information you can provide, the better!

Contributing

Contributions are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

Licensed under MIT

Acknowledgements

Madhu Akula

See Also