Hugo Advance

Hugo Advance is our premium multi-purpose Hugo theme.

Buy Now $79 Live Demo

Hugo Version: v0.113.0
Theme Version: 3.0
Updated: Nov 24, 2023
License: Pro
Price: $79 USD

Documentation

Theme features

Content Types

Homepage (Markdown)
Services (Markdown)
Work (Markdown)
Team (Markdown)
Blog (Markdown)
Partners (Data)
Basic Page (Markdown)
Author (Taxonomy)
Contact Form (Single Page)

CSS

Bootstrap 5.3
SCSS (Hugo Pipelines)
100% responsive design
Includes all SCSS files which are well structured and cleanly written
The entire Bootstrap library is not imported by default. Mainly we use the Bootstrap grid, media queries and utilities. If you wish to use more of the Bootstrap library you just need to uncomment the @imports in the style.scss.

Speed

100/100 Google Lighthouse speed score
Tiny CSS and JS filesize ⚡
No jQuery
Statically generated - you can’t get faster or more resiliant then that! 💪

SEO

100/100 Google Lighthouse SEO score
Google Analytics can be configured in config.yml, supports environment variables.
Google Tag manager can be configured in config.yml, supports environment variables.
Plausible analytics can configured in config.yml, supports environment variables.
Umami analytics can configured in config.yml, supports environment variables.
Title and Meta tags generated for each page automatically
OG meta data for Facebook, Twitter etc generated for each page automatically
Ability to override title and meta tags in the frontmatter on a per page basis
Ability to override OG Meta data in frontmatter on a per page basis
Semantic HTML5 document structure
Social media links can be configured in data/social.json - Fontawesome is used for the icons.
No Javascript links or onClick events to prevent crawling
Statically generated pages are fast and easy to index

Multilingual

Full Multilingual support
Theme demo ships with English and French enabled
multilingual menus
2 language switchers in main menu and footer which can be enabled/disabled
i18n support

Privacy

No analytics, tracking, or cookies are enabled by default
Supports privacy focused analytics providers Plausible & Umami, both GDPR compliant alternatives to Google Analytics
Self hosted Google fonts enabled by default. Option to switch between hosting and CDN Google fonts in config.yml
Does not use NPM or node_modules, no risk of dependencies leaking or extracting data

Menus

Responsive menu using simple vanilla JS/CSS code
Animated hamburger and mobile overlay menu
Dropdown items in main menu
Dropdown menu items can have optional icons and descriptions
Configure menu items as buttons or external links
3 Footer menus
Bootom menu
Configure copyright, RSS, terms and privacy links in the footer

Fixed header and animation on scroll
Logo configuration for desktop and mobile. Control the image (different logos for desktop and mobile for instance) size, text, color etc - Your logo will be perfect 👌

Darkmode

First class darkmode support
Configure manual dark mode and position of dark mode toggle
Supports automatic darkmode based on users OS setting (css prefers-color-scheme)
Dark mode switch can be displayed in header/footer and mobile menu overlay
Configure the color palette for light and dark mode base colors in config.yml

Fonts

Supports self hosted fonts @font-face - GDPR compliant
Supports Google fonts
Fonts can be configured in config.yml switch between self hosting and CDN Google fonts
Font Awesome 5 icons

Social media links can be configured in data/social.json - Fontawesome is used for the icons.
Auto generated and overridable OG Meta data for Facebook and Twitter cards

Contact Form

Contact page & contact form
Contact details including phone, email, map etc can be displayed in the footer and contact page.
Supports Netlify forms - comes with prebuilt Netlify form, will work automatically when hosting with Netlify
Supports Formspree forms - comes with prebuilt Formspree form just add your Formspree ID in the config.yml

Comments

Includes Disqus comments

Includes Mailchimp subscribe

Cookieconsent open source Cookie banner - a lightweight, cutomizable, GDPR compliant cookie consent solution written in vanilla JS. Amazing 🍺

RSS

Includes RSS feed
RSS icon feed can be enabled/disabled in footer

Blog

Full blog. Contains categories, tags and author profiles
Blog posts can have full width hero images

Content

Robust example content included out of the box
All photos, illustrations and icons included with this theme are royalty free

Netlify

Ready to deploy to Netlify
includes netlify.toml file

Linting

prettier
stylelint
vscode settings

Changelog

Version 3.0 (Released Nov 24, 2023)

Update Hugo Zerostatic framework. Includes new components, bug fixes and even more configuration options in the config.yml
Align feature parity with Jekyll Advance
Add new header and menu configuration options for button, external link, dropdown icons and dropdown descriptions. Improve dropdown quality.
Add multiple office locations, google maps to contact page
Improve Hero section with new config options
Improve example content for blog and work
Add styleguide
Add several new shortcodes
Fix several bugs with darkmode tables and code highlighting
Improve language dropdown
Improve blog functionality and design
Add new privacy focused analytics providers Plausible & Umami
Add self hosted Google fonts, enabled by default
Add cookie banner - Cookieconsent - a lightweight, cutomizable, GDPR compliant cookie consent solution written in vanilla JS.
Prevent loading of Disqus unless user needs to comment, prevents 3rd party cookie installation and data tracking from Disqus
Use the Youtube no-cookie embed code when embedding videos
Remove external Javascript from Mailchimp embed
Add configurable RSS Icon to footer
Improvements to SEO meta tags and OG meta tags. More flexible to override on a per page basis
Improve support for Google Tag manager and Google analytics
Update to Bootstrap 5.3.2
Add option for Formspree contact forms
Add option for Disqus comments
Improve contact details in footer
Improve dropdown menu and mobile menu
Improve terms and privacy default pages

Version 1.4 - 1.4.2 (Released Feb 24, 2023)

Upgrade to Bootstrap 5.2
Add config option to allow HTML in markdown
Improve performance and prevent flickering of dark mode by increasing priority of darkmode javascript snippet in the head.
Test baseurl with all metatags and improve absolute url

Version 1.4.1 (Released Jan 23, 2023)

Improve Google local fonts with more examples
Add email link to team bio
Improve control over SEO and OG meta tags. Ability to override the title, description and og meta tags on a per page basis via frontmatter. see content/en/services/web-design.md for an example. If overrides are not specified, the pages regular title, description and image fields are used as a fallback.

meta: 
  title: "Web Design Services"
  description: "We offer the best range of web design services in the area"
  og_title: "View our web design services"
  og_image: "images/gen/services/service-12-large.webp"
  og_description: "Learn about the web design services we offer. It encompasses many different skills and disciplines"

Version 1.4 (Released Sep 12, 2022)

Tested with latest Hugo version v0.102.3
Update favicons
Update image content
Fix broken demo content from Unsplash

Version 1.3 - 1.3.2 (Released June 20, 2022)

Fix bug when disabling language switcher in header

Version 1.3.1 (Released April 15, 2022)

Fixes issue with latest Hugo version 0.96+ .URL error. Hugo versions v0.96+ were no longer running because of deprecated .URL error. Fixed this bug by updating .URL => .Permalink

Version 1.3 (Released April 26, 2021)

Added full multilingual support! 👋 🇦🇺🇪🇸🇫🇷
Added multilingual demo content, I chose French, please excuse the poor translations.
Added multilingual menus
Added language selector dropdown in menu
As part of the multilingual implementation, lots of configuration options have been moved from the config.toml to the individual markdown files. For example instead of configuring the services page from the config.toml, you now configure it in the service pages front-matter.
Added support for image, video, figure shortcodes in markdown content
Added nested menus
Added dark mode
Improved demo content
Updated from Bootstrap 4.3 => 4.6
Updated and test with Hugo v0.80.0
Removed jQuery

Version 1.0 - 1.2 (Released Jul 15, 2019)

Updated documentation theme documentation
Add global config option: enableGitInfo = true - When sorting content by it’s last modified date it will use the git timestamp of when the file was modified. No longer need to manually update the lastmod front matter in markdown files.
Ability to import and configure Google fonts from the config.toml
Improve homepage slider functionality on mobile
Configure all aspects of the services section on the homepage from the config.toml
Configure all aspects of the work section on the homepage from the config.toml
Change the “We Help Business Grow” section on the homepage to be easier to change the image
Partners logos on the homepage now contain links
Update font from “Palaquin Dark” to “Palaquin” - It’s the same font (Google fonts) but this version has a larger version of font weights available.
hero image text color can now be configured in front-matter
hero image can now be hidden on a per page basis from the front-matter
Added hero-image partial to services page
Added an additional overview section to services page
Improved design and functionality of service summaries. Summaries can now have thumbnails using the frontmatter thumbnail in a services markdown file.
Ability to configure the default gradient colours for the hero-image partial in the config.toml see hero_gradient_start and hero_gradient_end
Add filters and filtering by taxonomy to the work grid
Work grid now uses pure CSS masonry. Removed masonry.pkgd.min.js and imagesloaded.pkgd.min.js
Design changes to work list page
Improvements to work single page
Single work pages can now have a gallery at the bottom
Can now specify the sort order of the work grid in config.toml - options: “shuffle”, “lastmod”, “weight”
Add sequenced fade-in animation to work grid using AOS
Configure headers transparancy in a pages frontmatter

Version 1.1 (Released Feb 27, 2019)

Added online theme documentation
Update SCSS files to Bootstrap 4.3.
All sections of the homepage are now configurable via the config.toml.
All sections of the services page are now configurable via the config.toml.
Configure global theme colors and fonts from the config.toml or style.scss. Hugo site params passed into the style.scss file.
Added contact-cta partial which displays a call to action and can link to the contact page, signup etc. Heading, subheading and button can be configured globally in the config.toml.
Refactor animated header classes to be cleaner and more intuitive. Can inject header classes on a per template .basis. Useful if you have a page with a hero image and you want the header to be transparent over the top.
Simplify hamburger icon, remove hamburger.css library.
Enlarge the hitzone of the logo and hamburger menu in mobile view.
Refactor hero-image partial parameters. Is now set height by default (with default height of 600px). Optionally control the height (ie 360px) or set to fullscreen from a markdown files frontmatter.
Redesign Team page. People are now in circles, where they belong. Added additional team member social media icons: dribble, behance, twitter. Easy to add more icons using font awesome 5.
Add author profile to blog posts, list and single.
Add author taxonomy for viewing blog posts by author.
Add hero-image partial to blog posts.
Improve document formatting of blog post content, adding styles for most semantic elements.
Footer menus are now hugo menus and are configured in config.toml.
Show hide footer menus from config.toml.
Enlarge hit zone of footer menu links on mobile.
Removed unused image and font assets from slick slider library.
Improved stacking of partner logos on mobile.
Adjust color and contrast of headings so that only links should appear in the primary link color.
Improve design of contact page, and make all text read from the markdown file.
Add meta tags and go meta tags to homepage configured via config.toml
Override meta tags on a per page basis
achieve 100/100 Google speed and SEO scores
Google analytics now uses Netlify environment variable if found, otherwise uses params found in config.toml. Google Analytics does not load on local development to avoid junk data.

Version 1.0 (Released Nov 27, 2018)

Initial release.

Code Examples

Global config

# config.yml

baseURL: "https://hugo-advance.netlify.app"
title: Hugo Advance

paginate: 8
enableGitInfo: false
pygmentsCodeFences: true
pygmentsCodefencesGuessSyntax: true
pygmentsUseClasses: true
metaDataFormat: yaml
languageCode: en-us
defaultContentLanguage: en
defaultContentLanguageInSubdir: false

params:
  colors:
    # light
    base_bg: "#ffffff"
    base_bg_2: "#f8fafc"
    base_bg_3: "#f1f5f9"
    base_text: "#202020"
    base_text_2: "#4b5563"
    primary_bg: "#2b3af7"
    primary_bg_2: "#424ff8"
    primary_bg_3: "#702bf7"
    primary_text: "#fdfcf9"
    header_text: "#2b3af7"
    logo_text: "#2b3af7"

    # dark
    base_bg_dark: "#121212"
    base_bg_2_dark: "#1e1e1e"
    base_bg_3_dark: "#232323"
    base_text_dark: "#ffffff"
    base_text_2_dark: "#d7d7d7"
    primary_bg_dark: "#2b3af7"
    primary_bg_2_dark: "#424ff8"
    primary_bg_3_dark: "#702bf7"
    primary_text_dark: "#fdfcf9"
    logo_text_dark: "#ffffff"
    header_text_dark: "#ffffff"

  fonts:
    use_google_fonts: false
    google_fonts: "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Source+Code+Pro&family=Source+Sans+3:wght@300;400;700&display=swap"
    use_self_hosted_fonts: true # font files must be placed in /static/fonts folder and the @font-face definitions must be added to /static/fonts/fonts.css
    logo: "Lato"
    heading: "Lato"
    base: "'Source Sans 3'"
    monospace: "'Source Code Pro'"

  logo:
    logo_text: "Advance"
    logo_image_desktop: images/logo/logo.svg
    logo_image_mobile: images/logo/logo-mobile.svg
    logo_image_desktop_invert: images/logo/logo-invert.svg # used on transparent header and when in dark mode. Normally a white version of the logo.
    logo_image_mobile_invert: images/logo/logo-invert-mobile.svg # used on transparent header and when in dark mode. Normally a white version of the logo.
    logo_image_desktop_height: "34px"
    logo_image_desktop_width: "34px"
    logo_image_mobile_height: "34px"
    logo_image_mobile_width: "34px"
    show_logo_image_on_mobile: true
    show_logo_image_on_desktop: true
    show_logo_text_on_mobile: false
    show_logo_text_on_desktop: true
    logo_text_font_size: "24px"
    logo_text_font_weight: "500" # 300, 500, 700

  header:
    fixed: true
    header_height: "60px"
    header_menu_font_size: "18px"

  open_graph:
    og_type: "website"
    og_twitter_card: "summary"
    og_twitter_site: "@zerostaticio"
    og_twitter_creator: "@zerostaticio"

  dark_mode:
    enable_dark_mode: true
    show_dark_mode_toggle_in_header: false
    show_dark_mode_toggle_in_bottom: true
    show_dark_mode_toggle_in_mobile_menu: true

  cookie_banner:
    enabled: false
    show_manage_cookies_at_bottom: false

  analytics:
    google_analytics_id: "" # G-XXXXXXXXXX
    gtm_id: "" # GTM-XXXXXXXX
    plausible_data_domain: "" # example: mywebsite.com
    umami_data_website_id: "" # example: "ddd14336-5fb0-4cdd-8f32-e1bfa906cc2b"
    umami_src: "" # "https://analytics.eu.umami.is/script.js"

  multilingual:
    enable_language_switcher: true
    show_language_switcher_in_header: true

  menu:
    show_dropdown_items_in_mobile_menu: false
    show_social_media_in_mobile_menu: true

  contact_form:
    use_netlify_form: true
    use_formspree_form: false
    formspree_endpoint: https://formspree.io/f/moqyklqv
    netlify_form_name: "contact"

  footer:
    enable_footer: true
    footer_title: "Hugo Advance"
    footer_description: "Advance is a multi-purpose premium Hugo theme. Modern design, clean code and highly configurable."
    enable_social_media_links: true
    enable_languages: true
    enable_copyright: false
    enable_menu_footer_primary: true
    enable_menu_footer_secondary: true
    enable_menu_footer_tertiary: true
    footer_primary_menu_title: "Product"
    footer_secondary_menu_title: "Company"
    footer_tertiary_menu_title: "Support"

  bottom:
    enabled: true
    enable_bottom_menu: true
    copyright_text: "© 2023 Zerostatic Themes"
    show_rss_icon: true

languages:
  en:
    weight: 0
    languageName: English
    contentDir: content/en
    menu:
      main:
        - name: "Services"
          identifier: services
          url: /services/
          pageRef: services
          weight: 1
        - name: "Our Work"
          identifier: work
          url: /work/
          pageRef: work
          weight: 2
        - name: "Blog"
          identifier: blog
          url: /blog/
          pageRef: posts
          weight: 3
        - name: "About"
          identifier: about
          url: /about/
          pageRef: about
          weight: 4
        - name: Buy Now
          url: "https://www.zerostatic.io/theme/hugo-advance/"
          weight: 10
          params:
            external: true
            button: true
      footer_primary:
        - name: "Services"
          url: /services/
          weight: 1
        - name: "Work"
          url: /work/
          weight: 2
      footer_secondary:
        - name: "Team"
          url: /team/
          pageRef: "team"
          weight: 1
      footer_tertiary:
        - name: Buy Now
          url: "https://www.zerostatic.io/theme/hugo-advance/"
          weight: 1
          params:
            external: true
            button: true
        - name: "Contact"
          url: /contact/
          weight: 2
          pageRef: "contact"
        - name: "Styleguide"
          url: /styleguide/
          weight: 3
          pageRef: "styleguide"
      bottom:
        - name: "Terms"
          url: "/terms/"
          weight: 1
        - name: "Privacy"
          url: /privacy/
          weight: 2

  fr:
    weight: 1
    languageName: Français
    contentDir: content/fr
    title: Hugo Avance
    params:
      footer:
        footer_primary_menu_title: Produit
        footer_secondary_menu_title: Compagnie
        footer_tertiary_menu_title: Support
    menu:
      main:
        - name: "Prestations de service"
          identifier: services
          url: /services/
          weight: 1
        - name: "Notre Travail"
          identifier: work
          url: /work/
          weight: 2
        - name: "Blog"
          identifier: blog
          url: /blog/
          weight: 3
        - name: "À Propos"
          identifier: about
          url: /about/
          weight: 4
      footer_primary:
        - name: "Services"
          url: /services/
          weight: 1
        - name: "Work"
          url: /work/
          weight: 2
      footer_tertiary:
        - name: Buy Now
          url: "https://www.zerostatic.io/theme/hugo-advance/"
          weight: 10
          params:
            external: true
            button: true

permalinks:
  posts: "blog/:year/:month/:title/"
  pages: ":slug/"

taxonomies:
  tag: tags
  category: categories
  portfolio: portfolio
  author: authors

markup:
  goldmark:
    renderer:
      unsafe: true

License

Pro License

This License grants you, the purchaser, an ongoing, non-exclusive, worldwide license to make use of this theme. You are licensed to use this theme to create one single end product for yourself, your company or for one client.

The full license is included with the theme files.

Documentation

Hugo Advance Documentation

Premium documentation is available for this theme online, you may view the documentation before you purchase the theme.

Support

Premium

Hugo Advance was created by Robert Austin. We keep our premium themes up to date with fixes and new features, and provide direct 1-to-1 support – just send us a message.

Hugo Advance

Hugo Advance

Theme features

Content Types

CSS

Speed

SEO

Multilingual

Privacy

Menus

Header

Darkmode

Fonts

Social

Contact Form

Comments

Newsletter

Cookie Banner

RSS

Blog

Content

Netlify

Linting

Changelog

Version 3.0 (Released Nov 24, 2023)

Version 1.4 - 1.4.2 (Released Feb 24, 2023)

Version 1.4.1 (Released Jan 23, 2023)

Version 1.4 (Released Sep 12, 2022)

Version 1.3 - 1.3.2 (Released June 20, 2022)

Version 1.3.1 (Released April 15, 2022)

Version 1.3 (Released April 26, 2021)

Version 1.0 - 1.2 (Released Jul 15, 2019)

Version 1.1 (Released Feb 27, 2019)

Version 1.0 (Released Nov 27, 2018)

Code Examples

License

Documentation

Support

Themes

Support

Company