How to Make a Personal Website

Website
Quarto
Author

Pingfan Hu

Published

December 29, 2023

Abstract

This is a tutorial of making a personal website using Quarto on RStudio.

This tutorial contains the following:

  1. Constructing the personal blog R project using Quarto
  2. Pushing the project as a GitHub repo
  3. Purchasing your domain on Namecheap or Netlify
  4. Deploying the repo on Netlify

In summary, this website is made using Quarto on RStudio, and is deployed by accessing the GitHub repo on Netlify. I bought my domain on Namecheap, but Netlify sells domain as well.

Introduction

Building a personal website is a very good attempt of showcasing your own abilities and your projects, either for academic reasons or job-seeking purposes. There are a lot of ways to construct your personal website, including some low code or even no code options. As an R programmer, I prefer to make one using the R coding environment. Quarto is an open-source publishing system compatible with Python, R and Julia. It is the next generation of R Markdown, and is a good option for personal website construction as well.

Step 1 - Preparation

The first step is to install the environment. If you haven’t done already, please download and install R language, RStudio, and Quarto.

You’ll also need to have your GitHub account ready. It’s also a good idea to install GitHub Desktop to manage your local GitHub repos.

You’ll use Netlify to deploy your GitHub repo as a website, which by default allows you to generate your customized third-level domain name, with a fixed second and top domain being netlify.app. For example, you can name your domain as: myfancywebsite.netlify.app.

Hint: Domain names are usually in the format of third.second.top. For example, in Google’s homepage www.google.com, com is the top-level domain; google is second; and www is third.

You can use Netlify or Namecheap to buy your personalized domain. For example, my domain is pingfanhu.com. It is bought from Namecheap and deployed on Netlify. If you do this, both the default Netlify domain and your customized domain will work. They are not replacing each other. Below is the example of my case:

Figure 1: Both my personal domain and netlify-assigned domain are functioning. Plus, there is a re-direction from www by default.

Figure 1: Both my personal domain and netlify-assigned domain are functioning. Plus, there is a re-direction from www by default.

Hint: If you want to save time, I recommend that you buy domain on Netlify so that you won’t need to bother dealing with DNS assignment. However, Namecheap gives you full service of domain management and DNS customization, and, as its name indicates, it sells domains a little cheaper.

Step 2 - Website Project

The next step is to create the R project of your website. You can either clone my website repo or make from scratch.

2.1 Clone my repo

If you want to clone my repo, proceed to the site, and click on the Code button or Use this template button. Both buttons are in green.

Figure 2: On the top right of the page, either click on the “Code” or the “Use this template” button to clone my repo as your own.

Figure 2: On the top right of the page, either click on the “Code” or the “Use this template” button to clone my repo as your own.

If you are using my template, there are several things I want to explain to ease your understanding:

  1. My repo is slightly different from the Quarto official blog tutorial, since I prefer to show my personal page as default, and make the other pages, including “About”, “Blogs”, “Projects”, etc. as tabs on the nav bar.

  2. I used the United theme. This is a free theme made by Bootswatch. There are 25 Bootswatch themes in total, all compatible with Quarto doc. You can access them in the Themes drop-down menu.

  3. I also used a customized scss file called theme.scss and another css file called styles.css. Both scss and css files are used to define personal page layout settings. The YAML grammar looks like this (You can see the full YAML codes in the _quarto.yml file):

    format:
  html:
    theme: [united, theme.scss]
    css: styles.css
    backgroundcolor: "#F8F7F0"

    Note that there is a backgroundcolor: "#F8F7F0" used to set the page background color. The short reason for it being here and not in .scss or .css is that, it gives the best compatibility.

    The original United theme primary color is orange, but I changed that in my theme.scss file.

  4. I manually pasted my resume.pdf file to the _site -> contents directory, since I failed to find an automatic solution of creating this file upon knitting.

2.2 Make from scratch

If you want to make one from scratch, please proceed to the official Quarto blog tutorial. For the project set-up, you can follow these steps:

Figure 3: Launch RStudio and click on “New Project…” from the “File” drop-down menu

Figure 3: Launch RStudio and click on “New Project…” from the “File” drop-down menu

Figure 4: Select “New Directory”

Figure 4: Select “New Directory”

Figure 5: Click on “Quarto Blog”

Figure 5: Click on “Quarto Blog”

Figure 6: Define the directory name and path, and finally click on “Create Project”

Figure 6: Define the directory name and path, and finally click on “Create Project”

The creation of the Quarto Blog R project constructs the skeleton of your personal website. You can now add the contents on to it and make it your own.

2.3 Project file structure

I’ll use my project as an example. If you decided to construct on your own, make sure to have your files and folders sorted in a way that is easy to understand and to reproduce.

In my project:

  1. The _site folder is auto-generated during the knitting process. It stores the HTML pages as well as the PDF files that I want my website to access. Note that the knitting process does not create the PDF files even if they are placed in my project folder. My solution is to manually paste them to the desired locations.
  2. The contents folder contains my code, figure, and pdf resources. The folders of blogs and projects are kind of special. They are where the blog and project qmd files are stored, including this one.
  3. In the root folder, there are theme files, main tab qmd files, the favicon file, and the _quarto.yml file.

Hint: You may have noticed that there are several index.qmd files in the project. Index is an important file name. The file with this name will be opened by default. For example, in the root folder, there are several qmd files, but if you open my website homepage, the page you see by default is the one in the index.qmd file.

I recommend you use similar file structure as mine, but if you have a personal preference, feel free to play around and figure out your own style.

2.4 Push to GitHub repo

Remember to push your project to your GitHub repo so that it can be managed and updated in the future. I recommend you using GitHub Desktop. This GitHub repo will also be used in Netlify to deploy your website.

Step 3 - Buy your personal domain

This step can be skipped if you don’t want to have your own domain. Like I explained, Netlify will assign you with your preferred third-level domain.

3.1 Buy from Namecheap

If you decided to buy from Namecheap, you need to create your account and pick your preferred domain name. My domain name costs me about $10 per year, which can be referred as your anchor.

Remember, although you have full control with your domain on Namecheap, you’ll need to manually set your DNS to link it with your Netlify server, which we’ll cover in Step 4.

3.2 Buy from Netlify

Buying from Netlify is also an option, so that you won’t need to deal with the DNS thing. However, Netlify does not provide a direct page of buying it. As you go through your site creation process, you will have the option to buy your domain.

Step 4 - Deploy your website

Create your Netlify account using GitHub, and choose to deploy your website from GitHub. Select on your repo and follow the instructions.

You can access the Quarto official tutorial on Netlify deployment. Below are several hints from me:

  1. When setting your publishing directory, you need to input _site. As I explained in 2.3 Project file structure, this is the default directory for your HTML files. If you defined your own directory, make sure to input the directory name here. The other build settings can be left as they are.

Figure 7: In “Publish Directory”, you’ll need to fill in _site or your own defined directory name

Figure 7: In “Publish Directory”, you’ll need to fill in _site or your own defined directory name
  1. If you bought your domain from Namecheap, you’ll need to manually fill in the DNS hostnames. You can access them in Dashboard -> Domains -> Name servers of your Netlify page.

Figure 8: This is where you can find the DNS hostnames in Netlify

Figure 8: This is where you can find the DNS hostnames in Netlify

Figure 9: This is where you can paste the DNS hostnames in Namecheap

Figure 9: This is where you can paste the DNS hostnames in Namecheap
  1. Netlify takes care of SSL/TLS certificate, (aka the HTTPS protocol you can see in the site URLs). It’s a free service by Let’s Encrypt, which is enough for personal use. You can access it in Sites -> Domain management -> SSL/TLS certificate. It’s usually automatically enabled, but it can be manually renewed by clicking on the button on this page.

Figure 10: HTTPS is taken good care of by Netlify

Figure 10: HTTPS is taken good care of by Netlify
  1. Since Netlify has direct access to your GitHub repo, each time you push new version to GitHub, your website will be updated automatically. You can also trace the process on your Netlify dashboard. There is no need to type the command of quarto publish netlify in RStudio.
Back to top