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.
| Page | What goes on it |
|---|---|
| Home | Who you are in one sentence, three to six best projects, a contact button |
| Project pages | One per project: the task, what you did, the result, images |
| About | Your story, skills, clients or employers, a photo |
| Services or prices | Optional: what you offer and how to start working together |
| Contacts | Email, messengers, a form, links to your profiles |
Five steps
- 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
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
Write the pages
Replace the demo text in the folder of your language insidecontent/. For each project copy a page file and save it in awork/folder under the project name, likework/brand-for-a-bakery.md. The folder becomes the projects section, the file name the address/work/brand-for-a-bakery/. Images go tomedia/. - 4
Look at it
Run the preview and openlocalhost:8000. The site rebuilds every time you save. - 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
## Title {#anchor} becomes a block of the theme; a numbered list becomes steps.Next project
Show work so it gets found
One project, one page
Write a few lines per project
Describe images
Large photos, small files
media/. HERON makes WebP and AVIF in every size, so the page stays fast on a phone.Your name in the right places
Where to host it
| Option | Cost | Your domain | What you do |
|---|---|---|---|
| GitHub Pages | Free | Yes, with HTTPS | Push to GitHub. [Setup guide](/github-pages-custom-domain/) |
| Cloudflare Pages | Free | Yes, with HTTPS | Connect the repository once |
| Your own server | From about €5–6 a month | Yes | Push 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.