Persona Zola Theme

a modern, responsive and lightweight theme for resume, portfolio, and blog

pagespeed report

code-size repo-size GitHub Issues GitHub Created At activity Website GitHub Release

Demo](https://hanson-hschang.github.io/Persona-Zola-Theme/) • FeaturesShowcaseInstallationConfigurationCitationStructureTroubleshooting • [Credits

✨ Features

🌟 Showcase

Using Persona for your site? We'd love to see it! Submit a Pull Request to add your site to our showcase.

🚀 Installation

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

⚙️ Configuration

Basic Setup](#basic-setup) • Segment Front Matter • [Build & Serve

Basic Setup

  1. 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
  2. Enable the theme by adding the following line at the beginning of your config.toml file:

    theme = "persona"

Segment Front Matter

The theme supports three main segment types:

Each segment is configured with front matter. Expand to see the details.
+++
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.

Build & Serve

After completing the setup, build and serve your site with Zola:

terminal commandnote
Build the sitezola buildsite build under public/
Serve the sitezola servelocally with live reload

[!NOTE] If you are using the Citation Pipeline, use make build and make serve instead to also process .src.md files.

📚 Citation Pipeline

How It Works](#how-it-works) • Setup • [Build & Write

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.

How It Works

Setup

  1. Install dependencies:
    # macOS
    brew install pandoc watchexec
    
    # Ubuntu / Debian
    sudo apt install pandoc
    cargo install watchexec-cli
  2. Change directory to your website root and copy the scripts folder and Makefile from the theme:
    cp -r themes/persona/{scripts,Makefile} .
  3. Create your post with a .src.md extension and use citation keys in the content:
    This is a citation example [@cite-key].
  4. Add a references.bib file in the same directory.

Build & Write

Use the provided Makefile to build or serve your site locally with automatic processing of .src.md files:

terminal commandnote
Build the sitemake buildsite build under public/
Serve the sitemake servelocally 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.

🆘 Troubleshooting

Common Issues

Getting Help

🙏 Credits

Persona is built with and inspired by:


⭐ Star this repository if you find it helpful!