How To Make A Website with R Studio

R R Studio Distill Github Github Pages

Are you a user of R Studio? Do you use R Markdown to create your reports? If so, this tutorial is for you! I have created my website with R Studio so that I can easily add my R Markdown reports/blogposts/slides. In this post I describe (1) how to create an empty website with R Studio, (2) how to launch your website with Github Pages, and (3) how to create a profile homepage.

Sally A.M. Hogenboom


Like anything, creating a website with R Studio has it’s own pros and cons. I’ll quickly discuss what they are for me, but keep in mind that it may be different for you depending on your background knowledge.

🟢 Easy integration with R Markdown
🟢 One place for your public slides/analyses/scripts/reports
🟢 Version control with Github Pages
🟢 Free hosting with Github Pages
🟢 Automatic linking and chronologic blogposts
🟠 Customization if fully possible, but not intuitive
🔴 Experience with R Studio
🔴 Less intuitive than, for example, wordpress environments

I am personally aware of three different packages for creating your website with R Studio:

  1. R Markdown websites
  2. Hugo & Blogdown
  3. Distill

Each of these methods has their own syntax, file structures, and customization options. I first created my website with Hugo/Blogdown, but in the end was unable to easily keep it up-to-date. For me the biggest issue was the file structure which I did not find entirely intuitive, especially when updating my website only once every few months. Distill is much more intuitive to use, but slightly limited in the types of pages you can create. For now it suffices my needs, and I already found some packages that will help me achieve pages similar to Hugo’s widgets.

Background Knowledge

This tutorial is suitable for you if you..

I will try and describe the steps as detailed as possible. However, I will not include directions such as “upper-right corner” because user interfaces are known to change. Instead I expect you to know how to work each of the elements/programs discussed above.

Creating the Website

Objective: Creating an empty/shell website

Distill has excellent documentation available. Some of the steps I describe here will also be included in their documentation with more/less detail.

R Studio

  1. Install the Distill package:

  2. Create a new R Studio project (New Project... > New Directory > Distill Website)

  1. Build the website:

Outcome: All .Rmd files have now been converted to .html files and have been linked together with a menu-bar. Your empty/shell website is available to you locally in the docs folder of your project.

Creating a Github Page

Objective: Making your website available online.

In order to put your website online it must be hosted. I like to envision ‘hosting’ as a town (the provider) in an online world. I have opted to use the provider Github Pages because (1) it is free and (2) it forces me to version control my website. Other options are available, which are discussed in more detail in this Distill article.


  1. Create a new - empty and public - repository. Note the name must follow this convention for the Github Pages to work (cf. the Github Pages documentation):

Terminal / Command Prompt

  1. Open a new terminal at the folder where you stored your website
  2. Initialize git for the folder
    git init
  3. Add all files currently in the folder
    git add -A
  4. Commit the files with a commit message
    git commit -m "Initialize Website"
  5. Create the main branch
    git branch -M main
  6. Connect your local folder and the Github Repository
    git remote add origin
  7. Push the local files to the Github Repository
    git push -u origin main


Terminal / Command Prompt

Web browser

Adding a Profile Page

Objective: Converting your homepage to a profile landing page

You can make your homepage (index.html) anything you want. I wanted a sort of landing page with basic information about me. In the Distill documentation I learned about the postcards package which is a very easy way of creating profile pages. Before you continue with the tutorial, take a look at their documentation to choose your profile page theme.


  1. Choose a picture or logo you want to include on your profile page
  2. Save the image in the website project. I chose to create a new folder images with the file avatar.jpg in it.

R Studio

  1. Create a new postcard:

    postcards::create_postcard(file = "tmp.Rmd",
                                template = "jolla")
  2. Copy the yaml header from tmp.Rmd to the index.Rmd file and update with your personal information. My header now looks like this:

    title: "Sally A.M. Hogenboom"
    image: "images/avatar.jpg"
      - label: GitHub
        url: ""
      - label: Email
        url: ""
    site: distill::distill_website
  3. You can now remove the tmp.Rmd file again - we no longer need it!

  4. Re-build the website

    rmarkdown::render_site(encoding = 'UTF-8')



Text and figures are licensed under Creative Commons Attribution CC BY-NC-SA 4.0. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".