hugo-profile

Hugo Profile

Twitter GitHub forks GitHub stars

Netlify Status Latest Release Last Commit Open Issues Open Pull Requests License

Hugo Profile: a high-performance, mobile-first Hugo theme for personal portfolios and blogs.

Features:

Requirements

Quick Start

  1. Create a new Hugo site:

     hugo new site my-site --format="yaml"

    This uses a hugo.yaml configuration file instead of the default TOML format.

  2. Add a theme.

    Option A: Clone this repository inside your themes folder.
    This allows you to make lots of custom changes.

     cd my-site/themes
 git clone https://github.com/gurusabarish/hugo-profile.git

    Option B: Add as a Git submodule.
    This allows you to get automatic or structured updates from the original repository.

     cd my-site
 git init
 git submodule add https://github.com/gurusabarish/hugo-profile.git themes/hugo-profile
  3. Copy the example configuration file to your site root: 
     cp -f themes/hugo-profile/exampleSite/hugo.yaml ./hugo.yaml
  4. Start the Hugo development server: 
     hugo server

  5. Recommended: Copy example content and assets.

    When you first run hugo server, the site may look incomplete — images may be missing and the Blog or Gallery sections might not appear.

    This is because their content currently resides in themes/hugo-profile/exampleSite/, whereas Hugo expects them in the root-level static/ (for images) and content/ (for pages) directories.

    To have a complete view of the example site, run:

     rsync -av themes/hugo-profile/exampleSite/static/ ./static/
 rsync -av themes/hugo-profile/exampleSite/content/ ./content/

    You can customize or replace this content to match your own site.

Content Management

You can now start customizing your site.

To change the site title or homepage content, edit the hugo.yaml file in the root directory. This file also controls settings for showing or hiding sections of the site (e.g., About, Education).

To create a new page, for example, in the Blog section, run:

hugo new content content/blogs/my-post.md

This creates a new file in the content/blogs/ folder with front matter that includes metadata like the date.

Here are some useful resources for your reference:

Internationalization (i18n)

This theme supports multiple languages out of the box. Hugo Profile includes built-in translations for English, Spanish, and French, and you can easily add your own languages.

Setting Up Multiple Languages

To enable multilingual support, add the following to your hugo.yaml:

defaultContentLanguage: "en"
defaultContentLanguageInSubdir: false

languages:
  en:
    languageName: "English"
    weight: 1
  es:
    languageName: "Español"
    weight: 2
  fr:
    languageName: "Français"
    weight: 3

How It Works

  1. Translation Files: The theme includes translation files in the i18n/ directory:
    • en.toml - English translations
    • es.toml - Spanish translations
    • fr.toml - French translations

  2. Language Switcher: When you enable multiple languages, a language switcher dropdown automatically appears in the navigation bar, allowing visitors to switch between languages.

  3. Backward Compatibility: All existing sites continue to work without any changes. The theme automatically falls back to English or your configured language if no multilingual setup is provided.

Adding a New Language

To add support for a new language (e.g., German):

  1. Create a new translation file i18n/de.toml in your site root or in the theme: 
    [nav_about]
other = "Über uns"
   
[nav_experience]
other = "Erfahrung"
   
# Add all other translations...
  2. Add the language to your hugo.yaml: 
    languages:
  de:
    languageName: "Deutsch"
    weight: 4
  3. (Optional) Create language-specific content in content/de/ directory.

Customizing Translations

You can override any translation by adding it to your site’s params.terms section in hugo.yaml:

params:
  terms:
    read: "Custom Read Text"
    pageNotFound: "Custom 404 Message"

For more information about Hugo’s multilingual features, see the Hugo Multilingual Documentation.

Deployment

If you do not require extensive customization, the easiest way to deploy is:

  1. Click the Use this template button to create your own repository.
  2. Connect the repository to Netlify.

Whenever you make changes to the files inside the exampleSite folder, Netlify will automatically detect and deploy your changes.

If you followed the steps in the Quick Start section above, you can still deploy your site to Netlify, but you’ll need a few additional configurations.

See the Host on Netlify guide for further information.

For manual deployment, run hugo to generate the final, ready-to-deploy static site in the public/ folder, which you can upload to any hosting platform.

It is recommended to delete the public/ folder before each build to ensure it only contains the latest output:

rm -rf public/ && hugo

Trouble-Shooting

ERROR error calling resources.GetRemote: Get "https://publish.twitter.com/oembed?dnt=false&url=https%3A%2F%2Ftwitter.com%2FGoHugoIO%2Fstatus%2F1315233626070503424": net/http: TLS handshake timeout
Built in 10266 ms
Error: error building site: logged 1 error(s)

The TLS handshake timeout error can happen due to network issues. If this error persists, you can delete the shortcode example `` in the “content/blogs/rich-content.md” file.

Issues

If you have a question, please open an issue for help and to help those who come after you. The more information you can provide, the better!

Contributing

Contributions, issues, and feature requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

License

Licensed under MIT

🤝 Support

Give a ⭐️ or buy me a ~coffee~ tea if you like this project!

Buy Me A Coffee

This site is open source. Improve this page.