How to make this webpage

Sun, Feb 21, 2021 3-minute read


Motivation for Rmd.

https://rmarkdown.rstudio.com/gallery.html

The primary characteristics that make Rmd. convenient:

  • Simplicity

  • Code Blocks



Libraries Used

library(blogdown); library(magrittr)



Open the website project directory in RStudio

From RStudio: File -> Recent Projects

The R project will save environment variables from your last session, so everything will load up and ready to go.



Make a new new webpage

blogdown::new_post(title = "How to make this webpage", author = "Sean", ext = ".Rmd")


Add content…

Rmd cheatsheet



Code blocks

The HTML and CSS documents are generated from the Rmd. template by the blogdown package which depends upon the knitr package. knitr can execute and display blocks of code nested in the Rmd. document. R scripts can be executed in Rmd. by knitr, as well as other languages).

knitr::knit_engines$get() %>% names()
##  [1] "awk"         "bash"        "coffee"      "gawk"        "groovy"     
##  [6] "haskell"     "lein"        "mysql"       "node"        "octave"     
## [11] "perl"        "psql"        "Rscript"     "ruby"        "sas"        
## [16] "scala"       "sed"         "sh"          "stata"       "zsh"        
## [21] "asis"        "asy"         "block"       "block2"      "bslib"      
## [26] "c"           "cat"         "cc"          "comment"     "css"        
## [31] "dot"         "embed"       "fortran"     "fortran95"   "go"         
## [36] "highlight"   "js"          "julia"       "python"      "R"          
## [41] "Rcpp"        "sass"        "scss"        "sql"         "stan"       
## [46] "targets"     "tikz"        "verbatim"    "theorem"     "lemma"      
## [51] "corollary"   "proposition" "conjecture"  "definition"  "example"    
## [56] "exercise"    "hypothesis"  "proof"       "remark"      "solution"


These languages are available for syntax highlighting and execution in blogdown.

For block execution there are language specific dependencies that work with knitr.


This is what code blocks will look like in Rmd.

\```{r}  
#R Block  
\```  


\```{python}  
#Python Block  
\```  


\```{julia}  
#Julia Block  
\```  


\```  
#Default Block  
\```  


Inline code will look like this `r <code>` and can be executed by R. If you wish to only highlight without executing then make an inline block without ‘r’.

e.g. ` 1 + 2 ` ->becomes-> 1 + 2

e.g. `r 1 + 2` ->becomes-> 3

e.g. `r c(1,2,3) %>% mean()` ->becomes-> 2

e.g. `r colnames(PlantGrowth)` ->becomes-> weight, group

e.g. `r PlantGrowth$weight[PlantGrowth$group == "trt1"] %>% mean()` ->becomes-> 4.661



Code block options

Document-wide code block options are defined at the top of Rmd. documents.


Here is an example from this Rmd. document:

---
title: How to make this webpage
author: Sean D McAtee
date: '2021-02-21'
slug: []
categories: []
tags: []
Description: ''
Tags: []
Categories: []
DisableComments: no
---

Note: Normally Rmd. documents will contain an output: option. This is excluded when using blogdown.


Block options can be defined for specific blocks within the braces ({}) at the beginning of the block.

e.g. {r echo=TRUE, eval=FALSE, hold=TRUE, fig.asp=0.3}



HTML, CSS, and JS

The file that blogdown outputs is a single index.html file in the directory in the name of the webpage. There will also be modifications to some of the files in the site-wide directories.


It is possible to preserve HTML elements through Rmd. documents.




The spacing above was made with </br> </br> </br> written directly in the text of this .Rmd document.

JS

JavaScript can be executed in a code block.

$('.body').css('color', 'red')

CSS

CSS can also be included in code blocks.

body {
  color: red;
}



Add content & render changes

blogdown::serve_site()



Commit and push to GitHub!

Push your changes to the main repository branch (the one on GitHub) and see your changes.


git add .
git status
git commit -m "updated baseurl"
git push -u origin main