Website in R markdown#

Github Pages#

GitHub Pages hosts a static site (i.e., delivered to your browser as it is stored, does not require web applications in the server ) hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. https://pages.github.com/

Make a website on github pages#

  • Create a Github account: e.g. username gorkafraga

  • Create a new repository named: gorkafraga.github.io – This repository will contain your website

  • In the repository you can copy some basic html template or other files with the actual website. For example this one: https://github.com/imgios/minimalist. It contains the very basics: A index.html which you need to edit the content and the ‘assets’ folder with a subfolder ‘CSS’ containing details about they style, and the subfolder ‘images’ where you can put the main picture and icon. Alternatively , there are applications that allow you to modify websites in simpler language using markdown, like Jekyll. Alternatively there are options in Rmarkdown

  • Now you have your personal website that anyone can see: gorkafraga.github.io

Build a web in R markdown#

There is a way of making a website with Rmarkdown so that you can simply edit markdown files in R studio, commit changes and push it to your github pages.
It will require some Rmarkdown files and a yml file with header specifications. The option ‘publish ‘ site in R studio will generate html files from your rmarkdown files. An example with instructions was retrieved from: https://crumplab.com/LabJournalWebsite/index.html

Install R and Rstudio with the package “Rmarkdown” installed ( make sure it is installed with dependencies: install.packages(“Rmarkdown”,dependencies = TRUE)

Reading content from files#

We can also have an external file, for example a table, with content that we will edit or update more often. Then in Rmarkdown we can just have some code to read and include the content in the site when we knit the R markdown or build the website.

In this example we a have an excel table with two columns: titles and content.

```{r, echo=FALSE, results='asis'}
child <- openxlsx::read.xlsx("mytable.xlsx")

# combine info from both columns
df <- as.data.frame(paste(child$title,'\n ',child$content))
colnames(df)[1] <-'text'

# Generate child
res <- lapply(df$text, function(x) {
   knitr::knit_child(text = c(
     '## `r x`'
   ), envir = environment(), quiet = TRUE)
 })
 cat(unlist(res), sep = '\n')
```.

Setting up the github page#

  1. Fork the example from the link and copy the files and folder into the labs’ repository “neuroling.github.io” https://neuroling.github.io/ .

  2. In the repository settings there should be an option to make it serve from the ‘Docs’ folder within that repository (that folder will contain the html files generated by markdown. This is what you need to access to when clicking in the neuroling.github.io link)

  3. Clone it into a local folder (not in a server or it will all be very slow). You will work locally with Rstudio and then use Github desktop to manage this and push changes later on.

Working on the R project#

  • In your local repository, go to the .Rproj file and open it in R studio. It will set your current work environment to within that folder and everything will be autosaved in that project. In R studio top right corner you should see you are working within this project. This is necessary to be able to ‘Build’ the web later.

  • Now you can modify the R markdown files representing each page in your site. For instance “Projects.Rmd” will be the “Projects” section in your website. To modify:

  • Edit text or R code chunks in Rmarkdown. You can use “Knit” to preview changes

  • Click on Build (tab near connections in the environment panel; only appears if you work within the Rproject). This will build the website

If you want to add a new page:

  • Create a new Rmd page within the project folder

  • Modify the _site.yml file (with notepad e.g) to point to the new file

Commit and Push#

Use Github desktop (or the command line) to Commit and push changes into your Github. The page should now be visible.

Linking your github page to your own domain (Cloudflare)#

  • Buy a domain (in Cloudflare for this example ). E.g., gorka.science

  • Go to your github repository gorkafraga.github.io and create a new file (in the same space as index.html) named CNAME (use caps). In the first and second line, write the domain: e.g., gorka.science and www.gorka.science

  • Go to Cloudflare website and log in :

  • Go to DNS and DNS management

  • Add a new record and choose type = CNAME, Name = gorka.science, Content = gorkafraga.github.io
    That’s it, now if you type in your browser gorka.science it will show the contain of gorkafraga.github.io