Create and publish a Website with R and Hugo

Sean Lee
5 min readFeb 9, 2021

--

Photo by Domenico Loia on Unsplash

Did you know that you can build a website in Rstudio? blogdown is an R package that allows you to create websites from R markdown files using Hugo, an open-source static site generator written in Go and known for being incredibly fast.

Before you start, I highly recommend reading the following:

Here is the list of steps on how to create winning websites.

  1. Create a GitHub repository
  2. Install blogdown and hugo
  3. Build a new website
  4. Deploy in Netlify

Step 1. Create a GitHub repository

First, you’ll need a GitHub account which is free. After you’ve signed up, the steps for creating a new repository are down below:

  1. Click the “New” button.

2. Create new repository name and short description.

3. The URL from this repo is what we will need to set up the project in RStudio. Copy and paste by pressing the button that the red arrow points to.

4. Open RStudio. Go to File → New Project and follow the steps below to get this project setup.

Paste the ‘Repository URL’ that we copied is the web address for our new repo.

Step 2. Install blogdown and hugo

  1. Install blogdown from your RStudio console. blogdown is available on CRAN, so we can install it using install.packages()
install.packages(“blogdown”)

2. Load the blogdown package.

library(blogdown)

3. Install hugo using the blogdown package helper function:

blogdown::install_hugo()

4. Update your version of Hugo (with some very verbose output).

blogdown::update_hugo()

5. Check the version of Hugo

blogdown::hugo_version()
[1] ‘0.80.0’

Step 3. Build a new website

Pick a theme. There are over 100 Hugo themes. Find an overview of some of the themes. Once you find what you like, follow the steps below:

1. Click Download button. (I chose Raditian Free Hugo Theme)

2. Drag and copy the red box.

3. Write the following function in your console in RStudio.

blogdown::new_site(theme = "radity/raditian-free-hugo-theme")

4. new_site() function will create a new site and generate the following output. There are four panes in RStudio. In viewer pane, go to Files and find config.yaml and click. It will show up in the source pane.

5. Also, open the file called homepage.yml from data folder. (The files and names depend on the theme, so find the files where you can add and change for your website.)

6. Start changing the info you want to add or change. To test if this new site is working, either write blogdown::serve_site() function in your console or click Addins in the red box on the top and choose Serve Site. Then, you will see the changes made in the viewer pane.

7. Let’s manage(push) changes with Git. I prefer working with Git via the command line (or the Terminal pane in RStudio).

First, $ git add *

Second, $ git commit -m "whatever comments you want to leave”

Lastly, $ git push

8. Check if everything is up-to-date from the repo.

Step 4. Deploy in Netlify

Now that all of our files are on GitHub, we need a way to convert these files into a website. Netlify is so easy and automates the process through GitHub.

  1. Go to Netlify.
  2. Click on the Sign Up button and sign up using your existing GitHub account (no need to create another account).
  3. Log in, and select: New site from Git Continuous Deployment: GitHub.
  4. After being authorized, Netlify will allow you to select from your existing GitHub repositories. You’ll pick the repo you’ve been working from with blogdown, then you’ll configure your build. This involves specifying two important things: the build command (find your HUGO_VERSION and specified hugo_0.19) and the publish directory (this should be public). Click on the Deploy site.

5. To change DNS (Domain Name Servers) configuration, go to Domain settingsDomain management → Click Options Edit site name. It will show as random_dns_name.netlify.com

At this point, you should be up and running with blogdown, GitHub, and Netlify. Congratulations! Now you know how to create and publish a Website with R. Thank you for reading and following the directions.

--

--

Sean Lee

Data Scientist | Artificial Intelligence Builder | Front End Developer