https://github.com/techmagus/hugo-theme-showcase
Fork used in https://im.youronly.one; https://im.youronly.one/confidentraveler/; https://im.youronly.one/faithfulathlete/; https://im.youronly.one/yugenbard/
https://github.com/techmagus/hugo-theme-showcase
hugo hugo-theme youronlyone
Last synced: 9 months ago
JSON representation
Fork used in https://im.youronly.one; https://im.youronly.one/confidentraveler/; https://im.youronly.one/faithfulathlete/; https://im.youronly.one/yugenbard/
- Host: GitHub
- URL: https://github.com/techmagus/hugo-theme-showcase
- Owner: techmagus
- License: mit
- Fork: true (apvarun/showcase-hugo-theme)
- Created: 2021-09-28T05:16:01.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-07T07:40:33.000Z (over 1 year ago)
- Last Synced: 2024-11-15T12:18:35.264Z (over 1 year ago)
- Topics: hugo, hugo-theme, youronlyone
- Language: HTML
- Homepage: https://im.youronly.one
- Size: 6.91 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Showcase theme for Hugo
Showcase is a minimal, single page theme for Hugo
Features:
- Auto-generated menu
- Responsive content
- Filtering content
- Social links
- Custom menu
- Darkmode
## Get the theme
Run from the root of your Hugo site:
```sh
git clone https://github.com/apvarun/showcase-hugo-theme.git themes/showcase
```
Alternatively, you can include this repository as a [git submodule](https://git-scm.com/docs/gitsubmodules). This makes it easier to update this theme if you have your Hugo site in git as well:
```sh
git submodule add https://github.com/apvarun/showcase-hugo-theme.git themes/showcase
```
## Preview the theme with example content
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`.
```sh
cd themes/showcase/exampleSite/
hugo serve --themesDir ../..
```
Then visit `http://localhost:1313/` in your browser to view the example site.
## Configuring theme to a hugo website
1. Copy `package.json` and `package-lock.json` to the root folder of your the website
2. Run `npm install` to install required packages for theme
3. Run `npm i -g postcss-cli` to use PostCSS with Hugo build
4. Set `theme = 'showcase'` in config.toml
5. Run `npm start` to start your local server
Make 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:
```sh
npm i && hugo -D --gc
```
## 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
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](https://github.com/apvarun/showcase-hugo-theme/blob/master/exampleSite/content/books/_index.md).
### 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](https://github.com/apvarun/showcase-hugo-theme/blob/master/exampleSite/config.toml)
## 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](https://gohugo.io/templates/internal/#google-analytics).
## Used By
- [Madhu Akula](https://madhuakula.com/content/)
- [@cloudmiracle](http://cloud.vn/)
## Issues
If you have a question, please [open an issue](https://github.com/apvarun/showcase-hugo-theme/issues) 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](LICENSE)
## Acknowledgements
[Madhu Akula](https://github.com/madhuakula)