L Webpages
In this tutorial, you will learn how to create a simple webpage using R Markdown, link multiple pages, and style your content using css.
L.1 Create a webpage
L.1.1 Create a project
- Choose
New Project...from theFilemenu (don't save any workspaces) - Choose
New Directory>Simple R Markdown Website - Set your project name to "mywebpage"
L.1.2 Site header
This is where you can set options like whether to show a table of contents and what the navigation bar will look like. We'll edit this later to add a section menu.
Open the file
_site.yml-
Replace the text with the following:
name: "mywebpage" author: "YOUR NAME" output_dir: "docs" output: html_document: self_contained: no theme: version: 4 bootswatch: yeti navbar: title: "My First Webpage" left: - text: "Home" href: index.html - text: "About" href: about.html Save the file (do not change the name)
L.1.3 Edit the pages
Edit the text in the index.Rmd and about.Rmd pages. You can use R markdown, including code chunks.
L.1.4 Render the site
In the upper right "Build" pane, click on the "Build website" hammer icon. This will render the website and automatically open it in a browser window. Alternatively, type the following into the Console pane:
browseURL(rmarkdown::render_site(encoding = 'UTF-8'))If you accidentally close the website and want to look at it again, you don't have to re-render it. Click on the docs directory in the Files tab of the lower right pane, then click on index.html and choose View in Web Browser
L.2 Add pages
- Create a new .Rmd file for each webpage
- Add content to the webpages using R Markdown
- Re-render the site
If you include linked content like image files, make sure they are copied to your main project directory and linked using relative paths.
To get your webpage online, copy the contents of the docs directory to a web server. If you don't have access to a web server, you can make free websites using a GitHub repository and GitHub Pages).
L.3 Styles
You can change the appearance of your website by changing the theme in the _site.yml file (see Appendix H), but the instructions below will help you to customise things even further.
L.3.1 Add custom styles
You can add a custom style sheet (a document that determines how each element of your website should look) by adding the line css: style.css under html_document: in the _site.yml file.
output:
html_document:
self_contained: no
theme:
version: 4
bootswatch: readable
css: style.cssThen you need to create a file named style.css and add your custom styles there. The web has thousands of guides to CSS, but codeacademy has great interactive tutorials for learning html, css, and even more advanced web coding like javascript.
However, the basics of css are easy to learn and it's best to just start playing around with it. Add the following text to your style.css file and re-render the website.
L.3.2 Change global fonts and colours
body {
font-size: 2em;
font-family: "Times New Roman";
color: white;
background-color: #660000;
}This will make the text on your website larger, a different font, and change the text and background colours.
The theme you're using might have css that blocks the styles you're trying to change. You can add !important before the end colon to override that.
L.3.3 Change certain elements
Maybe you only want to change the font colour for your headings, not the rest of the text. You can apply a style to a specific element type by specifying the element name before the curly brackets.
h1, h2, h3 {
text-align: center;
color: hsl(0, 100%, 20%);
}
h3 {
font-style: italic;
}
p {
border: 1px solid green;
padding: 10px;
line-height: 2;
}
ul {
border: 3px dotted red;
border-radius: 10px;
padding: 10px 30px;
}