docs/content/themes/persona/index.md
+++ title = "Persona" description = "A portfolio, a resume, a blog, and a Zola theme." template = "theme.html" date = 2026-03-20T16:40:04Z
[taxonomies] theme-tags = ['portfolio', 'resume', 'blog']
[extra] created = 2026-03-20T16:40:04Z updated = 2026-03-20T16:40:04Z repository = "https://github.com/hanson-hschang/Persona-Zola-Theme.git" homepage = "https://github.com/hanson-hschang/Persona-Zola-Theme" minimum_version = "0.22.0" license = "MIT" demo = "https://hanson-hschang.github.io/Persona-Zola-Theme"
[extra.author] name = "Chang, Heng-Sheng" homepage = "https://hanson-hschang.github.io/" +++
<div align="center">Persona Zola Themea modern, responsive and lightweight theme for resume, portfolio, and blog
Demo](https://hanson-hschang.github.io/Persona-Zola-Theme/) • Features • Showcase • Installation • Configuration • Citation • Structure • Troubleshooting • [Credits
</div>Using Persona for your site?
We'd love to see it!
Submit a Pull Request to add your site to our showcase.
This is a Zola theme. Make sure you have Zola installed before proceeding.
After initializing your Zola site, the easiest way to install the theme is to add it as a git submodule to your themes directory:
# Navigate to your Zola site directory
cd your-zola-site
# Add the theme as a submodule
git submodule add https://github.com/hanson-hschang/Persona-Zola-Theme.git themes/persona
To update the theme:
# Update the submodule
git submodule update --init --recursive
Basic Setup](#basic-setup) • Segment Front Matter • [Build & Serve
</div>Copy the configuration and the landing page content from the theme to your website root to get started quickly:
# Copy the configuration
cp themes/persona/config.toml config.toml
# Copy the landing page content
cp themes/persona/content/_index.md content/_index.md
Enable the theme by adding the following line at the beginning of your config.toml file:
theme = "persona"
The theme supports three main segment types:
+++
title = "Title of the Segment"
[extra]
# Segment-specific icon for navigation (Bootstrap Icons)
icon_class = "bi bi-file-earmark-text"
# Display order (lower numbers appear first)
order = 1
# Segment type determines rendering approach
# options include "plain", "category", or "blog"
type = "plain"
+++
[!TIP] For a complete walkthrough of configuration and customization, see the Begin with Persona blog post.
After completing the setup, build and serve your site with Zola:
| terminal command | note | |
|---|---|---|
| Build the site | zola build | site build under public/ |
| Serve the site | zola serve | locally with live reload |
[!NOTE] If you are using the Citation Pipeline, use
make buildandmake serveinstead to also process.src.mdfiles.
How It Works](#how-it-works) • Setup • [Build & Write
</div>The pipeline allows you to write naturally using citation keys from the bibliography file while automatically generating properly formatted references during the build process. It integrates seamlessly with the site workflow, so you can focus on content rather than formatting.
.src.md files using Pandoc citation syntaxreferences.bib file in the same directory as your post.md with formatted citations# macOS
brew install pandoc watchexec
# Ubuntu / Debian
sudo apt install pandoc
cargo install watchexec-cli
scripts folder and Makefile from the theme:
cp -r themes/persona/{scripts,Makefile} .
.src.md extension and use citation keys in the content:
This is a citation example [@cite-key].
references.bib file in the same directory.Use the provided Makefile to build or serve your site locally with automatic processing of .src.md files:
| terminal command | note | |
|---|---|---|
| Build the site | make build | site build under public/ |
| Serve the site | make serve | locally with live reload |
[!TIP] For a complete example (source + bibliography + generated output), see the Citation Pipeline Guide blog post with the example source directory. This pipeline is ideal for writing technical, research-oriented, or reference-heavy content with minimal friction.
Theme not loading:
theme = "persona" is set at the first line of config.tomlthemes/persona/Navigation not working:
[extra].order field is set correctly in the front matter[extra].type is correctly specified in the front matterContact form not working:
web3form_public_key is set in configurationPersona is built with and inspired by:
⭐ Star this repository if you find it helpful!
</div>