MDAG workshop: Part 4b
Creating your website

Author

J Nienkemper-Swanepoel

Before you start

  • You should have a GitHub account. Please refer to the Part4a document for detailed steps.

Using the website template

  • Sign into your GitHub account.
     

  • The website template is available in this repository: jnienk/createQuarto_website (open this in a new window).
     

  • Click on Use this template and Create a new repository:


     

  • Decide on a name for your repository and leave all other fields as is. Click on Create repository: Take note: for the website to render, the repository has to be public, which is the default setting.
     

  • The repository should open on your GitHub account and should look similar to the screen capture below.
     

  • To ensure that the website it visible, follow these steps:

    • Click on Settings:
       
    • Click on Pages:
       
    • Click on None:
       
    • Select Main:
       
    • Click on /(root):
       
    • Select /docs and and click on Save:
       

  • Navigate back to your repository by clicking on the repository name in the left corner:
     

  • Link the GitHub Pages to your repository by clicking on the gear icon:
     

  • Enable Use your GitHub Pages website and click on Save changes:
     

  • Click on Code and Download ZIP:
     

  • Once the download is complete, extract all files in a location that will be easy to locate again.
     

  • OPTIONAL: If you have a profile photo you would like to use, add this to the main folder with the extracted documents. This should be a .png format.
     

  • Open the R project file: createQuarto_website.Rproj
     

  • Follow the next steps to update your own website.
     

YAML file

A YAML file (.yml) is a text file that is easy to read and used for the configuration of your website. This will include the layout of the pages and order of the tabs. In this version of the website you will have a (1) Home page, (2) Educational background page, (3) Presentation page and (4) Blog posts. You can add more pages as you develop the content for your website.

  • Navigate to the Files pane (typically in the right bottom corner of your RStudio session). Click on the _quarto.yml file to start making changes in RStudio.
     
  • Add your name and surname in line 7. Do not remove the quotations.
     
  • Update the site-url in line 9 by removing the # and copy-and-paste your GitHub repository URL from GitHub. The format should be: https://github.com/<GitHub account name>/<repository name>.
     
  • Add your Name and Surname in the Copyright statement in line 29.
     
  • Do not make any other changes.
     
  • Save the .yml to ensure all changes are captured.
     
  • Take note: Line 22 and 23 are commented out. If you have an activated ORCID iD profile, you can remove the # in both these lines and refer to the Publications page section towards the end of this document.

Index file

The index file is the home page of your website.
 

  • Again, navigate to the Files pane (typically in the right bottom corner of your RStudio session). Click on the index.qmd file to make the following changes in RStudio.
     
  • Add your initials and surname in line 2. Again, do not remove the quotations.
     
  • If you have added a profile picture, change the file name in line 8 which is currently profile.png.
     
  • OPTIONAL sections that can be commented out:
    • Add your email address in line 13.
    • Add your Google Scholar account URL in line 17.
    • Add your ORCID iD URL in line 19.
    • Add your LinkedIn profile URL in line 21.
       You can add or remove items here, just remember to keep the - icon: and href: per item when adding more. Simply copy-and-paste the other items and edit as required.

  • Write a short biography under in the provided section between ::: :::. Do not remove these colons.

  • Save the .qmd to ensure all changes are captured.

Education page

  • Again, navigate to the Files pane (typically in the right bottom corner of your RStudio session). Click on the education.qmd to make the following changes in RStudio.

  • Tables have been created to provide a skeleton for your information.

  • More sections can be added by creating additional headings.

  • Save the .qmd to ensure all changes are captured.

Talks page

  • The editing of this page happens outside of RStudio.

  • Open the talks.csv file in Microsoft Excel (or equivalent application).

  • Important: Do not change the headings (row 1) of this file, only add rows below the heading row.

  • Add relevant information on presentations you have delivered.

  • Do not make any changes in the talks.qmd file.

Blog posts

  • A preliminary folder has been created in the posts folder in the repository: 2025-11-25-my-first-blog-post.

  • In the future, you will add a new folder for each blog post in the posts folder. You can decide on a naming convention, but it works best to start with the date, followed by the title of the post. Take note: spaces are indicated with a hyphen.

  • Inside each blog post folder, you should have a Quarto document file named index.qmd. As before, GitHub recognises index files as home pages and therefore, this file name should never be changed.

  • Do not make any changes in the blog.qmd file.

  • Open the posts/2025-11-25-my-first-blog-post/index.qmd file inRStudio.

  • You can make changes to the title, author and date fields. Again, do not remove the quotations.

  • You can add categories by using the same formatting of line 7 and 8.

  • You can add tags by using the same formatting of line 10 and 11.

  • Try to add one of your examples from Part 3 of the workshop for your first blog post.

Publications

This is an additional website setting, which is only applicable if you have an active ORCID iD.

  • It is possible to automatically sync your ORCID iD profile with RStudio to create an updated list of your publications.

  • Include your ORCID iD number in line 16.

  • Remember to remove the comments (#) in line 22 and 23 in the _quarto.yml if you want to include a publication page on your website.

Rendering the website

  • Ensure that all changes are saved.

  • In the Environment window select Build:

  • Click on Render Website:

  • If you have followed all the steps exactly, you should see the following output in the Background Jobs window:

  • The website will render in the Viewer tab:

  • You can click on Show in new window to view this in the browser.

Publishing the website

  • These changes will not reflect on GitHub yet.

  • If you are not an experienced GitHub and Git user, the easiest way to commit all your changes to GitHub is to add them manually (take note: this approach is limited to uploading a 100 files). Therefore, try to be selective by only adding files that were changed and not selecting all files if they exceed a 100.

  • Alternative steps are provided in the Part 4c document which is a more efficient approach to commit changes to repositories.

  • In GitHub click on Add file and Upload files:

  • You can simply select all files and drop them in the provided window in GitHub:

  • Add a commit message and click on Commit changes:

  • Now you will have to wait for the changes to reflect. If a brown solid circle is visible, the process is still pending:

  • The website is ready for viewing when a green tick mark appears:

  • You can view the website by clicking on the link in the About section:

  • Your website:

  • This is also the URL you can use as your personal website address.

Next step

  • An optional additional document is also available for GitHub and Git integration Part4c - Git and GitHub.