Showcase is a minimal, single page theme for Hugo
Showcase is a minimal, single page theme for Hugo
Features:
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
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.
package.json
and package-lock.json
to the root folder of your the websitenpm install
to install required packages for themenpm i -g postcss-cli
to use PostCSS with Hugo buildtheme = 'showcase'
in config.tomlnpm start
to start your local serverMake sure to commit the above changes to your repository.
When deploying to services like Netlify or Vercel, use the following command for building your site:
npm i && hugo -D --gc
Minimum Hugo Version: 0.69.0
package.json
file from themes/showcase
folder to your hugo website root folder, and run npm install
.The following explains how to add content to your Hugo site. You can find sample content in the exampleSite/
folder.
.
├── ...
├── projects # Section Name
│ ├── project1 # Project 1
│ ├── project2 # Project 2
│ └── _index # (optional) Customize section name &
│ # default image for section contents
└── ...
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.
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.
You can also add a custom menu item using the config.toml
and disable auto-generated sections if not required. Refer config in exampleSite
In order to enable darkmode toggle in your side, set the params.darkMode
property to true
in your config.toml
.
Set googleAnalytics
in config.toml
to activate Hugo's internal Google Analytics template.
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!
Contributions are welcome. For major changes, please open an issue first to discuss what you would like to change.
Licensed under MIT