HERON

Your work, your domain, no subscription

Make a portfolio website

To make a portfolio website yourself, you need four things: a short list of your best work, a page for each project, a way to turn text into pages, and free hosting with your own domain. With HERON that is one evening and no monthly fee.

Below: what to put on the site, the five steps to build it, and how to publish it at your own address.

What a portfolio site needs

Keep it small. Five pages are enough for most people.

PageWhat goes on it
HomeWho you are in one sentence, three to six best projects, a contact button
Project pagesOne per project: the task, what you did, the result, images
AboutYour story, skills, clients or employers, a photo
Services or pricesOptional: what you offer and how to start working together
ContactsEmail, messengers, a form, links to your profiles

Five steps

  1. 1

    Create the site

    One command takes the latest HERON image, and the image creates the site folder with a theme and demo pages.
  2. 2

    Fill in the settings

    Fill in the configurator questionnaire: your name, profession, links to profiles, domain, theme. It also fills in structured data, so search engines know the site is about a person.
  3. 3

    Write the pages

    Replace the demo text in the folder of your language inside content/. For each project copy a page file and save it in a work/ folder under the project name, like work/brand-for-a-bakery.md. The folder becomes the projects section, the file name the address /work/brand-for-a-bakery/. Images go to media/.
  4. 4

    Look at it

    Run the preview and open localhost:8000. The site rebuilds every time you save.
  5. 5

    Publish

    When everything is ready, publish the finished site the way you chose. For a portfolio the free way fits well: the files go to GitHub Pages with your domain and HTTPS.

What a project page looks like

A project page is a text file. The block on top is for search engines and the menu, the rest is what visitors read.

---
title: "Brand for a bakery in Graz: logo, packaging, signage"
h1: "A brand for Bäckerei Huber"
description: "Logo, packaging and shop signage for a family bakery. Task, process and result."
---

A family bakery wanted to look as warm as its bread.

## Task {#task}

New owners, an old logo and a second shop opening in spring.

## What I did {#work}

1. **Research.** Two days in the shop, talking to regulars.
2. **Logo.** A hand-drawn wheat ear and the family name.
3. **Packaging.** Paper bags and cake boxes in two colours.

## Result {#result}

Both shops opened with the new signage in March.

The settings block

title is the line in search results, h1 the heading on the page, description the snippet under the title.

Sections

Each ## Title {#anchor} becomes a block of the theme; a numbered list becomes steps.

Next project

Copy this file, rename it and change the text. The build adds the page to the projects section, the sitemap and llms.txt.

Show work so it gets found

One project, one page

A project page with its own title can rank for "logo for a bakery" or "wedding photographer in Lisbon". A gallery on one page cannot.

Write a few lines per project

The task, what you did, the outcome. Search engines and AI assistants read text, not pictures.

Describe images

Each image gets an alt text that says what is in it. It helps people with screen readers and image search alike.

Large photos, small files

Put the original in media/. HERON makes WebP and AVIF in every size, so the page stays fast on a phone.

Your name in the right places

The title of the home page and the structured data carry your name and profession.

Where to host it

OptionCostYour domainWhat you do
GitHub PagesFreeYes, with HTTPSPush to GitHub. [Setup guide](/github-pages-custom-domain/)
Cloudflare PagesFreeYes, with HTTPSConnect the repository once
Your own serverFrom about €5–6 a monthYesPush to git; GitHub builds the image and you run it on the server. [How](/publish/git/)

Start from a theme

Pick a theme with demo pages, replace the texts and photos with yours, and keep the structure. The themes page shows each one with a demo and the command to install it.

Questions

Do I need to know how to code?

No. Pages are text files with simple marks for headings and lists. The settings are a questionnaire, the configurator. Code is only for changing the theme itself.

Is it really free?

The tools and hosting are free. HERON is open source under AGPL-3.0, GitHub Pages costs nothing. You pay for the domain.

Can my portfolio be in two languages?

Yes. List the languages in site.yaml, and every page gets its own address in each language, with tags that tell search engines which version is which. See multilingual websites.

How do I add a new project later?

Copy a project file, change the text and images, and publish. The project appears in the sitemap, llms.txt and the projects section on its own.

Can an AI agent build it for me?

Yes, the content part. Give Claude Code or Codex your texts and a short task: it fills the project pages and the required fields by the same rules, and the build checks the result. The theme and the page structure stay as they are. See HERON for AI agents.