Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/krish-r/hugo-minimalist
A minimalist theme for Hugo built with Tailwind CSS inspired by Hugo PaperMod
https://github.com/krish-r/hugo-minimalist
hugo tailwindcss
Last synced: about 2 months ago
JSON representation
A minimalist theme for Hugo built with Tailwind CSS inspired by Hugo PaperMod
- Host: GitHub
- URL: https://github.com/krish-r/hugo-minimalist
- Owner: krish-r
- License: mit
- Created: 2023-01-08T15:00:11.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-11T17:43:47.000Z (6 months ago)
- Last Synced: 2024-07-11T20:21:40.013Z (6 months ago)
- Topics: hugo, tailwindcss
- Language: HTML
- Homepage:
- Size: 135 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hugo-Minimalist
A minimalist theme for [Hugo][hugo] built with [Tailwind CSS][tailwind_css], inspired by [Hugo PaperMod][hugo_papermod] theme.
## Screenshots
Dark Mode
![hugo-minimalist-dark][theme_dark_mode]
![hugo-minimalist-dark-single][hugominimalist_dark_single]
![hugo-minimalist-dark-grid][hugominimalist_dark_grid]
Light Mode
![hugo-minimalist-light][theme_light_mode]
![hugo-minimalist-light-single][hugominimalist_light_single]
![hugo-minimalist-light-grid][hugominimalist_light_grid]
## Installation
### Prerequisites
- [Git][git_installation]
- [Hugo][hugo_installation]
- A Hugo site
Example based on Hugo quick start
```sh
hugo new site -f yaml
# hugo new site my-awesome-site -f yaml
## use a 'yaml' for configuration file instead of 'toml'
cd
# cd my-awesome-site
git init
```
### Adding the Theme
- Add the theme using any one of the following options -
- Add the theme as a git submodule to the hugo site
```sh
git submodule add --depth=1 https://github.com/krish-r/hugo-minimalist.git themes/hugo-minimalist
git submodule update --init --recursive
```
- To Update, run
```sh
git submodule update --remote --merge
```
- Clone/Download the theme inside the hugo site
```sh
git clone --depth=1 https://github.com/krish-r/hugo-minimalist.git themes/hugo-minimalist
```
- To Update, run
```sh
git pull
```
## Usage
- Append this example template to the site's config file (`config.yaml`)
```yaml
# config.yaml
theme: hugo-minimalist
menu:
main:
- identifier: "home"
name: "Home"
url: "/"
weight: 10
## Additional Pages
# Single Page
- identifier: "contact"
name: "Contact"
url: "/contact"
weight: 20
# Grid Page
- identifier: "grid"
name: "Grid Example"
url: "/grid"
weight: 30
params:
home:
greeting: Hello
name: Hugo Minimalist
shortDesc: |
Description Line 1
Description Line 2
image:
# images should be placed under "assets/images" directory under the site directory
logo: /images/logo.png
profile: /images/profile.png
# favicon should be placed under "assets" directory under the site directory
favicon: favicon.ico
enableRobotsTXT: true
```
- `robots` (optional, to allow search engine indexing & crawling):
- Remove the following tag from `hugo-minimalist/layouts/partials/head.html`
```html
```
- Remove the robots.txt file from `hugo-minimalist/layouts/robots.txt`
- set `enableRobotsTXT` to `true` in config file
### Adding pages
Create pages under `content` subdirectory under the site directory
```sh
hugo new .md
# hugo new contact.md
# hugo new grid.md
```
#### Using single page layout
Example `content/contact.md` page
```md
---
title: "Contact"
date: 2023-01-01T00:00:00+05:30
draft: false
---
[GitHub](github-profile-link)
[LinkedIn](linkedin-profile-link)
[Twitter](twitter-profile-link)
[Facebook](facebook-profile-link)
[YouTube](youtube-channel-link)
```
#### Using grid layout and data file
Append the following to the front matter to use the grid layout
```
type: "custom"
layout: "grid"
dataFile: ""
```
Example `content/grid.md` page
```md
---
title: "Grid Example"
date: 2023-01-01T00:00:00+05:30
draft: false
type: "custom"
layout: "grid"
dataFile: "grid_data"
---
Grid Example
```
##### data file
Create data file (`grid_data.yaml`) under `content` subdirectory under the site directory
Example `data/grid_data.yaml` data file
```yaml
# example `data/grid_data.yaml`
data:
- heading 01:
- sub heading 01:
- value 01
- value 02
- value 03
- value 04
- sub heading 02:
- value 01
- value 02
- heading 02:
- value 01
- value 02
- value 03
- value 04
- heading 03:
- sub heading 01:
- value 01
- value 02
- value 03
- value 04
- sub heading 02:
- value 01
- value 02
- sub heading 03:
- value 01
- value 02
- heading 04:
- value 01
- value 02
```
### Starting Hugo development server
- Run hugo development server to preview sites
```sh
hugo server --buildDrafts
```
## Useful links
- [Hugo Quick start][hugo_quickstart] - for more details on using Hugo
- Hugo [Hosting and Deployment][hosting_deployment] guide
## Modifying the theme
```sh
# install dependencies
cd themes/hugo-minimalist
npm install
# edit the theme and live preview (by running `hugo server`)
npm run tw-watch
# build the theme
npm run tw-build
npm run tw-build-minify
```
## Credits
- [Hugo PaperMod theme][hugo_papermod] for the design inspiration, toggle icons and git installation instructions
[hugo]: https://gohugo.io/
[tailwind_css]: https://tailwindcss.com/
[git_installation]: https://git-scm.com/downloads
[hugo_installation]: https://gohugo.io/installation/
[hugo_quickstart]: https://gohugo.io/getting-started/quick-start/
[hosting_deployment]: https://gohugo.io/hosting-and-deployment/
[theme_light_mode]: https://github.com/krish-r/hugo-minimalist/assets/54745129/7da0360a-3502-45a6-8c4e-4e738472a43b
[theme_dark_mode]: https://github.com/krish-r/hugo-minimalist/assets/54745129/88aa5d5c-714a-4df4-9141-2e426aa0a073
[hugominimalist_light_single]: https://github.com/krish-r/hugo-minimalist/assets/54745129/3df2ed91-1fb7-4679-a88c-62515800afe5
[hugominimalist_light_grid]: https://github.com/krish-r/hugo-minimalist/assets/54745129/d7d2311a-0ae9-4700-ba73-4591dc63a249
[hugominimalist_dark_single]: https://github.com/krish-r/hugo-minimalist/assets/54745129/599df01e-49bb-4379-9eae-ce6126df7b8a
[hugominimalist_dark_grid]: https://github.com/krish-r/hugo-minimalist/assets/54745129/7e45c509-9066-41f3-8230-41ea938b4d8e
[hugo_papermod]: https://github.com/adityatelange/hugo-PaperMod/