https://github.com/wayjam/hugo-theme-fluidity
A fluid and responsive Hugo theme.
https://github.com/wayjam/hugo-theme-fluidity
fluent-design gohugo hugo hugo-blog hugo-blog-theme hugo-template hugo-theme tailwind tailwindcss tailwindcss-v4 theme
Last synced: 8 months ago
JSON representation
A fluid and responsive Hugo theme.
- Host: GitHub
- URL: https://github.com/wayjam/hugo-theme-fluidity
- Owner: wayjam
- License: mit
- Created: 2024-12-01T13:11:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-26T16:18:11.000Z (over 1 year ago)
- Last Synced: 2025-03-28T05:24:22.276Z (over 1 year ago)
- Topics: fluent-design, gohugo, hugo, hugo-blog, hugo-blog-theme, hugo-template, hugo-theme, tailwind, tailwindcss, tailwindcss-v4, theme
- Language: HTML
- Homepage: https://wayjam.github.io/hugo-theme-fluidity/
- Size: 344 KB
- Stars: 6
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Theme Fluidity
[](https://themes.gohugo.io/hugo-theme-fluidity/)
[](https://gohugo.io/)
A fluid and responsive Hugo theme.
## Features
- Fluent Design mixed with [Tailwind CSS](https://tailwindcss.com/)
- Search Support
- Code Highlight
- Dark Mode
- Responsive
- Archive Page
Checkout [demo](https://wayjam.github.io/hugo-theme-fluidity/) now.
## Installation
### Hugo Module
> https://gohugo.io/hugo-modules/use-modules/
```bash
hugo mod init github.com//
```
```yaml
module:
imports:
- path: github.com/wayjam/hugo-theme-fluidity
```
```bash
hugo mod npm pack && npm update
```
### Git Submodule
```bash
git submodule add https://github.com/wayjam/hugo-theme-fluidity.git themes/hugo-theme-fluidity
```
set theme in `hugo.yaml`
```yaml
theme: hugo-theme-fluidity
```
```bash
hugo mod npm pack && npm update
```
## Configuration
Site configuration see [exampleSite/hugo.yaml](exampleSite/hugo.yaml)
### About Page
Create a new page in the `content` directory, for example
### Archives Page
Create a new page in the `content` directory, for example
### Search Page
Create a new page in the `content` directory, for example
#### Google Search
```yaml
params:
search:
provider: google
```
#### PageFind
1. Step 1: Set the provider to pagefind
```yaml
params:
search:
provider: pagefind
```
2. Create a pagefind config file, for example
3. Install pagefind: `npm i pagefind`
4. Run pagefind before every build: `npx pagefind`
## License
[MIT](LICENSE)