Hugo Themes

Prev/Next: All Themes

fluidity

A fluid and responsive Hugo theme.

Download
fluidity

Theme Fluidity

hugo-theme-fluidity Hugo GitHub GitHub code size in bytes

A fluid and responsive Hugo theme.

screenshot

Features

  • Fluent Design mixed with Tailwind CSS
  • Search Support
  • Code Highlight
  • Dark Mode
  • Responsive
  • Archive Page

Checkout demo now.

Installation

Hugo Module

https://gohugo.io/hugo-modules/use-modules/

hugo mod init github.com/<your_user>/<your_project>

module:
  imports:
    - path: github.com/wayjam/hugo-theme-fluidity

hugo mod npm pack && npm update

Git Submodule 

git submodule add https://github.com/wayjam/hugo-theme-fluidity.git themes/hugo-theme-fluidity

set theme in hugo.yaml

theme: hugo-theme-fluidity

hugo mod npm pack && npm update

Configuration

Site configuration see exampleSite/hugo.yaml

About Page

Create a new page in the content directory, for example <exampleSite/content/about.md>

Archives Page

Create a new page in the content directory, for example <exampleSite/content/archives/_index.md>

Search Page

Create a new page in the content directory, for example <exampleSite/content/search/_index.md>

params:
  search:
    provider: google

PageFind

  1. Step 1: Set the provider to pagefind
params:
  search:
    provider: pagefind

  1. Create a pagefind config file, for example <exampleSite/pagefind.yml>

  2. Install pagefind: npm i pagefind

  3. Run pagefind before every build: npx pagefind

License

MIT

See also