How to host a webpage with Github and R

Step1:

Sign up and open Github account and update profile information. The page will be blank with no repository. It will look like this:

First look to my Github profile

Step 2:

Next download and Install git.

Step 3:

Finally download and Install Github Desktop. While doing so use the Github account name and email address.

Configure Github Desktop

Step 4:

Now, in RStudio, Open New Project and follow the below steps

RStudio >> New Project >>New Directory >>Quarto Website(scroll down and choose) >> Click “Create a git repository >> Github_name.github.io

New R Project

Step 5:

The project opens up - see the default new tabs and settings

Default Files and tabs for you

Step 6:

In the quarto.yml file just below project type add output-dir: docs. Now run this default project. Go to Build and Render Website

Step 7:

After rendering what we see is webpage at local host. To host it in Github we need to push the content using Github Desktop.

Step 8:

Open Github Desktop and go to Current repository. Add the existing repository to the file path and add a meaningful commit (trust me- it helps). We have staged all files to be pushed to Github and lastly Push Repository

Step 9:

Go to Github and you would see a new repository. First change the settings as Public and then in Settings >> Pages, change the settings for branch as indicated below and save it.

Github Settings

Step 10:

Wait a minute or so and refresh the page: Webpage goes live and we get the link to it.

Site is Live

Step 11:

Now lets add the necessary info to our webpage. So back to RStudio and update index.qmd like so.

Note: We have many themes and icons to choose from - Explore quarto, it has extensive potential and abundant offerings.

Index file

Next, in CV.qmd, add html block and upload CV

CV file

Finally, update .quarto.yml if needed

qml file

At times it can take hours to fix code errors caused by misplaced commas and blank spaces, so it’s important to remain patient!

Yes, I spent hours for these few lines of codes - and it was all about a comma

Step 12:

Render Website. Go to Github Desktop, commit and push. Next refresh and wait a minute to see updated website link at Github >> Settings>> Pages>> Github Pages >> Visit site. Our webpage is ready

Webpage