Hugo Themes Logo Hugo Themes
Hugo Identity Theme screenshot

Hugo Identity Theme

Author Avatar Theme by Aerohub
Updated: 9 Dec 2017
93 Stars

Little profile/card-style template for Hugo. Based on Identity by HTML5 UP.

Github Live Preview

Categories

Personal

Overview

Hugo Identity Theme is a theme for the Hugo static site generator. Based on the Identity template by HTML5 UP, it was ported to Hugo for training and fun. Despite its simplicity, it is highly configurable and flexible. The theme features a responsive design, configurable appearance, configurable social links, a contact form, and integration with Google Analytics.

Features

  • Responsive design: The theme is designed to be mobile-friendly and adapt to different screen sizes.
  • Configurable appearance: Users can easily customize the theme’s appearance by changing the config.toml file.
  • Configurable social links: Users can add their own social media links to the theme, allowing visitors to easily connect with them.
  • Contact form: The theme includes a contact form that visitors can use to send emails to the site owner.
  • Google Analytics integration: Users can easily add their Google Analytics tracking ID to the theme for website analytics.

Installation

  1. Inside your Hugo site’s folder, run the following command:

    hugo new theme hugo-identity-theme https://github.com/hugo-identity-theme

  2. After the theme is successfully installed, take a look inside the exampleSite folder of the theme. You’ll find a file called config.toml.

  3. Copy the config.toml file to the root folder of your Hugo site.

  4. Customize the strings in the config.toml file to match your preferences. You can change avatars, background images, and other settings.

  5. To make the contact form work, follow these steps:

    • Enter your email address under ’email’ in the config.toml file.
    • Set the ’enable’ value to true under the contact settings in the config.toml file.
    • Upload the generated site to your server.
    • Send a dummy email to yourself using the contact form to confirm your account.
    • Click the confirm link in the email from formspree.io.

  6. To see your site in action, run Hugo’s built-in local server by entering “localhost:1313” in the address bar of your browser.

  7. To customize the CSS used by the theme, add your CSS file to the assets folder and include it in the config.toml file under the [params] section with the label “custom_css”.

Summary

Hugo Identity Theme is a highly configurable and flexible theme for the Hugo static site generator. It features a responsive design, customizable appearance, configurable social links, a contact form, and integration with Google Analytics. With easy installation and customization options, this theme provides a great foundation for creating a professional website.