How I Built This Website

Keren Xu

2018/03/17

This website was built through Hugo and blogdown, using XMin Hugo theme designed by Yihui Xie. The source code is on Github. Happy hacking!

I was unfamiliar with version control before starting to build this website. The article Excuse me, do you have a moment to talk about version control? gives a clarification about how git and github can contribute to the version control and facilitate the collaboration.

Installation

Install R and RStudio: I have been using RStudio for almost 2 years. I took an R class taught by David Lucero. He also has an awesome lecture about RMarkdown.

The second step is to open a Github account if you do not have one.

Install Git: Please refer to here, which gives a clear instruction on how to install Git. Please also introduce yourself to Git.

Install blogdown package in R: Type the following command in the R console: install.packages("blogdown").

Install Hugo: Hogo is a static site generator. Please use the following code in the R console: blogdown::install_hugo().

The chapter of installation in blogdown: Creating Websites with R Markdown gives a notification for macOS users.

For macOS users, install_hugo() uses the package manager Homebrew (https://brew.sh) if it has already been installed, otherwise it just downloads the Hugo binary directly.

Please remember which Hugo version you have just downloaded, because the version number will have to be used later for the website deployment.

After you opened a Github account, installed R, RStudio, Git and Hugo, it is the time to connect RStudio to Git and Github.

Please refer to the chapter: Connect RStudio to Git and GitHub

Begin to build a new website

Open a new repository in Github, and clone this repository to your local drive, so that you can make modifications in R.

Take my repo: XUKEREN/KERENXU as an example:

Click the green button: Clone or download, and then copy the link to your clipboard.

Create a new project in RStudio by selecting file → new project → version control → git. Then you will see a window like this:

Fill in the Repository URL with the URL that you just copied from Github.

Please create a directory name. Now you have cloned the project to your local drive.

Please use the following code in the R console:

You may need to use this code to update Hugo at some point: blogdown::update_hugo()

Select a theme: blogdown::new_site(theme = "yihui/hugo-xmin")

Website https://themes.gohugo.io/ offers plenty of choices.

Then you will find out that there are lots of files in your local repo folder. Make your own changes to these files to personalize your website.

Finally, please commit and push your changes to Github.

Deployment

I chose Netlify to deploy the website. There are some other choices also.

Use command=hugo, public directory=public, Key=HUGO_VERSION, and value=the version number you recorded before.

There are plenty of ways for you to create a personalized domain name. I chose a domain name ***.rbind.io. Open a new issue here to request your rbind.io domain.

Enjoy your website!


References: