← all builds

From-Scratch Build · Personal Web

Academic Portfolio Template

A clean, content-first personal website for researchers and students — publications, talks, teaching and a CV, all written in Markdown and published straight from a repository. Rebuilt from scratch to learn how a static-site generator turns plain text into a polished academic homepage.

JekyllMarkdownLiquid YAMLGitHub Pages

What it is

A whole site, written in text files

This is a reusable template for the kind of personal website an academic keeps for years: a homepage and bio, a list of publications, a talks archive, teaching pages, a portfolio and a CV. The twist is that there is no database and no admin panel. Every page of content is a plain Markdown file with a small block of structured fields at the top, and the whole site is rebuilt into static HTML each time you push.

I built it because I wanted to understand the part most people take for granted — how a folder of text files and a configuration file become a navigable, themed website without me hand-writing a single line of layout HTML per page.

The core idea I wanted to learn: separate content from presentation completely. Authors only ever edit Markdown and a config file; the templating engine and theme do the rest, so the same content could be re-skinned without being rewritten.

The stack

Tools under the hood

The point of this rebuild was the toolchain behind a static academic site. Here is what each piece actually does.

generator

Jekyll

The static-site generator. It reads Markdown, applies layouts and spits out plain HTML — no server-side code runs when a visitor loads the page.

content

Markdown

Every page and every publication, talk and post is a .md file. Easy to write, easy to diff, easy to keep under version control.

templating

Liquid

The template language that loops over collections and injects content into layouts — how one "publication" layout renders dozens of papers.

metadata

YAML front matter

The little fenced block at the top of each file holding the title, date, venue and links. Structured data the templates can sort and filter.

config

_config.yml

One site-wide settings file: your name, navigation, social links and theme options. Change the site identity in a single place.

generators

Markdown scripts

Small helper scripts turn a spreadsheet of publications and talks into individual Markdown files — bulk content without copy-paste.

Architecture

How the pieces fit

The site is assembled from a handful of moving parts. Most are essential; one I left as a stretch goal to keep the first build honest.

  1. Config & identity built

    A single YAML file sets the site title, author, navigation and theme — the one place you make it "yours".

  2. Layouts & includes built

    Reusable HTML skeletons (page, post, archive) plus small partials for the header, footer and sidebar.

  3. Content collections built

    Folders of Markdown for publications, talks, teaching and portfolio items, each rendered by its matching layout.

  4. Files & assets built

    PDFs, slides and images served straight from the repo, so a CV or paper is just a link away.

  5. Build & deploy built

    A push triggers a build that compiles everything to static HTML and publishes it — no manual upload step.

  6. Dark / light theming future

    A polished theme switcher across every page. Sketched out, left as future work in this build.

How it runs

From a folder of text to a live site

The workflow is the whole appeal. You never touch a server; you edit text and push:

In my rebuild I focused on the local-preview loop first: get the generator installing cleanly, serving with live reload, and rebuilding pages the instant a Markdown file changes — then wire up the automatic deploy.

Reflection

What rebuilding it taught me