Hugo Identity Theme

screenshot of Hugo Identity Theme
hugo

Hugo Identity Theme

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

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.

hugo
Hugo

Hugo is an open-source static site generator that features fast build times, flexible themes, support for multiple content formats, multilingual websites, live reloading, and an active community. It allows developers to easily create and deploy SEO-friendly and mobile-responsive websites.

personal
Personal

A personal website is an online platform that showcases an individual's work, interests, and personality. It can include a range of content, such as a bio, resume, portfolio, blog, and contact information, and is often used to promote one's personal brand or professional services.