Building Multi-Page Portfolio

Courses

Building and Deploying Multi-Page Portfolio

Authors

Sangeetha Nandakumar | Nicholas Del Grosso

Download Materials

Hugo creates multiple pages from directories containing index.md files. Each directory becomes a page bundle that stores content and resources together. Multiple bundles create a multi-page website structure. Bundles can be nested to create hierarchical URL paths, and menus connect pages through navigation.

Here we will see:

how to set up a new multi-page portfolio site
how page bundles create multiple pages
how menus connect pages through navigation
how to organize pages in hierarchies
how to store resources within bundles

Setup

A new Hugo site will be created for the multi-page portfolio. This site will be separate from the single-page portfolio in the first document.

Create a new Hugo site, navigate into it, initialize Hugo Modules, and install the Beautiful Hugo theme.

hugo new site multi-page-portfolio
cd multi-page-portfolio
hugo mod init github.com/yourusername/multi-page-portfolio
hugo mod get github.com/halogenica/beautifulhugo

Add the following content to hugo.toml file in the site root to enable the theme:

[module]
[[module.imports]]
path = "github.com/halogenica/beautifulhugo"

Start the server and verify the theme loads. Open http://localhost:1313/ and you should see a page with the Beautiful Hugo theme header and footer.

hugo server -D

Create a file content/_index.md with the following content:

+++
title: "My Portfolio"
draft: false
+++

# Hello, I'm [Your Name]

I am a Research Software Engineer working with neuroscientists in the NRW region. My background is in Astronomy and Planetary Sciences.

Explore my work using the navigation above.

Or fill with your actual details

This is how your website should look like before starting the exercises

Section 1: Creating Multiple Pages with Resources

Background

Hugo generates a separate page for each directory that contains an index.md file. These directories are called page bundles. The directory name determines the page URL, and the index.md file provides the content. Files placed in a bundle directory alongside index.md become page resources that can be referenced using relative paths.

Exercises

This section covers creating page bundles, understanding front matter, and adding resources like images and PDFs to bundles. By the end of this section, you will have multiple pages with embedded resources.

Command/Concept	Description
`index.md`	File that defines a page bundle’s content
`draft: true/false`	Front matter setting that controls if page is published
`![alt text](image.jpg)`	Markdown syntax to embed images
`[link text](file.pdf)`	Markdown syntax to link to files

A page bundle is a directory containing an index.md file. Hugo reads the index.md file and creates a web page at a URL matching the directory name. For example, a directory content/about/ containing index.md becomes a page at /about/.

The index.md file needs front matter to tell Hugo how to handle the page. Below the front matter, content is written in Markdown. Each bundle directory with index.md creates an independent page.

Example Create a directory content/about/ with an index.md file containing content about yourself.

+++
title = "About"
draft = false
+++

# About Me

During my Ph.D., I built pipelines to download, process, and analyze TESS data. I worked mainly in Python. I enjoyed this work, not just for my own research. I also helped other researchers with their code. I found it very satisfying to help others with their work.

In my current role, I work with researchers on their programming needs. This also helps me prepare for a future in industry.

## Skills

### Programming Languages
Python, R, C++, Matlab

### Frameworks
Numpy, pandas, scipy

### Tools
Git, Jupyter, Docker, LaTeX, Pixi, conda

Exercise: Create directory content/projects/ with an index.md file containing your project information.

Solution

+++
title = "Projects"
draft = false
+++

# My Projects

I have worked on several research projects involving data analysis and software development. Below are some of my key projects.

Exercise Create directory content/publications/ with an index.md file containing publication information.

Solution

+++
title = "Publications"
draft = false
+++

# Publications

My research has resulted in several publications in peer-reviewed journals. These papers cover topics in astronomy, planetary science, and observational techniques.

Example Navigate to /about/ page.

http://localhost:1313/about/

Exercise: Navigate to /projects/

Solution

http://localhost:1313/projects/

Exercise: Navigate to /publications/

Solution

http://localhost:1313/publications/

Files placed in a bundle directory alongside index.md become page resources. These resources are referenced using relative paths. Hugo serves resources from the bundle directory when that page loads.

Hugo offers two ways to store files. The static directory stores files accessible from any page using absolute paths like /images/photo.jpg. Bundle resources store files within each page directory using relative paths like photo.jpg. Bundle resources are stored with the pages that reference them.

Image files placed in the bundle directory can be referenced using relative paths in Markdown. A relative path is just the filename without any leading slash. Hugo looks for the file in the same directory as the index.md that references it.

Example Add and reference image file research-photo.jpg to the content/about/ directory.

![Working with telescope data](research-photo.jpg)

Exercise: Add a second image file lab-photo.jpg to content/about/, add the image reference ![Lab work](lab-photo.jpg).

Solution

![Working with telescope data](research-photo.jpg)

![Lab work](lab-photo.jpg)

Exercise: Add and reference file cv.pdf to the content/about/ directory.

Solution

[Download CV](cv.pdf)

Section 2: Connecting Pages with Navigation

Background

Menu entries link pages together through navigation. Menu configuration in hugo.toml defines which pages appear in the navigation and in what order. Menus appear on all pages and allow navigation between different sections.

Exercises

This section covers adding menu entries, controlling their order, and creating homepage links. By the end of this section, your site will have a fully functional navigation system.

TOML Syntax	Description
`[[menu.main]]`	Define a menu entry in the main menu
`name = "text"`	The text that appears in the navigation
`url = "/path/"`	Where the menu item links to
`weight = 1`	Order of menu items (lower numbers appear first)

Example Add About page to the navigation menu.

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

Exercise: Add Projects page to the navigation menu

Solution

[[menu.main]]
name = "Projects"
url = "/projects/"

Exercise: Add Publications page to the navigation menu

Solution

[[menu.main]]
name = "Publications"
url = "/publications/"

The weight value determines where each menu item appears. Lower weight values appear first in the menu. When weights are equal, Hugo typically orders items alphabetically.

Example Set About page weight to 1

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

Exercise: Set Projects and Publications pages to weights 2 and 3 respectively

Solution

[[menu.main]]
name = "Projects"
url = "/projects/"
weight = 2

[[menu.main]]
name = "Publications"
url = "/publications/"
weight = 3

Exercise: Interchange weights of Projects and Publications

Solution

[[menu.main]]
name = "Projects"
url = "/projects/"
weight = 3

[[menu.main]]
name = "Publications"
url = "/publications/"
weight = 2

The homepage can contain direct links to main sections. These links provide an alternative navigation method alongside the menu and can include descriptions of each section.

Example Add link to about page in the home page with a brief description

## Explore My Work

- [About Me](/about/) - Learn about my background and skills

Exercise: Add link to projects page in the homepage with a brief description

Solution

- [About Me](/about/) - Learn about my background and skills
- [Projects](/projects/) - View my research projects

Exercise: Add link to publications page in the homepage with a brief description

Solution

- [About Me](/about/) - Learn about my background and skills
- [Projects](/projects/) - View my research projects
- [Publications](/publications/) - Read my publications

Section 3: Creating List Pages for Multiple Items

Background

Some portfolio sections contain multiple items. The projects page might list several projects. The publications page might list several papers. Hugo provides a way to automatically display these items.

Hugo handles two types of pages differently. A regular page bundle uses index.md and displays a single page. A list page uses _index.md (with underscore) and can automatically display child pages within that section.

Exercises

This section covers understanding the difference between index.md and _index.md, converting pages to list pages, and adding individual items. By the end of this section, your projects and publications pages will automatically list their child pages.

Filename	Description
`index.md`	Creates a single page bundle
`_index.md`	Creates a list page that can display child pages

Individual project pages are created as regular markdown files inside the projects directory. When the parent uses _index.md, the theme automatically lists all child pages.

Example Create a file content/projects/project-1.md with some content and navigate to the page. What do you see?

+++
title = "TESS Data Pipeline"
draft = false
+++

I built pipelines to download, process, and analyze TESS data. The pipeline includes automated quality control, error correction, and period analysis.

http://localhost:1313/projects/project-1/

Exercise: Create a file content/projects/project-2.md with more content and navigate to the page

Solution

+++
title = "Light Curve Analysis Tool"
draft = false
+++

Tools to merge and analyze multi-sector photometric data from space missions. The tools handle large datasets and identify periodic signals.

http://localhost:1313/projects/project-2/

Exercise: Add project-3 with some content and navigate to the page

Solution

+++
title = "Interactive Data Visualization Dashboard"
draft = false
+++

Built an interactive dashboard for real-time data visualization using Python.

http://localhost:1313/projects/project-3/

Example Convert projects page to list and navigate to Projects page

Rename index.md inside projects directory to _index.md

Example: Navigate to project-1 file. Now can you access it?

http://localhost:1313/projects/project-1/

Exercise: Navigate to project-2 and project-3 as well and verify they can be accessed

Solution

http://localhost:1313/projects/project-2/
http://localhost:1313/projects/project-3/

Individual projects can also be added as a dropdown menu of Projects in hugo.toml

Example Add project-1 as dropdown option from Projects

Solution

[[menu.main]]
    parent = "projects"
    name = "Project 1"
    url = "projects/project-1"
    weight = 1

Exercise: Add project-2 as dropdown menu of Projects

Solution

[[menu.main]]
    parent = "projects"
    name = "Project 2"
    url = "projects/project-2"
    weight = 2

Exercise: Add project-3 ad dropdown menu of Projects

Solution

[[menu.main]]
    parent = "projects"
    name = "Project 3"
    url = "projects/project-3"
    weight = 3