References

1 Blogdown and Hugo

blogdown is an R package that allows us to create websites using R Markdown and Hugo which is one of the most popular open-source static site generators.

Hugo themes: https://themes.gohugo.io/

2 Creating a website with blogdown

install.packages("blogdown")

In RStudio: File > New Project > New Directory > Website using blogdown

Directory name: mywebsite

Hugo theme: devcows/hugo-universal-theme

blogdown::build_site()
blogdown::serve_site()
  • config.yaml or config.toml controls the overall website look
  • content contains the content of the website
  • static contains images and other documents that we want to put in our website
  • themes includes the Hugo themes installed
  • public is the folder that contains the finished website. This is the folder we will place online

2.1 Customize config.yaml

baseurl: https://<user_name>.github.io/<repo_name>

2.2 Adding blog posts

To create a blogpost we need to create an .Rmd file: YYYY-MM_DD-nameblogpost.Rmd in content/blog. Images of the plot need to be included in folder static/img/blogimg.

We can include images with <img src="/img/blogimg/image.png" width="100%">.

We can also include images with knitr::include_graphics("img/blogimg/image.png") but when we execute build() we get errros because knitr::include_graphics() cannot find files.

To solve this issue we need to add images as knitr::include_graphics("image.png", error = FALSE) or at the beginning of the document write options(knitr.graphics.error = FALSE). This is explained here: https://community.rstudio.com/t/knittr-include-graphics-image-png-cannot-find-files/82959/2

3 Uploading website to GitHub Pages

3.1 Create a repository in GitHub

In GitHub, create a repository with name <user_name>.github.io

Copy SSH git@github.com:Paula-Moraga/Paula-Moraga.github.io.git

3.2 Push public folder of website to GitHub

In Terminal

cd C:/Paula-Moraga.github.io/public
git init
git add .
git commit -m "Init blogdown site"
git branch -M main

git remote add origin git@github.com:Paula-Moraga/Paula-Moraga.github.io.git

git push -u origin main

3.3 GitHub Pages

In GitHub, go to Settings, Pages, select main, select /root, and click on Save.

Website will appear at https://<user_name>.github.io/<repo_name>

We can also add a custom domain that allows us to serve our site from a domain other than <user-name.github.io>. For example www.paulamoraga.com.