Website Development - Initial Creation with Blogdown

Date Posted:

In this post, I will explain how I created this website. This will include what resources I used, how I combined blogdown in R with GitHub Pages, and the various changes required for it to function correctly.

I will assume the user has already created a github.io page and linked GitHub and RStudio. I will assume familiarity with GitHub and R in general.

If the two assumptions are met, and the user does not spend too long choosing themes, the basic setup should not take more than 20 minutes. If the user decides to read through the documentation, it may take 1-3 hours.

General Resources/Introduction

There are countless ways of creating and maintaining websites, so why this one? For me, R integration was paramount, so I ended up with the blogdown package. The choice of GitHub Pages over other sites such as Netlify was simply because I wanted everything to stay integrated with GitHub.

blogdown is an incredible R Package that makes website creation and blogging extremely simple. The documentation (and guide) can be found at the following site: blogdown: Creating Websites with R Markdown. I highly recommend reading through it to understand exactly what is going on and what optional settings there are.

Additionally, I referenced the tutorial created by Emily C. Zabor for an example on GitHub integration.

Website creation

The following steps are essentially a summary of the two resources above, but condensed into a list format and made specific to RStudio/GitHub.

  1. Create an empty folder (I will name as Website) on your local computer.
  2. Create a new GitHub repo (not for the github.io page) that we will use to maintain the backend website creation and maintenance. I have this named as WebsiteBackend, although the previous resources refer to this repo as Source.
  3. Link it to RStudio, storing in the Webste folder.
  4. Find your desired Hugo Theme: https://themes.gohugo.io/, and locate the GitHub source (for example, for Coder it would be ‘luizdepra/hugo-coder’, the end of the URL).
  5. Run the following code in R: blogdown::new_site(theme = 'luizdepra/hugo-coder'), but with your desired theme.

Note: if there are additional files in the R Project, this code may not function as intended. Remove files as necessary.

  1. In config.toml add these two lines of code if they are not present:
  • ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown$", "_files$", "_cache$"]
  • publishDir = "../username.github.io", where ‘username’ refers your GitHub username.
  1. Connect the github.io repo to the Website folder.
  2. Enter the following R code into the github.io repo: file.create('.nojekyll').

Now, whenever you want to update the website or create/edit a post, do so in your WebsiteBackend repo. Afterwards, the output will appear in the username.github.io repo/website automatically.

To see how to create posts, see blogdown::serve_site() and blogdown::new_post() in section 1.3 of the documentation.