Getting Started with Hugo and PaperMod Theme

Creating a professional portfolio website doesn’t have to be complicated. In this post, I’ll walk you through setting up a beautiful, fast-loading website using Hugo and the PaperMod theme.

What is Hugo?

Hugo is a fast, modern static site generator written in Go. It’s perfect for portfolios, blogs, and documentation sites because it:

  • Generates static HTML files for lightning-fast loading
  • Has a simple content management system
  • Supports themes and customization
  • Is easy to deploy to platforms like GitHub Pages, Netlify, or Vercel

Why PaperMod Theme?

PaperMod is a clean, minimal theme that focuses on readability and user experience. It includes:

  • Beautiful typography and spacing
  • Dark/light mode support
  • Responsive design for all devices
  • Built-in search functionality
  • Social media integration
  • Profile mode for portfolios

Installation Steps

1. Install Hugo

First, install Hugo on your system:

# macOS (using Homebrew)
brew install hugo

# Windows (using Chocolatey)
choco install hugo

# Linux
sudo apt-get install hugo

2. Create a New Site

hugo new site my-portfolio
cd my-portfolio

3. Install PaperMod Theme

git init
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

4. Configure Your Site

Update your hugo.toml file:

baseURL = 'https://yourusername.github.io/portfolio/'
languageCode = 'en-us'
title = 'Your Name - Portfolio'
theme = 'PaperMod'

[params]
  description = "Software Engineer & Developer Portfolio"
  author = "Your Name"
  profileMode = true
  profileModeTitle = "Your Name"
  profileModeSubtitle = "Software Engineer & Developer"

5. Create Content

# Create pages
hugo new content about/_index.md
hugo new content projects/_index.md
hugo new content blog/_index.md
hugo new content contact/_index.md

# Create blog posts
hugo new content blog/my-first-post.md

6. Run Your Site

hugo server --buildDrafts

Visit http://localhost:1313 to see your site!

Customization Options

Profile Mode

PaperMod’s profile mode is perfect for portfolios:

[params]
  profileMode = true
  profileModeTitle = "Your Name"
  profileModeSubtitle = "Your Title"
  profileModeDesciption = "Your description here"

Social Icons

Add your social media links:

[[params.socialIcons]]
  name = "github"
  url = "https://github.com/yourusername"

[[params.socialIcons]]
  name = "linkedin"
  url = "https://linkedin.com/in/yourusername"

Set up your navigation menu:

[[menu.main]]
  identifier = "about"
  name = "About"
  url = "/about/"
  weight = 10

Content Structure

Front Matter

Each content file starts with front matter:

---
title: "Page Title"
date: 2024-01-15
draft: false
tags: ["tag1", "tag2"]
categories: ["category1"]
---

Content Organization

Organize your content in folders:

c ├ ├ │ ├ │ ├ │ │ └ o ─ ─ ─ ─ ─ n ─ ─ ─ ─ ─ t e _ a └ p └ b ├ └ c └ n i b ─ r ─ l ─ ─ o ─ t n o ─ o ─ o ─ ─ n ─ / d u j g t e t _ e _ / _ p a _ x i c i i o c i . n t n n s t n m d s d d t / d d e / e e - e x x x 1 x . . . . . m m m m m d d d d d # # # # # # A P B B C H b r l l o o o o o o n m u j g g t e t e a c l p c p p t i o t a a s s s g g t t p e e p i a a n g g g e e

Deployment

GitHub Pages

  1. Push your code to GitHub
  2. Enable GitHub Pages in repository settings
  3. Set source to GitHub Actions
  4. Create .github/workflows/hugo.yml:
name: Deploy Hugo site to Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

defaults:
  run:
    shell: bash

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: recursive
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "latest"
          extended: true
      - name: Build
        run: hugo --minify
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Tips and Best Practices

  1. Keep it Simple: Don’t overcomplicate your portfolio
  2. Fast Loading: Hugo generates static files, so your site will be fast
  3. Mobile First: Ensure your content looks great on all devices
  4. SEO Friendly: Use proper headings, meta descriptions, and alt text
  5. Regular Updates: Keep your portfolio current with new projects and skills

Conclusion

Hugo with PaperMod theme provides an excellent foundation for creating a professional portfolio website. It’s fast, customizable, and easy to maintain. The static nature means your site will load quickly and be reliable.

Start building your portfolio today and showcase your work to the world!

Have questions about Hugo or PaperMod? Feel free to reach out in the comments or contact me directly!