If you are an academic, you likely need a website. While it is a convenient way to manage your online presence, building one from scratch can be time-consuming (even with the help of AI), and your time is often better spent elsewhere. In this post, I present a simple way to build a basic academic website that looks professional and meets the needs of the vast majority of academics. There are many tutorials online explaining how to build an academic website (I myself used the excellent article by Rob Williams to build my own in 2021), but in my opinion, the solutions proposed in these tutorials are often either too complex or too simple.

Even if you are willing to spend time building a complex site at the beginning, that complexity becomes a burden when trying to maintain it or keep it up to date. On the other hand, overly simple solutions may prevent you from adding custom features (with the help of an AI, for instance) later on. What I offer here is the most basic website possible: super easy to maintain, but built in a way that can be easily customised with the help of AI if and when the need arises.

If you are only interested in building your website, you can safely skip the Thoughts section and go directly to Setting Up Your Website.

1. Thoughts
2. Setting Up Your Website
3. Customise your website
4. Next Step

1. Thoughts

2. Setting Up Your Website

2.1 GitHub

The first thing you need—and likely already have—is a GitHub account. Your website’s URL will be https://<yourgithubusername>.github.io. If you already have an account but are unhappy with your username, you can change it in your account settings.

Once your GitHub account is ready, you can fork this repository. If you are not familiar with GitHub, think of this repository as a folder containing all the files that constitute your website; you are simply creating your own copy of this folder to customize. To fork the repository, log into your GitHub account and navigate to this link. In the upper right corner of the window, you should see the “Fork” button:

Click the “Fork” button. A new page will open asking you to choose a repository name. You must enter <yourgithubusername>.github.io. Then, click “Create fork.” Congratulations! You have just created your own copy of the academic website repository.

2.2 Preparation to go online

In order to go online, you need to set up a few things in your repository. First, locate the top menu:

1. In your GitHub repository, click on the “Actions” tab in the top menu bar.
2. If you see a button that says “I understand my workflows, go ahead and enable them,” click it.
3. Click on “Settings” in the top menu of your repository.
4. On the left-hand sidebar, click on “Pages.”
5. Under the “Build and deployment” section, ensure the “Source” is set to “GitHub Actions.”

2.3 Configuration

Before launching your website, a few customizations are necessary. If you are comfortable with GitHub, you can clone the repository to your computer and update it using your favorite code editor. If you are new to GitHub, everything can be done online! To modify a file directly on GitHub, click on “Code” in the top menu bar.

From here, you can navigate your repository and locate the file you wish to modify. Once the file is open, click the pencil icon (“Edit this file”) on the right side to start making changes.

The first file to update is _config.yml:

• Site Settings: Update the first_name and last_name fields. Also, update the url to your actual website address: https://<yourgithubusername>.github.io. Below is an example using the name “Thomas Bayes”:

# -----------------------------------------------------------------------------
# Site settings
# -----------------------------------------------------------------------------

title: blank # the website title (if blank, full name will be used instead)
first_name: Thomas
middle_name:
last_name: Bayes
contact_note: ""
description: > # the ">" symbol means to ignore newlines until "footer_text:"
footer_text: ""
keywords: # add your own keywords or leave empty
lang: en # the language of your site (for example: en, fr, cn, ru, etc.)
icon: 🎲 # the emoji used as the favicon (alternatively, provide image name in /assets/img/)

url: "https://thomasbayes.github.io"
baseurl: ""
last_updated: false # set to true if you want to display last updated in the footer
impressum_path: # set to path to include impressum link in the footer, use the same path as permalink in a page, helps to conform with EU GDPR
back_to_top: false # set to false to disable the back to top button

• Jekyll Scholar: Scroll down to the Jekyll Scholar section and update the last_name and first_name fields again.

# -----------------------------------------------------------------------------
# Jekyll Scholar
# -----------------------------------------------------------------------------

scholar:
  last_name: [Bayes]
  first_name: [Thomas, T.]

  style: apa
  locale: en

  source: /_bibliography/
  bibliography: papers.bib
  bibliography_template: bib
  # Note: if you have latex math in your bibtex, the latex filter
  # preprocessing may conflict with MathJAX if the latter is enabled.
  # See https://github.com/alshedivat/al-folio/issues/357.
  bibtex_filters: [latex, smallcaps, superscript]

  replace_strings: true
  join_strings: true

  details_dir: bibliography
  details_link: Details

Once you have finished editing, click the “Commit changes…“ button in the upper right corner. A pop-up will appear; click “Commit changes” again to save. At this point, your site is ready to go live! We will explain how to modify individual pages in the next section.

2.4 Going Online

If you have followed all the steps described above, your website should be online after about a two-minute wait. If you click on Actions, everything should be green; if you return to the Pages section of the settings, you should see: **“Your site is live at .github.io."**

Every time you commit a change to your website, it should automatically be pushed online within a few minutes. If you do not see the changes, check that everything is green in the Actions menu. If the status is green but you still do not see any changes, it is likely because your browser has cached part of your website. Clear your cache, and your update should appear.

3. Customise your website

3.1 Customise the social media bar

Go to _data/socials.yml and uncomment the social media platforms you want to appear in your bottom bar. Add your username so the icon links directly to your account.

3.2 Add your profile picture

Go to assets/img and replace prof_pic.png with your own profile picture. Make sure the new image is in PNG format and is also named prof_pic.png. The dimensions of the picture are flexible; for reference, the current example is 1067 x 800 pixels.

3.3 Add your CV

Go to assets/pdf and replace cv.pdf with your CV. The file can be as long as you wish.

3.4 Customise your pages

The main components of your website are, of course, the pages. In its most basic version, your website consists of three pages: About, Publications, and CV. We will first explain how to customise these three pages and then discuss how to add more. Generally, all your pages are located in the _pages directory; this is where you can modify or create content.

3.4.1 About

This is the first page displayed when someone opens your website. Like every page, it is composed of a front matter delimited by --- and a body. We will look at the front matter in more detail when we explain how to create your own pages, but the About page is unique because its front matter contains a profile section. This section governs the display of your profile picture and the email address underneath it:

---
profile:
  align: right
  image: prof_pic.png
  image_circular: false # crops the image to make it circular
  more_info: >
    <p><a href="mailto:name.surname@university.edu">name.surname@university.edu</a></p>
---

Here you can decide which side of the window your profile picture appears on (right or left). If you wish, you can set image_circular to true to get a circular profile picture; in this case, I recommend using a square image file. You can also update your email address or remove the more_info section entirely if you do not want your email displayed under your picture.

Below the front matter, you can write any content you want to appear next to your profile picture. You should use Markdown syntax. It is very straightforward, and the provided example already demonstrates the most useful commands, but you can also refer to this guide for more details.

3.4.2 Publications

The publications page follows the same structure, with a front matter and a body written in Markdown. Its specific feature is the following code block:

<div class="publications">


{% bibliography %}

</div>

This command automatically handles the display of your publications!

To add publications, create a new entry in the _bibliography/papers.bib file. You can find BibTeX entries for your work on Google Scholar, arXiv, or the conference page itself. By default, publications are sorted by year, with the most recent appearing first. You can modify this behavior and other settings in the Jekyll Scholar section of the _config.yml file.

Buttons (through custom BibTeX keywords)

There are several custom BibTeX keywords you can use to change how entries are displayed on the webpage:

• abstract: Adds an “Abs” button that expands a hidden text field to show the abstract.
• arxiv: Adds a link to the ArXiv website (Note: only add the ArXiv identifier; the link is generated automatically).
• code: Adds a “Code” button redirecting to the specified URL.
• pdf: Adds a “PDF” button. If a full URL is not provided, the file is assumed to be located in the /assets/pdf/ directory.
• poster: Adds a “Poster” button. If a full URL is not provided, the file is assumed to be in the /assets/pdf/ directory.
• slides: Adds a “Slides” button. If a full URL is not provided, the file is assumed to be in the /assets/pdf/ directory.
• supp: Adds a “Supp” button for supplementary materials. If a full URL is not provided, the file is assumed to be in the /assets/pdf/ directory.
• bibtex_show={true}: Adds a “Bib” button that expands a hidden text field showing the full BibTeX entry.

Author annotation

In the publications list, your own name is identified by the scholar:last_name and scholar:first_name arrays in the Jekyll Scholar section of the _config.yml file. For example:

# -----------------------------------------------------------------------------
# Jekyll Scholar
# -----------------------------------------------------------------------------

scholar:
  last_name: [Bayes]
  first_name: [Thomas, B.]

If a BibTeX entry matches one of these name combinations, your name will be underlined.

If you wish to automatically link to the websites of your co-authors, you can store their information in _data/coauthors.yml. Use the last name (lowercase and without accents) as the key:

"price":
  - firstname: ["Richard", "R."]
    url: https://en.wikipedia.org/wiki/Richard_Price

If an entry matches these name combinations, the co-author’s name will be highlighted and linked to the provided URL. Note that keys MUST BE lowercase and MUST NOT contain accents.

3.4.3 CV

The CV page is very similar to the others, featuring a front matter and a Markdown body. The following line:

<iframe src="../assets/pdf/cv.pdf" width="100%" height="1200" frameborder="no" border="0" marginwidth="0" marginheight="0"></iframe>

displays your CV in PDF format directly on the page.

3.4.4 Create your own pages

Adding a new page to your website is straightforward. You simply need to create a new Markdown file (e.g., projects.md) within the _pages directory. Each page consists of two parts: the Front Matter and the Body.

The Front Matter

The front matter is delimited by triple dashes --- and explains how to handle the page. Here is a breakdown of a standard front matter:

---
layout: page
permalink: /talks/
title: Talks
description: List of my future and past talks
nav: true
nav_order: 4
math: true
social: true
---

• layout: Defines the template. Using page ensures it matches the look of the rest of your site.
• permalink: The URL path for the page (e.g., <yourgithubusername/talks/).
• title: The name that appears at the top of the page.
• description: A subtitle or short sentence displayed right under the title.
• nav: Set this to true if you want the page to appear in your top navigation bar.
• nav_order: A number determining the position of the page in the navigation bar (lower numbers appear first).
• math: Set to true if you plan to use LaTeX for mathematical equations on this page.
• social: Set to true if you want social media sharing buttons to appear at the bottom.

The Body

Once the front matter is closed with the second ---, you can write the rest of your content using Markdown.

4. Next step

The next step is to ensure your website is properly indexed by search engines like Google, which will be the topic of my next post.