Build your own academic website

View the template on GitHub

This is the template and setup I used to build this site. It’s free, requires no coding experience, and takes about 30–60 minutes from start to a live website. Everything below walks you through each step.

What you’ll end up with

A professional academic website with pages for your research, publications, education, contact details, and projects — automatically deployed every time you push a change. Publications sync live from your ORCID profile with journal favicons, APA 7 citations, and RIS downloads built in. Hosted for free on GitHub Pages, with the option to add your own custom domain (e.g. yourname.com).

What you’ll need

A GitHub account Free at github.com. This is where your site lives.

GitHub Desktop Free at desktop.github.com. The easiest way to manage your site files without using the command line.

Quarto Free at quarto.org. The tool that turns your text files into a website.

RStudio (optional but recommended) Free at posit.co/download/rstudio-desktop. The easiest editor for Quarto files. You don’t need to know R — it’s just the best interface for this kind of site.

Step 1 — Get the template

  1. Go to the template repository on GitHub
  2. Click the green Use this template button → Create a new repository
  3. Name your repository (e.g. yourname-website or just yourname)
  4. Make sure it’s set to Public — this is required for free GitHub Pages hosting
  5. Click Create repository

You now have your own copy of the template in your GitHub account.

Step 2 — Enable GitHub Pages

  1. In your new repository, click Settings (top right of the repo nav)
  2. In the left sidebar, click Pages
  3. Under Build and deployment, set Source to GitHub Actions
  4. That’s it — the workflow file already in the template handles the rest

Your site will build automatically. After 1–2 minutes, a URL will appear at the top of the Pages settings screen: https://yourgithubusername.github.io/your-repo-name.

Step 3 — Download the files to your computer

  1. Open GitHub Desktop
  2. Click File → Clone Repository
  3. Find your new repository in the list and clone it to a folder on your computer
  4. Open the folder in RStudio: File → Open Project → select the .Rproj file, or just open RStudio and navigate to the folder

You’ll see all the site files in the file browser on the right side of RStudio.

Step 4 — Edit your content

All the content lives in .qmd files — these are plain text files with a little bit of formatting syntax. You don’t need to know anything special; just replace the placeholder text with your own.

index.qmd — Home page Replace Your Name, the tag pills, and the bio paragraph. Update the photo path once you’ve added your photo to the images/ folder. Edit the stats strip to reflect your own numbers and milestones.

pages/research.qmd — Research & Publications Update the research focus paragraph and the paper cards. The progress tracker reads from data/timeline.json — edit that file to set your current quarter, completion year, row labels, and activity list (see Step 4b below). Then find const ORCID_ID = '...' near the top of the script block and replace it with your own ORCID identifier — publications load automatically from there. Also update the SCHOLAR_URL constant.

pages/history.qmd — Education & Experience Fill in your education history, academic roles, clinical or professional roles, memberships, and skills. Each role block follows the same pattern — copy and paste to add more.

pages/contact.qmd — Contact The contact form uses Web3Forms — replace the access key with your own from web3forms.com (free). Update the inquiry type labels and form fields to suit your context.

pages/projects.qmd — Projects Optional page for side projects, tools, or works in progress. Each project card has a status badge (Live / In progress / Planned), tag pills, and link buttons. Remove the page entirely from _quarto.yml if you don’t need it.

_quarto.yml — Site title and navigation Change the title field to your name. Update the LinkedIn URL in the right: section of the navbar. Add or remove nav items to match your pages.

Step 4b — Update your progress tracker

The research page includes an interactive Gantt-style tracker that reads from data/timeline.json. It’s set up as a PhD-by-publication tracker, but the structure is generic — rename the rows to chapters, phases, workstreams, or whatever fits your project. Open the file and update:

  • currentQuarter — which quarter you’re in (1–16 covers four years)
  • estimatedCompletion — your target completion year
  • milestones — key dates to mark on the header (e.g. confirmation, annual reviews). Set quarter to the quarter each falls in. Delete this section if you don’t need it.
  • papers — one row per workstream (paper, chapter, phase — rename label and title freely). Each has a list of activities.

Each activity has a desc (short label) and a statuses object — the keys are quarter numbers, the values are "done", "wip", "todo", or "goal". A single-quarter activity has one entry; a multi-quarter span has two (start and end):

{ "desc": "Data collection", "statuses": { "3": "wip", "6": "goal" } }
{ "desc": "Ethics approval",  "statuses": { "1": "done" } }

Add or remove as many rows and activities as you need. If you don’t want the tracker at all, delete the {=html} block from pages/research.qmd and remove data/timeline.json.

Step 5 — Connect your ORCID

Publications on the Research page load live from ORCID — no manual list to maintain. To connect your own profile:

  1. Make sure your ORCID profile is set to public and your works are added at orcid.org
  2. Open pages/research.qmd and find this line near the bottom:
const ORCID_ID = '0009-0000-1020-2333';
  1. Replace the ID with your own ORCID (the 16-digit number from your ORCID profile URL)
  2. Also update the Scholar URL on the next line:
const SCHOLAR_URL = 'https://scholar.google.com/citations?user=YOURID';

The page will now show your 6 most recent publications, with journal favicons pulled automatically, APA 7 citations ready to copy, and RIS files available to download. A “View all on Google Scholar” link appears at the bottom.

Step 6 — Add your reading list

The homepage shows a curated list of recent papers pulled from data/reading.json. To add entries, open that file and add items in this format:

[
  {
    "doi": "10.1000/xyz123",
    "title": "Full paper title",
    "authors": "Smith, J., Jones, A., et al.",
    "year": "2023",
    "journal": "Journal Name",
    "note": "A short note about why this paper is worth reading."
  }
]

All fields except doi are optional — but without title, authors, year, and journal your reading list will display bare DOIs instead of paper details. Fill them in manually, or use the Google Sheets sync below to have them fetched automatically.

The homepage shows the first 3 entries. New entries go at the top of the list.

Optional: Sync your reading list from Google Sheets

If you’d rather manage your reading list in a spreadsheet, the template includes readinglist_appscript.gs — a Google Apps Script that connects a Google Sheet to your site. Paste a DOI, PMID, or APA citation into the sheet and metadata (title, authors, journal, year, abstract) and tags are filled in automatically. One click commits data/reading.json to GitHub and your site rebuilds within ~2 minutes.

What you’ll need:

  • A GitHub personal access token (with repo scope) — create one at github.com/settings/tokens
  • A Google account with access to Google Sheets and Apps Script
  • Optional: a free Groq API key from console.groq.com — enables AI-generated reading notes

Setup:

  1. Create a new Google Sheet and open Extensions → Apps Script
  2. Delete the default code and paste the contents of readinglist_appscript.gs
  3. At the top of the script, update these two lines:
GITHUB_OWNER: 'YOUR-GITHUB-USERNAME',
GITHUB_REPO:  'YOUR-REPO-NAME',
  1. Also replace youremail@institution.edu with your email (used for Crossref API politeness)
  2. Save the script (Ctrl+S), then reload your Google Sheet — a 📚 Reading List menu will appear
  3. Run the setup steps in order from that menu:
    • 1. Set GitHub token — paste your token
    • 2. Set Groq API key — optional, skip if not needed
    • 3. Set up sheets & tags — creates the Reading List, APA Input, and Tags sheets
    • 5. Install APA trigger — enables auto-processing when you paste into the sheet

Adding papers:

Paste a DOI, PMID, or APA citation into column A of the APA Input sheet. The script resolves it, fetches metadata, suggests tags, and adds a row to the Reading List. If you set a Groq key, a short reading note is generated automatically — edit it to match your voice.

Syncing to your site:

Click 📚 Reading List → Sync to website now. Done.

Step 7 — Add your photo

  1. Find a headshot photo (square or portrait crops work best)
  2. Rename it profile.jpg (or any name you like)
  3. Put it in the images/ folder inside your project
  4. In index.qmd, update the image line to match your filename:
![Your Name](images/profile.jpg){.profile-img}

Step 8 — Preview locally

Before publishing, you can preview your site on your own computer.

In RStudio: open the Terminal (Tools → Terminal → New Terminal) and run:

quarto preview

A browser window will open showing your site. It updates live as you edit and save files. Press Ctrl+C in the Terminal to stop the preview.

Step 9 — Publish your changes

  1. Open GitHub Desktop
  2. You’ll see all the files you’ve changed listed on the left
  3. At the bottom left, type a short summary (e.g. update bio) and click Commit to main
  4. Click Push origin at the top

Your site will rebuild automatically and be live within about 2 minutes. Check the Actions tab in your GitHub repository to watch it deploy.

Optional: Change the colours

Open styles.css and find these two lines near the top:

--navy: #1a2e4a;
--accent: #c8922a;

Replace the hex colour codes with any colours you like. The rest of the site updates automatically. A few examples:

Palette –navy –accent
Navy & amber (default) #1a2e4a #c8922a
Deep green & gold #1a3a2a #b8860b
Plum & coral #3a1a3a #c8522a
Slate & teal #1a2a3a #2a8a7a

Optional: Custom domain

If you want your site at yourname.com instead of the default GitHub URL:

  1. Buy a domain from Namecheap, Cloudflare, or similar (~$15–25 AUD/year for a .com)
  2. In your domain registrar’s DNS settings, add these four A records and one CNAME:
Type Host Value
A Record @ 185.199.108.153
A Record @ 185.199.109.153
A Record @ 185.199.110.153
A Record @ 185.199.111.153
CNAME Record www yourgithubusername.github.io
  1. Create a file called CNAME (no extension) in the root of your repo containing exactly your domain name:
yourname.com
  1. In GitHub: Settings → Pages → Custom domain → enter yourname.com → Save → tick Enforce HTTPS once it appears

DNS propagation takes up to 30–60 minutes.

Troubleshooting

Site not showing after enabling Pages Check the Actions tab in your repo. If there’s a red X, click it to see the error. The most common cause is an unclosed ::: block in a .qmd file — every ::: that opens a div needs a matching ::: to close it.

Changes not appearing on the live site Make sure you committed and pushed in GitHub Desktop. A commit alone doesn’t send changes to GitHub — you need to click Push origin too.

Publications not loading Check that your ORCID profile is set to public and that your works are visible without logging in. You can verify by visiting https://pub.orcid.org/v3.0/YOUR-ORCID-ID/works in a browser — if it returns data, the page will load correctly.

Custom domain showing as insecure Wait 30–60 minutes after setting up DNS for GitHub to provision the SSL certificate. The Enforce HTTPS checkbox will become available once it’s ready.

Photo not showing Check the filename and path in index.qmd match exactly, including capitalisation. File paths are case-sensitive on GitHub even if they aren’t on your computer.

Questions or issues with the template? Feel free to get in touch or open an issue on GitHub and I’ll get back to you.