Appendix A — Advanced: Websites

For those of you who are confident with R and would like to push yourself, we will provide a number of advanced chapters to work through. The content covered in these chapters will not be assessed as part of Applied Data Skills and engaging with it is entirely optional.

A.1 Build a website

In this chapter, we will show you how to build a professional website for free using Quarto, RStudio, and GitHub. Having a professional website can be very useful as it can act as a repository to share your work, host a blog, and/or make your CV available.

A.2 GitHub

GitHub is a free online platform for storing, sharing, and collaborating on code and other files. It uses a system called Git, which tracks every change you make so you can see what has been edited, when, and by whom. This makes it especially useful for version control, teamwork, and reproducible research. For you, GitHub is also a public portfolio, a place where you can show evidence of your coding, data analysis, and project work. Many employers, research groups, and graduate programmes use GitHub to host their own work, so learning to use it is both a practical skill and a way to demonstrate your professionalism in an open, verifiable way.

Most importantly for this chapter, you can also host a free website through GitHub pages, which is what we’re going to do here.

Activity

Go to https://github.com/signup and create a new GitHUb account. Make sure you give yourself a professional username given that we’re going to use this for professional purposes

A.3 Install Git

Git is the version control software that keeps track of changes in your files over time. Every time you save (or commit) your work, Git records exactly what changed, when, and why, allowing you to revisit earlier versions or undo mistakes without losing progress. Git also makes collaboration easier, multiple people can work on the same project simultaneously, and Git will manage the merging of their edits. RStudio uses Git behind the scenes to talk to GitHub, so you can work locally on your computer and then publish or back up your work online with a single click.

Activity

Now you need to install Git.

Windows: download from https://git-scm.com/install/windows
macOS: install with Homebrew (brew install git) or from https://git-scm.com/install/mac

After you have installed git, open RStudio then go to the Terminal tab (next to the Console) and type:

git --version

You can’t copy and past into the Terminal so be careful with typos and ensuring you have spaces in the right place etc.

A.4 Tell Git who you are

Before Git can record your work, it needs to know who is making the changes. Every time you “commit” a file, Git adds your name and email to the project history, this creates an automatic record of authorship and makes collaboration transparent. Think of it like signing your name at the bottom of each version of your work.

You only have to do this once per computer. After that, Git will use the same details every time you save or publish. Make sure you use the same email address as the one you used for GitHub, otherwise RStudio may not recognise you when you try to connect.

Activity

In the RStudio Terminal, type:

git config --global user.name "Your Name"
git config --global user.email "you@example.com"
git config --global pull.rebase false

user.name is how your name will appear beside each commit.
user.email links those commits to your GitHub account.
The pull.rebase false line just prevents confusing behaviour later when syncing projects.

To check that everything worked, type:

git config --list

If you can see your name and email in the output, Git is now ready to keep an accurate, professional record of your work.

A.5 Connect RStudio to GitHub

Now that Git knows who you are, the next step is to connect your computer to your GitHub account that you created earlier. This is what allows you to move files between your local RStudio projects (the work you do on your computer) and your online GitHub repositories (the version stored safely in the cloud).

Because GitHub requires secure authentication, we do this using something called a Personal Access Token (PAT). A PAT is like a long, random password that gives RStudio permission to talk to GitHub on your behalf. It is more secure than saving your actual password, and you can easily revoke or regenerate it at any time. You only have to create and save a token once per computer. After that, RStudio will remember it for you.

Activity

To create a token, enter the following command in the console. It will open up a website where you can set a note, usually the name of the computer you’re using this token on. You’re meant to set it to expire for security purposes, but you can also set it up without an expiry date.

usethis::create_github_token()

Now we have to go back to RStudio and enter the token.

Activity

In the RStudio Console, type:

gitcreds::gitcreds_set()

If RStudio says the gitcreds package is missing, install it first:

install.packages("gitcreds")

When prompted, paste your token into the console and press Enter. RStudio will store it safely in your system’s keychain or credential manager — not in your project files — so it stays private.

Finally, to check everything is working:

usethis::gh_token_help()

A.6 Quarto Website

Now that we have RStudio, Git, and GitHub all talking to each other, create a new Quarto Website project in RStudio.

Activity

In RStudio

File - New Project - New Directory - Quarto Website
Name the directory name something sensible, it will be public, e.g., myname_website.

By selecting Quarto website, it will automatically build the files you need for a simple website.

example_website.Rproj is your RStudio Project file. Opening this file launches RStudio with the correct working directory and project settings.* _quarto.yml is the control file for your website. It tells Quarto how to build the site, things like the title, navigation bar, theme, and output folder. Every time you render your website, Quarto reads this file first to decide which pages to include and how they should look.
styles.css controls your site’s styling, things like colours, fonts, and spacing. CSS stands for Cascading Style Sheets.
.gitignore is a hidden housekeeping file used by Git. It lists any files or folders that should not be tracked or uploaded to GitHub (for example, large data files or temporary build folders). When you see a filename starting with a dot (.), it usually means “hidden system file.” You should not delete it, but you rarely need to edit it manually.
index.qmd is the homepage of your website. When someone visits your site (for example, https://yourname.github.io), Quarto uses this file as the first page they see. You can customise it with text, images, or links to other pages (like about.qmd).
about.qmd is one of your content pages written in Quarto Markdown (.qmd). It usually becomes your About Me or Biography page once the site is published. You can open it in RStudio and edit the text just like you would for any other Quarto report.

To make our website play nice with GitHub, we need to make a small initial change to the _quarto.yml file so that when it produces the website, it saves the files in a directory named docs.

Activity

Open _quarto.yml. At the top it will say:

project:
  type: website

Amend this to add:

project:
  type: website
  output-dir: docs

Then save the file.

Activity

Before we make any edits, to see the basic website shell, click “Build” then “Render website”. You’ll see in the files tab that there is now a folder named docs. This is the folder that contains the rendered html files.
Go into the Files tab then the docs folder and open the index.html file in the browser to see your website. It looks very basic now but we will soon populate it.

A.7 Create a new repository

Now that you’ve built your website locally, we need to connect it to Git and GitHub so you can back it up online and eventually publish it and to do so, we need to create a new repository on GitHub. A repository (often shortened to repo) is the place where a project lives. You can think of it as a folder that contains everything related to one piece of work, your R scripts, data files, Quarto documents, images, and even the full history of every change you have made. Each time you commit and push, Git saves a snapshot of the repository at that moment, so you can always look back or restore an earlier version if something goes wrong.

When the repository is stored on GitHub, it becomes both a backup and a showcase: a cloud-based version of your project that you can share with others, collaborate on, or publish as part of your portfolio.

Activity

In the console, run:

usethis::use_git(message = "Initial commit of website files")

If RStudio says Git is already initialised, skip straight to usethis::use_github(), your repo already exists locally.

You will be asked to confirm that you want to commit the files. When you commit in Git, you are saving your changes along with a short message describing what you did and what the changes are. Each commit creates a permanent, timestamped record in your project’s history, showing exactly what changed, when, and by whom.

Once you’ve done this, then run the following code which will create the new repository on GitHub with the files you have committed:

usethis::use_github()

A.8 GitHub pages

GitHub Pages is a free service from GitHub that lets you turn a repository into a live website. Instead of just storing your files on GitHub, you can publish them so that anyone can view them in a web browser — for example, at a URL like https://yourusername.github.io/.

It works by taking the files in your repository (for example, HTML pages created by Quarto or Markdown) and automatically serving them as a website. Every time you push new changes to GitHub, the site updates within a few minutes. You don’t need to buy hosting or manage servers, GitHub handles everything behind the scenes.

For this course, GitHub Pages is what allows you to publish your Quarto website publicly. It’s completely free, integrates directly with RStudio and version control, and gives you a professional web address where you can showcase your Applied Data Skills work, portfolio, CV, and blog.

Activity

In your repository on GitHub, click on Settings then click Pages, which is in the left hand pane.
Under Branch, select master and then docs then click save.
Your website will then be available at https://yourusername.github.io/reponame/

A.9 Adding content

I’m going to show you how to set up your website to mirror my own academic website https://www.emilynordmann.com/ (me and my ego pay for my domain name, it’s still done through GitHub even if the address doesn’t show it). Of course you don’t have to use this as your template, you can style your website however you like, but to do that you’re on your own!

A.10 Sub-directories

We don’t need them straight away but it will help us to set up a few new folders.

Activity

In the Files pane, create four new folders in your main website folder (e.g., where your _quarto.yml is stored).

A folder named images
A folder named blog
A folder named data
A folder names files

No guesses for what we’ll be using these for.

A.10.1 Homepage

First, we’ll update the homepage, which is the page controlled by index.qmd and add a photo, title, biography and links to e.g., social media stuff. Here is the full contents of my index.qmd.


---
title: "Professor Emily Nordmann"
page-layout: full
---

::: {.grid .gap-4}
::: {.g-col-12 .g-col-md-4}

<div class="profile-card">
<p>Associate Dean of Learning and Teaching</p>
<p>University of Glasgow</p>

<img src="images/headshot_2025.jpg" class="avatar" alt="Headshot of Emily Nordmann" />


<p class="icons">
<a href="mailto:emily.nordmann@glasgow.ac.uk" aria-label="Email"><i class="bi bi-envelope"></i></a>
<a href="https://www.linkedin.com/in/emilynordmann/" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
<a href="https://scholar.google.co.uk/citations?user=-7Y95XAAAAAJ&hl" aria-label="Google Scholar"><i class="bi bi-google"></i></a>
<a href="https://github.com/emilynordmann" aria-label="GitHub"><i class="bi bi-github"></i></a>
</p>
</div>

:::
::: {.g-col-12 .g-col-md-8}

## Biography

I am Associate Dean for Learning and Teaching and Professor of Evidence-Informed Education at the University of Glasgow. My research predominantly focuses on lecture capture, how it can be used as an effective study tool by students and the impact on students from widening participation backgrounds as well as those with disabilities and neurodivergent conditions. In all my work, I draw on theories of learning from cognitive science and self-regulation, as well as theories of belonging and self-efficacy.

My leadership roles have centred around supporting those on the learning, teaching, and scholarship track. I am currently lead of the College of MVLS LTS Network and previously founded and led the Pedagogy and Education Research Unit in the School of Psychology and Neuroscience.

I am based in the School of Psychology and Neuroscience. My teaching is varied although centres on cognitive psychology and beginner data skills in R and I am a vocal advocate of open science and open educational resources where as a member of the PsyTeachR team I has authored several open-access data skills books and tutorials.


:::
:::

Let’s break it down bit by bit and show you what to change.

A.10.2 YAML

This section at the very top is called the YAML header. It tells Quarto what to call the page and how to lay it out.
title: is what appears in the browser tab and sometimes at the top of the page. Change this to your own name or website title.
page-layout: full tells Quarto to use the full-width layout instead of narrow text columns.
Every Quarto page starts and ends its YAML section with three dashes (—).
Change the title to your name / whatever you want the website to be called.

---
title: "Professor Emily Nordmann"
page-layout: full
---

A.10.3 Grid layout

The triple colons (:::) mark the start of a div block in Quarto’s markdown. Here, the classes inside {} use Bootstrap grid styling, which Quarto supports out of the box.
.grid starts a grid layout (think of it as rows and columns).
.gap-4 adds some space between elements.
.g-col-12 means “take the full width on small screens”.
.g-col-md-4 means “use four of twelve columns on medium or larger screens.”.
In plain English: this first column will hold your profile picture and contact links, while the next section (below) will hold your biography.
You don’t have to change anything here, unless you want to play around with the layout.

A.10.4 Profile card

<div> opens a section of content with the class profile-card, which controls its styling.
The two <p> tags add lines of text for your title and affiliation — replace these with your own.
<img> inserts an image: src="images/headshot_2025.jpg" is the file path to your photo. Put the image you want to display in your images/ folder and then update the name of the file.
class="avatar" applies circular styling (you can change this later in styles.css).
alt="..." provides alternative text for accessibility - update this text to describe your photo.


<div class="profile-card">
<p>Associate Dean of Learning and Teaching</p>
<p>University of Glasgow</p>

<img src="images/headshot_2025.jpg" class="avatar" alt="Headshot of Emily Nordmann" />

A.10.5 Social and contact icons

Each <a> tag creates a clickable icon that links to one of your online profiles.
href= gives the link destination (for example, your email, LinkedIn, or GitHub).
aria-label= adds descriptive text for screen readers — this helps accessibility.
<i class="bi bi-envelope"> inserts an icon from the Bootstrap Icons library that Quarto includes automatically.
To customise, just replace the URLs with the links to your own profiles.
If you don’t use one (for example, Google Scholar), you can safely delete that line.

<p class="icons">
<a href="mailto:emily.nordmann@glasgow.ac.uk" aria-label="Email"><i class="bi bi-envelope"></i></a>
<a href="https://www.linkedin.com/in/emilynordmann/" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
<a href="https://scholar.google.co.uk/citations?user=-7Y95XAAAAAJ&hl" aria-label="Google Scholar"><i class="bi bi-google"></i></a>
<a href="https://github.com/emilynordmann" aria-label="GitHub"><i class="bi bi-github"></i></a>
</p>

A.10.6 Second column and biography

::: closes the first column and opens the second one.
.g-col-12 .g-col-md-8 means this section takes up eight columns on medium or larger screens.
The ## Biography heading introduces the text that follows.
Everything below is normal Markdown — just edit or replace it with your own biography paragraph.
At the very end, you’ll see one more ::: which closes the grid layout.
This tells Quarto you’ve finished describing the page structure.

:::
::: {.g-col-12 .g-col-md-8}

## Biography

I am Associate Dean for Learning and Teaching ...

:::

Activity

Copy and paste in my bio to your .index.qmd file and render it just to make sure it works and you can see what it looks like.
Then update it with your title, picture, bio, and social contact links. Remove any sections that aren’t relevant to you.To help debugging, I would render after you have changed each section to make sure it has worked as intended.

A.11 Adjusting the style guide

If you have added an image, with the default style settings it will likely be massive (I’ve just gotten a shock of my own huge face on the screen) so now we can work on adjusting some of the style. My website uses a fairly simple style sheet, if you have the time and the eye for it, you could make something much more impressive.

The styling settings are contained in styles.css. Again, here’s my full style sheet which you can copy and paste. The adjustments you can make to the style are almost infinite and I am not the person to teach you (I used AI to generate mine). There’s a bunch of free courses you can use to learn CSS (e.g., there’s a basic intro available from Microsoft) and you can also use AI to help you get what you want.

#| eval: false

/* general spacing */
main.content { margin-top: 1rem; }

/* profile card on the left */
.avatar {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 0 1rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

.profile-card { font-size: 1rem; }
.profile-card .no-top { margin-top: 0; }

.icons a {
  font-size: 1.4rem;
  margin-right: .6rem;
  text-decoration: none;
}

/* make icon links readable on all themes */
.icons a:link, .icons a:visited { color: inherit; }

/* Increase base font size for body text */
body {
  font-size: 18px; /* default ~16px, increase as needed */
  line-height: 1.6;
}

/* Slightly larger headings for better hierarchy */
h1, .h1 { font-size: 2.2rem; }
h2, .h2 { font-size: 1.8rem; }
h3, .h3 { font-size: 1.5rem; }

Activity

Update your style.css with my styling. Change some of the numbers then render the site to see how it changes the look.
Once you’ve settled on a style, render your website again. Your profile should now be a sensible size.

A.12 Commit and push new changes

Now we have updated our website beyond the starting template, it’s time to cover how we send these changes to GitHub which involves three processes:

Stage the changes - select which files you want to commit
Commit the changes - save and describe what you’ve done
Push uploads your new commits from your computer to GitHub

Now we have moved past the initial set-up stage, we’re going to use a package named gert which you may need to install.

To select the files to save we use git_add(). To see what has changed, look at the Git pane in the top right, which will list all the changes. Most of the time, you will likely want to stage all your changes, however, you might also want to just stage individual files or folders:

gert::git_add(".") # stage all changes
gert::git_add("index.qmd") # stage one file
gert::git_add(c("index.qmd", "styles.css", "about.qmd")) # multiple files
gert::git_add("posts/") # all files in one folder

Then you can commit and push these files:

gert::git_commit("Homepage and style update")
gert::git_push()

Activity

Stage and commit all your changes then push them to to GitHub. If you wait a minute or two and reload your website, your changes will now be live.

A.13 Blog

How you use your website is up to you but adding a blog is quite common. You could also do everything in this section but frame it as a Portfolio. The same structure will work so generalise as you choose.

First, we need to edit the _quarto.yml to add a new section that tells Quarto to treat posts/ as a listing (a page that automatically shows all your posts).

Activity

Open _quarto.yml and edit to the following. The main reason for the edit is to add the blog but whilst we’re here, let’s add in a dark mode toggle.

project:
  type: website
  output-dir: docs

website:
  title: "Your Name"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: about.qmd
        text: About
      - href: posts/index.qmd
        text: Blog

format:
  html:
    toc: false
    css: styles.css
    theme:
      light: cosmo
      dark: slate
    toggle: true           # adds the dark/light switch in the navbar

Inside your posts folder, create a file called index.qmd.

Paste in the following:

#| eval: false


---
title: "Blog"
listing:
  contents: .   # means “list everything in this folder”
  sort: "date desc"
  type: default
  categories: true
  date-format: "long"
---

Welcome to my blog! Here I’ll share notes from my Applied Data Skills journey, project reflections, and other things I’ve learned along the way.

Still inside the posts folder, create a new file called something like 2025-11-04-first-post.qmd. Each post needs its own YAML header at the top with the date in YYYY-MM-DD format as this is what it will use to order your blog correctly:

---
title: "My First Post"
date: 2025-11-04
categories: [reflection, coding]
---

And then underneath this….write your blog which can be text or code or anything else you’ve learned how to do in Quarto. If your blog involves data analysis, put your data in the data folder and then load it in with e.g., read_csv("data/my_file.csv").

If you’re enrolled on Applied Data Skills, you could make an ADS blog where each post is the weekly pair coding exercise to form a portfolio you can show off publicly.

A.14 Additional pages

By default, when you created a new Quarto Website project it gave you a file named about.qmd which is intended to be used as an “About me” page. My homepage already has a bio so I didn’t need this. Instead, I have a “Contact” page that tells people the best way to contact me and a link to a download copy of my CV. What you do with these extra pages is up to you.

You could delete them and just have the homepage and blog. If you want to do this, delete the about.qmd file and also delete the reference to it in the navbar section of _quarto.yml (both the href and text line).
Use it for a different purpose (e.g., a Contact page, a list of your publications, photos of your cats). Update the name of the file to match the new purpose e.g., contact.qmd and then make sure to update the resulting line in the _quarto.yml for the navbar (both href and text).
If you want it to link to a file download (like with my CV), then put the file you want people to be able to download in your files folder and then update _quarto.yml to reflect the file name, like this:

  navbar:
    left:
      - text: "Blog"
        href: post.qmd
      - text: "Contact"
        href: contact.qmd
      - text: "CV"
        href: files/cv.pdf

A.15 Workflow

As a final reminder, a good set of code to have easy access to is:

quarto::quarto_render()                # render new changes
gert::git_add(".")                     # Stage any changed files
gert::git_commit("My message")         # Save them with a message
gert::git_push()                       # Upload to GitHub

If you’ve managed all this, with the help of Google and/or AI, you should be able to figure out how to make your website work for you and add and change features. Well done! Make sure to send me your website so I can see your work.