Skip to content

Build a Research Lab Website Using Eleventy & GitHub

Top view of Creative flat lay UX designer working space and office supplies. © scarie / Adobe Stock
Top view of Creative flat lay UX designer working space and office supplies. © scarie / Adobe Stock

Academic research lab websites need to do a few things well: clearly communicate research, remain stable over time, and be easy to update as people, projects, and publications change. What they don’t need is a heavyweight content management system with databases, plugins, and ongoing maintenance overhead.

In this post, I’ll walk through a practical, sustainable approach to building a lab website using Eleventy (11ty) as a static site generator, GitHub Pages for free hosting, GitHub Actions for automated deployment, and Frontmatter CMS to make content editing accessible to non-technical lab members.

This setup works particularly well for academic environments where transparency, version control, and longevity matter.

Why Use a Static Site Generator for a Lab Website?

Static site generators (SSGs) convert plain text files into fast, secure HTML pages. For most academic labs, this model is ideal.

Key benefits include:

  • No databases or server-side code to maintain
  • Excellent performance and accessibility
  • Content stored in readable Markdown files
  • Full version history via Git
  • Free hosting with HTTPS via GitHub Pages

Lab websites tend to change incrementally rather than dynamically, making static generation a natural fit.

Why Eleventy (11ty)?

Eleventy is a lightweight JavaScript-based static site generator that prioritises simplicity and flexibility.

For academic labs, Eleventy offers:

  • Markdown-first content authoring
  • Simple templating without a heavy framework
  • Minimal configuration and tooling
  • Future-proof content that remains usable outside Eleventy

You can start with a single page and gradually add structure as the lab grows, without needing to redesign the site from scratch.

A Typical Academic Lab Site Structure

A straightforward Eleventy-based lab website might look like this:

.
├── src/
│   ├── index.md
│   ├── people/
│   ├── research/
│   ├── publications/
│   ├── updates/
│   └── _includes/
│       └── layouts/
├── assets/
│   └── css/
├── .eleventy.js
└── package.json

Each page or section is written in Markdown. Layouts handle shared elements such as navigation, headers, footers, and branding.

Getting Started: A Minimal Eleventy Example

This short example demonstrates the basic Eleventy workflow.

1. Install Eleventy

Ensure Node.js is installed, then run:

npm init -y
npm install @11ty/eleventy --save-dev

Add scripts to package.json:

"scripts": {
    "build": "eleventy",
    "serve": "eleventy --serve"
}

2. Create a Homepage

Create index.md:

---
layout: base.njk
title: Economic Brain Lab
---

Welcome to the Economic Brain Lab.

We study the neural and cognitive mechanisms underlying economic decision-making.

3. Add a Base Layout

Create _includes/layouts/base.njk:

<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Build a Research Lab Website Using Eleventy &amp; GitHub</title>
    /assets/css/style.css
    </head>
    <body>
    <header>
        <h1>Build a Research Lab Website Using Eleventy &amp; GitHub</h1>
        <nav>
        /Home</a>
        /people/People</a>
        /publications/Publications</a>
        </nav>
    </header>

    <main>
        
    </main>
    </body>
</html>

Run the development server:

npm run serve

You now have a working academic website running locally.

Hosting with GitHub Pages

GitHub Pages provides free, reliable hosting for static sites and integrates seamlessly with Git-based workflows.

In practice, this means:

  • the website lives in a public repository,
  • updates are made via commits and pull requests,
  • and deployment can be fully automated.

This is especially useful for labs where multiple people contribute content over time.

Automated Deployment with GitHub Actions

GitHub Actions allows you to build and deploy your Eleventy site automatically whenever changes are pushed to the main branch.

1. Enable GitHub Pages

In your repository:

  1. Go to Settings → Pages
  2. Under Source, select GitHub Actions
  3. Save the settings

2. Add the Deployment Workflow

Create the file:

.github/workflows/deploy.yml

Add the following:

name: Build and Deploy Eleventy Site

on:
    push:
    branches: ["main"]

permissions:
    contents: read
    pages: write
    id-token: write

jobs:
    build:
    runs-on: ubuntu-latest

    steps:
        - name: Check out repository
        uses: actions/checkout@v4

        - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
            node-version: "18"

        - name: Install dependencies
        run: npm ci

        - name: Build site
        run: npm run build

        - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
            path: _site

    deploy:
    needs: build
    runs-on: ubuntu-latest

    steps:
        - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4

Once committed, GitHub will automatically build and deploy the site on each push.

Integrating Frontmatter CMS

While Markdown is simple, editing raw files can still be a barrier for some lab members. Frontmatter CMS addresses this by providing a form-based editing interface inside VS Code, while keeping everything Git-based.

Importantly, it does not change how your site is built or deployed.

What Frontmatter CMS Is (and Isn’t)

Frontmatter CMS is:

  • a VS Code extension
  • a local, Git-backed CMS
  • designed for Markdown-based sites

It is not:

  • a hosted service
  • a database-driven CMS
  • a runtime dependency

Your Eleventy site remains a plain static site.

Where Frontmatter Fits

Markdown + Frontmatter
        ↓
Frontmatter CMS (VS Code)
        ↓
Git commit / push
        ↓
GitHub Actions
        ↓
Eleventy build
        ↓
GitHub Pages

Frontmatter edits are just commits—nothing special is required downstream.

Defining Content Models

Create a .frontmatter/ directory and define content models. For example:

.frontmatter/people.json

{
    "title": "Lab Member",
    "fields": [
    { "name": "name", "label": "Name", "type": "string", "required": true },
    { "name": "role", "label": "Role", "type": "string" },
    { "name": "email", "label": "Email", "type": "string" },
    { "name": "order", "label": "Display order", "type": "number" }
    ]
}

This turns lab member pages into structured forms.

Example Content File

---
name: Jane Doe
role: PhD Student
email: jane.doe@university.edu
order: 2
---

Jane works on neural mechanisms of decision-making under uncertainty.

Eleventy can treat these files as a collection and render them consistently.

Setting Up a Custom Domain Name

Using a custom domain (e.g. economicbrainlab.org) improves credibility and makes your site easier to cite.

With GitHub Pages, this typically involves:

  1. Purchasing a domain from a registrar
  2. Adding a CNAME file containing your domain name
  3. Pointing DNS records to GitHub Pages
  4. Enabling HTTPS in repository settings

GitHub automatically provisions SSL certificates, so the site is served securely at no extra cost.

Why This Setup Works Well for Academic Labs

Together, Eleventy, GitHub Pages, GitHub Actions, and Frontmatter CMS provide:

  • long-term stability
  • transparent authorship and change tracking
  • low barriers for content editors
  • minimal infrastructure
  • strong alignment with open science practices

Just as importantly, nothing here is locked in—content remains portable and readable for decades.

Final Thoughts

A lab website should support research, not distract from it. This setup keeps things simple, reproducible, and under your control, while still being approachable for collaborators and students.