The goal of this guide is to get a fully working Hugo Profile portfolio site running on your local machine as quickly as possible. By the end you’ll have every section — Hero, About, Experience, Education, Projects, Achievements, and Contact — populated with example content and live in your browser, ready to customize with your own information.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/gurusabarish/hugo-profile/llms.txt
Use this file to discover all available pages before exploring further.
Prerequisites
- Hugo 0.87.0 or higher installed on your machine. Verify with
hugo version. If Hugo isn’t installed, see the official installation guide. - Git installed (required to fetch the theme).
Steps
Create a new Hugo site
Run the following command to scaffold a new Hugo project. The
--format="yaml" flag tells Hugo to generate a hugo.yaml configuration file instead of the default hugo.toml. Hugo Profile’s example configuration is written in YAML, so this keeps everything consistent.Add the Hugo Profile theme
Choose the method that best fits your workflow. Git Submodule is recommended for most users because it makes future theme updates straightforward.
- Option A: Git Submodule (recommended)
- Option B: Git Clone
A submodule links your site to the upstream theme repository. You can pull theme updates at any time with a single command without touching your own content.
Copy the example configuration
Replace the default empty
hugo.yaml with the fully populated example config that ships with the theme. This single file configures your site title, all portfolio sections, navbar, footer, and theme settings.Start the development server
Launch the Hugo local server with live reload. Any changes you save to
hugo.yaml or content files will be reflected in the browser instantly.Copy example content and assets
On first run the site may look incomplete — images will be missing and the Blog and Gallery sections may not render. This is because Hugo expects static assets in the root-level After running these commands, refresh your browser and the complete example site will appear. You can then replace this placeholder content with your own images, blog posts, and project details.
static/ directory and content pages in the root-level content/ directory, but those files currently live inside the theme’s exampleSite/ folder.Copy them across with rsync:What You’ll See
Once the dev server is running with the example content copied, your site will include the following sections:| Section | Description |
|---|---|
| Hero | Your name, title, subtitle, a profile image, resume download button, and social links. |
| About | A bio paragraph, profile photo, and a list of recent technologies you’ve worked with. |
| Experience | Work history organized by company, with role names, dates, and rich text descriptions. |
| Education | Academic background with school names, dates, GPA, and linked publications. |
| Projects | Project cards with images, description, badges, featured demo links, and icon links. |
| Achievements | Award and milestone cards with images, descriptions, and optional external links. |
| Contact | A call-to-action message with a mailto button, or a FormSpree-powered contact form. |
enable: true/false in hugo.yaml, so you can hide any section you don’t need.
Next Steps
Configuration Overview
Deep dive into every option available in
hugo.yaml.Hero Section
Customize your intro, profile image, buttons, and social links.
Blog
Write posts, add tags and categories, and configure read time and comments.
Deploy to Netlify
Publish your portfolio live with Netlify’s free tier in minutes.