Fresh is a theme for the Hugo static site generator adapted from the gorgeous, Bulma-based theme of the same name from CSS Ninja. You can find a live demo of the original theme here and a live demo of the Hugo theme here.
To create a new site using this theme:
# Create site and cd into it
hugo new site my-site && cd my-site
# Clone the Fresh theme
git clone https://github.com/StefMa/hugo-fresh themes/hugo-fresh
# Remove the default config
rm config.toml
# Fetch the example config
curl -O https://raw.githubusercontent.com/StefMa/hugo-fresh/master/exampleSite/config.yaml
# Run the site locally
hugo server
# Open the site in your browser
open http://localhost:1313There's a wide variety of customizations that you can make to your Hugo Fresh landing page by modifying the config.yaml file that you downloaded.
Define the logo of the navigationbar in the upper left corner.
Code
navbarlogo:
image: logos/fresh.svg # Logo (from static/images/logos/)
link: /
Set the font of the site.
Code
font:
name: "Open Sans"
sizes: [400,600]
The "main" page which you see when you open the website.
Code
``` hero: title: Manage. Deploy. subtitle: Lorem ipsum sit dolor amet is dummy text used by the typography industry buttontext: Get started buttonlink: "#" image: illustrations/worker.svg # Footer logos (from static/images/logos/clients/*.svg) clientlogos: - systek - tribe - kromo - infinite - gutwork ```The navigation bar which is at the top of the site. For a dropdown, add a "sublinks" list.
Code
navbar:
- title: Features
url: /
- title: Pricing
url: /
- title: Dropdown
sublinks:
- title: Dropdown item
url: /
- title: Dropdown item
url: /
- title: Dropdown item
url: /
- title: Log in
url: /
- title: Sign up
url: /
button: true
Describes the second "page" which you will see when you scroll down. Currently it will have always three titles.
Code
section1:
title: Great power comes
subtitle: with great responsibility
tiles:
- title: App builder
icon: mouse-globe
text: This is some explanatory text that is on two rows
url: /
buttonText: Free trial
- title: Cloud integration
icon: laptop-cloud
text: This is some explanatory text that is on two rows
url: /
buttonText: Get started
- title: Add-ons & plugins
icon: plug-cloud
text: This is some explanatory text that is on two rows
url: /
buttonText: Get started
Shows information why someone should use this product.
Code
section2:
title: You're here because you want the best
subtitle: And we know it
features:
- title: Powerful and unified interface
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
# Icon (from /images/illustrations/icons/___.svg)
icon: laptop-globe
- title: Cross-device synchronisation
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
icon: doc-sync
- title: Nomad system
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
icon: mobile-feed
Display a bright image of your product.
Code
section3:
title: One platform
subtitle: To rule them all
image: illustrations/mockups/app-mockup.png
buttonText: Get started
buttonLink: "#"
What clients says about us.
Code
section4:
title: Our Clients love us!
subtitle: Lorem ipsum sit dolor amet is a dummy text used by typography industry
clients:
- name: Irma Walters
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
job: Accountant
img: 1 # From (static/images/illustrations/faces)
- name: John Bradley
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
job: Financial Analyst
img: 2
- name: Gary Blackman
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
job: HR Manager
img: 3
Write us.
Code
section5: true # or false to hide it
The footer of the site.
Code
footer:
# Logo (from /staticimages/logos/___)
logo: fresh-white-alt.svg
# Social media links (GitHub, Twitter, etc.). All are optional.
socialmedia:
- link: https://github.com/lucperkins/github-fresh
# Icons are from Font Awesome
icon: github
- link: https://dribbble.com/#
icon: dribbble
- link: https://facebook.com/#
icon: facebook
- link: https://twitter.com/lucperkins
icon: twitter
- link: https://bitbucket.org/#
icon: bitbucket
bulmalogo: true
quicklinks:
column1:
title: "Product"
links:
- text: Discover features
link: /
- text: Why choose our product?
link: /
- text: Compare features
link: /
- text: Our roadmap
link: /
- text: AGB
link: /agb
column2:
title: "Docs"
links:
- text: Get started
link: /
- text: User guides
link: /
- text: Admin guide
link: /
- text: Developers
link: /
column3:
title: "Blog"
links:
- text: Latest news
link: /blog/first
- text: Tech articles
link: /blog/second
Single pages displays a single unit of information and are more or less independent from the landing page above.
You can create single pages in the content directory (even sub-dirs are possible).
If you'd like to have the footer displayed on your single page include "include_footer: true" in your front matter.
Code
---
title: AGB
sidebar: true # or false to display the sidebar
sidebarlogo: fresh-white-alt # From (static/images/logo/)
include_footer: true
---
If you see error: failed to transform resource: TOCSS: failed to transform "style.sass" when attempting to run your hugo server, make sure you have the extended version of Hugo installed!