Section 11 Static website

In this section we are going to learn about basic files skeleton for generating website with Rmarkdown and how to configure build tools in RStudio for building websites

11.1 Introduction

We are still going to continue writing Rmarkdown, except now each new website page, will be defined in new, stand alone .Rmd file. Since we are going to have multiple .Rmd file we will move our YAML header into stand alone file _site.yml.

The bear minimum and must have files for static website generation are:

• index.Rmd
• _site.yml

All other .Rmd files can have any name. Files that have leading underscore, treated differently and aren’t included into your final website.

Instead of using Knit button to generate HTML file, we instead going to be using “Build …” button, located in the “Environment, History, …” pane, under “Build” tab. Note that this tab may be missing and requires additional setting up.

11.2 Build tools setup

Let’s set up our build system by using menu options at the top of the screen as follows, after which you should see “Build” tab appearing

Build
 └── Configure Build Tools...
 
Project build tools: website

11.3 First three files

Let’s start generating an initial skeleton for our website. For that we will need to open few files and append some content into them.

You can either use menu drop down option to open a new .Rmd files, as described in the introduction as a “Text File” and then save as either .Rmd or .yml. Alternatively execute the following commands, in turn to open files for editing.

file.edit("index.Rmd")

Let’s append the following content into index.Rmd file

---
title: "Welcome to my website"
---

This is my very first website, Yay !!

file.edit("about.Rmd")

Let’s append the following content into about.Rmd file.

---
title: "About Me"
---

I am a keen bean, always lookiing for the next, best project to get my hands into. 
<br>
In this site I will talk about some of my project. I try my best to keep all of my code version with git and shared via GitHub platform

Feel free to get in touch

:)

file.edit("_site.yml")

Let’s add the following code into our _site.yml file. Note the new key, navbar for navigation bar, typically seats at the top of your website, or floats on the side somewhere. We won’t a lot of time to discuss navbar. It is however highly configurable, with lots of different options.

name: "my-website"
navbar:
  title: "My Website"
  left:
    - text: "Home"
      href: index.html
    - text: "About"
      href: about.html

After all of this initial setup let’s navigate to our “Build” tab and press “Build website”

11.4 Output directory name

The default location for you static website is in _site. You can host that directory on places like GitHub and have your own website - Yay !

We can change default location with the following YAML syntax, let’s add that in to our _site.yml and press “Build” again

output_dir: website

We might have to remove our previous _site folder

11.5 More content

Let’s our previous generated Rmarkdown report and presentation. Since this is a stand alone projectd and we are working on rstudio.cloud we aren’t able to copy those previous files to the current project (folder), we will leverage GitHub and download our files directly from it. In real life the easiest thing would be to copy them across from the previous project. Let’s execute the following command

download.file("https://serine.github.io/learning_rmarkdown/learning.Rmd", destfile = "learning.Rmd")

download.file("https://serine.github.io/learning_rmarkdown/presenting.Rmd", destfile = "presenting.Rmd")

Let’s now update our _site.yml to bundle new pages into our website. Add the following code to your configuration YAML file and press “Build website” button

name: "my-website"
navbar:
  title: "My Website"
  left:
    - text: "Home"
      href: index.html
    - text: "About"
      href: about.html
    - text: "Projects"
      icon: fa-archive
      menu:
        - text: "Rmarkdown report"
          href: learning.html
        - text: "IO slides presentation"
          href: presenting.html
        - text: "---------"