A website template for academics

A beautiful, production-ready Jekyll website for academics and research groups.
Use the template. Fill in your info. Publish.

See the live demo →

Quick Start · Features · Customization · Publications · Hosting

Used by 180+ academics and research groups

Each star is a live site built from this template. The list is re-checked now and then; sites that go offline or move to another template are removed.

Using this template? Share your site and I'll add it here!

Features

Design

Source Serif 4 + DM Sans typography — elegant serif headings paired with a clean geometric sans body, self-hosted (no Google Fonts requests)
Warm parchment palette with subtle noise texture for depth, not flat generic whites
Dark mode — toggle in navbar, auto-detects system preference, persists across visits
Frosted glass navbar with backdrop blur, active page indicator, and scroll shadow
Dynamic favicon — SVG generated from your initials + accent color; ICO and Apple touch icon rasterized from it at deploy time
Responsive — CSS Grid layouts that adapt from desktop to tablet to mobile
Print stylesheet — printing or saving a page as PDF gives white paper, no navigation, and references with their DOI/arXiv URLs spelled out

Interactions

Site-wide search — press Cmd+K (or Ctrl+K) to instantly search all pages
Copy BibTeX — hover any bibtex block to reveal a one-click copy button
Animated link underlines — smooth gradient underlines that grow on hover
Card hover effects — lift + shadow on team cards, research cards, and profile photo
Image zoom — subtle scale on hover for team photos, research thumbnails, and the banner
Back-to-top button — appears on scroll, smooth scrolls up
Smooth expand/collapse — CSS transitions on publication abstracts and BibTeX entries

Publications

Auto-generated from BibTeX via Jekyll Scholar — just edit assets/ref.bib
Search bar — filter publications by title, author, or year
Year badges — small accent-colored pills for quick scanning
Pill buttons — PDF, DOI, arXiv, Link, Code, Slides, Video, Poster, Data, BIB, Abstract, all driven by BibTeX fields
Selected publications on the home page — add selected={true} to an entry

For New Users

Interactive setup script — ./setup.sh fills in your name, title, and institution; ./setup.sh --clean also strips the demo content
Talks, teaching, and software as data — edit a YAML list, not HTML
5-step _config.yml — numbered sections with inline comments guide you through setup
Well-commented data files — every field in _data/*.yml is explained with examples
Analytics, your choice — Google Analytics, Plausible, Umami, or GoatCounter, each a one-line setting
Smart link handling — empty links in config are automatically hidden (no broken icons)

Technical

Modular SASS — organized into base/, components/, layouts/, utilities/
No third-party requests — fonts and icons are served from your own site; the only external script is MathJax, and only on pages that opt in
Selective Bootstrap 5.3.8 SCSS — navbar, reboot and utilities only; no Bootstrap JavaScript, no jQuery
Single dependency-free JS file — dark mode, search, toggles, scroll effects, copy button
Auto-generated sitemap via jekyll-sitemap
Reproducible builds — Gemfile.lock is committed, so your site builds the same way next year
CI on pull requests — every PR is built and its internal links are checked
Open Graph + Twitter Cards — links look good when shared on social media
MathJax 4 — add math: true to a page or post (or set it site-wide in _config.yml)

Screenshots



Publications: filter box, year badges, buttons from BibTeX fields	Team page with card grid (dark mode)

Site-wide search (Cmd+K)

Quick Start

Click Use this template and name the new repository YOUR_USERNAME.github.io (prefer this over forking: you get a clean history, no upstream baggage, and the option to keep it private)
Install Ruby and Bundler (Jekyll's guide covers it), then run bundle install

Configure your site:

./setup.sh --clean  # remove the demo content and fill in your details, or
./setup.sh          # keep the demo content as examples, or
vim _config.yml     # edit Steps 1-5 directly

Add your publications to assets/ref.bib
Customize data files in _data/ (team members, news, awards, etc.)

Preview your site:

bundle exec jekyll serve
# open http://localhost:4000

Deploy: push to GitHub, then once, in your repo, set Settings > Pages > Source to GitHub Actions. Every later push deploys automatically.

Detailed How-To Guide

Step 1: Create Your Repository

Click Use this template on GitHub and name the new repository YOUR_USERNAME.github.io. Then clone it:

git clone https://github.com/YOUR_USERNAME/YOUR_USERNAME.github.io.git
cd YOUR_USERNAME.github.io

Step 2: Install Dependencies

You need Ruby (3.2 or newer; the deploy workflow uses 4.0) and Bundler. See Jekyll's installation guide.

bundle install

Step 3: Configure Your Identity

Open _config.yml and fill in your information. The file is organized into numbered steps:

# STEP 1: Your Identity
name: "Jane Smith"
title: "Assistant Professor of Computer Science"
institution: "Stanford University"
email: jsmith@stanford.edu
photo: headshot.jpg   # place your photo in images/

Or run the interactive setup script:

./setup.sh          # prompts for name, title, institution, email
./setup.sh --clean  # same, after removing the demo content

--clean asks for confirmation, then empties the data files (keeping their field comments), assets/ref.bib, _posts/, papers/, the demo team and research images, and the Feynman prose in home.md, research.md, and team.md, and points photo at a placeholder avatar.

Step 4: Add Your Links

Still in _config.yml, add your academic profiles. Leave blank (or delete) any you don't use:

# STEP 2: Your Links
links:
  google_scholar: "https://scholar.google.com/citations?user=YOUR_ID"
  github: "https://github.com/yourusername"
  orcid: "https://orcid.org/0000-0000-0000-0000"
  cv: "papers/cv.pdf"        # place your CV in the papers/ directory
  twitter: ""                # leave blank to hide
  linkedin: ""

Step 5: Add Your Photo

Place your profile photo in the images/ directory. Update the photo field in _config.yml to match the filename.

Step 6: Add Publications

Edit assets/ref.bib with your BibTeX entries. The publications page is auto-generated. Example:

@article{smith2024,
  author = {Smith, Jane and Doe, John},
  title = {A Novel Approach to Machine Learning},
  journal = {Nature},
  year = {2024},
  volume = {42},
  pages = {1--10},
  doi = {10.1234/example},
  arxiv = {2401.01234},
  code = {https://github.com/jsmith/novel-approach},
  file = {smith2024.pdf},       % place PDF in papers/
  selected = {true},            % also show on the home page
  abstract = {We present...}
}

Every link is a BibTeX field; use the ones you have:

Field	Button
`file`	PDF (file in `papers/`)
`doi`, `arxiv`, `url`	DOI, arXiv, Link
`code`, `slides`, `video`, `poster`, `data`	Code, Slides, Video, Poster, Data
`abstract`	Abstract (expandable)
`selected = {true}`	Listed under "Selected publications" on the home page

Your name is bolded automatically in the publication list. Set it in _config.yml exactly as it appears in the rendered list (Last, F. M.), longest form first:

scholar:
  last_name: Smith
  first_name: ["J. A.", "J."]

Step 7: Add Team Members

Edit _data/team_members.yml:

- name: Alice Johnson
  photo: alice.jpg          # place in images/ or images/team/
  info: PhD Student, started Fall 2023
  email: alice@university.edu
  website: https://alice.dev
  github: https://github.com/alice

Step 8: Add News

Edit _data/news.yml (newest first):

- date: 15 March, 2024
  headline: "Our paper on X was accepted to NeurIPS!"

- date: 1 January, 2024
  headline: "Welcome to new PhD student Alice Johnson"

Step 9: Customize Pages

Each page in _pages/ is a Markdown file. Edit the content directly:

home.md — your welcome text and bio (see Home page building blocks)
research.md — describe your research areas
about.md — optional sections (grants, awards, sponsors) driven by _data/
team.md — the openings note and administrative contact

Talks, teaching, and software are lists in _data/ (see below); their pages need no editing.

To remove a page from the navbar, comment it out in _config.yml:

nav_pages:
  - name: about
  - name: publications
    label: Papers        # optional: navbar text (URL stays /publications)
  # - name: talks        # hidden from navbar
  - name: research

Blog posts live in _posts/ and are published at /blog/<year>/<title>/.

Step 10: Preview and Deploy

# Preview locally
bundle exec jekyll serve
# Visit http://localhost:4000

# When ready, push to GitHub
git add -A
git commit -m "My academic website"
git push

A GitHub Actions workflow automatically builds and deploys your site on every push. Make sure to go to Settings > Pages > Source in your repo and select GitHub Actions.

Your site will be live at https://YOUR_USERNAME.github.io within a few minutes.

Customization

_config.yml

The config file is organized into 5 numbered steps:

Step	Section	What to fill in
1	Your Identity	Name, title, institution, email, photo
2	Your Links	Google Scholar, GitHub, ORCID, Twitter, LinkedIn, CV
3	Site Settings	Accent color, dark mode, math, analytics (GA4, Plausible, Umami, GoatCounter)
4	Your Pages	Comment out any pages you don't need
5	Publications	Your name (for bolding) and Jekyll Scholar options

Data Files

File	Purpose
`_data/team_members.yml`	Current students and postdocs
`_data/alumni.yml`	Former lab members
`_data/news.yml`	News items (3 most recent shown on home)
`_data/awards.yml`	Awards and honors
`_data/grants.yml`	Grants and funding
`_data/funders.yml`	Funder logos
`_data/talks.yml`	Invited and contributed talks
`_data/teaching.yml`	Courses
`_data/software.yml`	Software projects
`_data/pi.yml`	Optional: detailed education for About page

Each file has inline comments explaining every field. Entries marked # EXAMPLE should be replaced or deleted.

Pages

All pages are in _pages/. Edit the Markdown content directly. Pages use the page layout; blog posts use post.

Accent Color & Dark Mode

Set accent_color in _config.yml to change the theme color across the entire site (links, buttons, highlights, favicon). Light and dark mode variants are derived from it automatically. Set dark_mode: false to disable dark mode entirely.

CSS & JS Customization

The site uses modular SASS in _sass/:

_sass/
  base/          # variables, fonts, typography, icons, reset
  components/    # card, chips, navbar, buttons, footer, profile, publication, search
  layouts/       # home grid, team grid, research grid
  utilities/     # dark mode, animations, print

For JavaScript, edit assets/js/site.js directly. There is no build step.

Home page building blocks

home.md uses three optional blocks you can copy, reorder, or delete:

<!-- Research-area chips (link to /research) -->
<div class="chip-container" markdown="0">
<a href="{{ '/research' | relative_url }}" class="chip">Quantum Electrodynamics</a>
<a href="{{ '/research' | relative_url }}" class="chip">Superfluidity</a>
</div>

<!-- Callout box: callout-success, callout-warning, or callout-info -->
<div class="callout callout-success" markdown="0">
<div class="callout-title">{% include icon.html name="award" class="callout-icon" %} Nobel Prize in Physics, 1965</div>
<p>One or two sentences.</p>
</div>

<!-- Banner image with caption; place the image in images/ -->
<div class="banner-frame" markdown="0">
<img src="{{ '/images/banner.webp' | relative_url }}" alt="Describe the image" width="1400" height="449" loading="lazy">
<div class="banner-caption">Caption text</div>
</div>

Search

Every page and blog post is indexed for the Cmd+K search at build time. Add search: false to a page's front matter to leave it out.

Icons

Icons are inline SVG symbols in _includes/icons.svg (Simple Icons, Lucide, Bootstrap Icons). Use one with:

{% include icon.html name="github" %}

To add an icon, paste its path data into a new <symbol id="icon-NAME" viewBox="..."> in that file.

Math

MathJax is loaded only where it is needed. Add math: true to the front matter of any page or post that contains LaTeX, or set math: true in _config.yml to load it everywhere.

Publications

Publications are generated from assets/ref.bib by Jekyll Scholar; see Step 6 for the supported fields and name bolding.

Hosting

GitHub Pages

Create your repo from this template as your_username.github.io and push. A GitHub Actions workflow is included (.github/workflows/deploy.yml) that automatically builds the site with Jekyll Scholar and deploys to GitHub Pages on every push to source.

One-time setup: go to your repo's Settings > Pages > Source and select GitHub Actions instead of "Deploy from a branch". (GitHub does not let a workflow enable Pages on its own; until you do this, the deploy step will fail with a message saying so.)

Custom Domain

Purchase a domain, enter it under Settings > Pages > Custom domain, and configure DNS; the workflow picks up the new URL automatically. See GitHub's guide. (Sites deployed with GitHub Actions configure the domain in Settings, not with a CNAME file.)

Self-Hosting

Set url (and baseurl if the site lives in a sub-path) in _config.yml, build with JEKYLL_ENV=production bundle exec jekyll build, and upload _site/ to your server.

Troubleshooting

Symptom	Cause and fix
The deploy workflow fails at "Configure Pages"	Pages is not enabled for GitHub Actions yet. Settings > Pages > Source > GitHub Actions (one time).
Site builds locally but pages 404 on GitHub	Push to the `source` branch; the workflow only deploys from there. Check the Actions tab for the run.
My name is not bold in the publication list	`scholar.first_name` must match the rendered initials exactly, e.g. `["J. A.", "J."]`, longest form first.
`bundle install` fails on macOS	The system Ruby is too old or read-only. Install Ruby 3.2+ with Homebrew, rbenv, or mise, then rerun.
A page is missing from Cmd+K search	Pages need a `title` in their front matter; `search: false` excludes a page on purpose.
Equations do not render	Add `math: true` to that page's front matter, or `math: true` in `_config.yml`.

Name		Name	Last commit message	Last commit date
.github		.github
_data		_data
_includes		_includes
_layouts		_layouts
_pages		_pages
_plugins		_plugins
_posts		_posts
_sass		_sass
assets		assets
images		images
papers		papers
.gitignore		.gitignore
Gemfile		Gemfile
Gemfile.lock		Gemfile.lock
LICENSE		LICENSE
README.md		README.md
UPGRADING.md		UPGRADING.md
_config.yml		_config.yml
citesty.csl		citesty.csl
favicon.svg		favicon.svg
feed.xml		feed.xml
robots.txt		robots.txt
setup.sh		setup.sh

Latest commit

History

Folders and files

Repository files navigation

A website template for academics

See the live demo →

Used by 180+ academics and research groups

Features

Design

Interactions

Publications

For New Users

Technical

Screenshots

Quick Start

Detailed How-To Guide

Step 1: Create Your Repository

Step 2: Install Dependencies

Step 3: Configure Your Identity

Step 4: Add Your Links

Step 5: Add Your Photo

Step 6: Add Publications

Step 7: Add Team Members

Step 8: Add News

Step 9: Customize Pages

Step 10: Preview and Deploy

Customization

_config.yml

Data Files

Pages

Accent Color & Dark Mode

CSS & JS Customization

Home page building blocks

Search

Icons

Math

Publications

Hosting

GitHub Pages

Custom Domain

Self-Hosting

Troubleshooting

Upgrading

Alternatives

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages