Image credit: Unsplash

A Data Analyst's Guide to Creating Your Personal Website with R

Forget Wix or WordPress, make use of what you already know to code your own site.

The Importance of Your Own Personal Site

The demand of data science jobs has been on the rise as well as the surge of applicants jumping into the bandwagon. With a Masters or PhD as most of the primary filter, HR managers will not hesitate to reject an applicant with an unimpressive CV.

A website showcasing your capabilities in handling data science or analytics projects is one great way to stand out from the rest of the applicants, especially if you do not have any advanced degree.

But hold on, I don't know HTML/CSS/JS to build a website

If you are reading this article, chances are you interested in data analytics or you are already dealing a lot with data management, and in no particular way are you going to be dealing with HTML/CSS codes.

No matter whether you work as a data analyst or data scientist, we can all agree with one thing: our general line of work involves understanding the business problem, extracting necessary data with custom SQL queries, cleaning and validating them with Python/R, and finally visualize them or perform some sort of prediction to enhance operational business decisions.

Often times this process is what we call modelling-level analytics. This is a basic requirement for most companies are looking for when it comes to transforming their data into actionable insights. In this case, you would probably deal with very few files and scripts to extract and process the data.

However, when we think of implementing data science on-the-go, such as Youtube's recommender systems, we need to start looking into collaborative and production-level scripting. This is where file management and version control becomes very important when you work with a team of data scientists who share their load of work on a given project.

When you build websites (and I'm not talking about high-level site builders like Wix or WordPress), you will be dealing with a lot of HTML/CSS files that will be stored in either your computer or a Github repository for deployment. This is a great way to get used to production-level scripting.

And here's the good news.

You don't need to know any HTML/CSS to build website with what many of us are familiar with, R programming or Python. However, certain layout customization may require the user to venture a little into HTML and modify a couple lines of code.

What You will Learn

  1. Basic Git and Github navigation
  2. Basic RStudio IDE (Heck you don't even need to touch any R codes)
  3. Creating content with a pre-defined theme (This is the hard, but manageable part once you get used to it)
  4. Website deployment and maintenance

Before I start, I must give credit where credit is due. Before I built my own website, I never thought it would be possible to do it in R because well, R isn't designed to build websites. I was simply reading through a couple of articles in TDS and I chanced upon this article written by Junye who built one using R.

I took a couple of pointers from his tutorial but I have built my site with a slightly different workflow:

website_building_flowchart

Keep in mind the entire workflow process and you should be able to create a website of your own.

Step 1–1: Setting up R, RStudio and your Project

If you don't have RStudio in your desktop yet, it's very easy and intuitive to get it installed into your system just like most other programs. But don't forget to download the R GUI prior to getting the IDE. You can get the software here

Once you have RStudio up and running, head to the console tab and enter the following code:

#To install blogdown package
install.packages("blogdown")

#To install hugo within blogdown
blogdown::install_hugo()

After that, go to the top left corner of the IDE and click the following:

File → New Project → New Directory → Website using blogdown

new-project-hugo choose-hugo-theme

In this window, you can specify your Directory Name, I called it ‘GitProjects’. Next you want to choose a hugo theme from here

In the Hugo theme textbox, you need to specify the Github repository of the theme you chose, so for example, the above image links to github.com**/yihui/hugo-lithium.**

Once that is done, the ‘GitProjects’ folder will be populated with the theme source code and the RProject executable file. This will be manually transferred to the cloned Github repository folder later.

Step 1–2: Setting up your Github Respository and integrating it with Git

There is no point for me to repeat a task that I picked up from someone else. You can follow the guide here

In summary, you will need a Github repository set up and Git Bash terminal installed to have a seamless pipeline of source code changes from your desktop to your repository.

There is something I did a little differently though. Instead of typing in the command:

mkdir ~/Desktop/projects

I already had the directory where I would like to clone the repository in under the folder ‘GitProjects’ so I typed the following in the Git Bash terminal:

cd ~/Desktop/"Personal Stuff"/GitProjects

After that I cloned my repository using the link supplied from my new Github repository.

cd_git

Once that is done, a new folder with the same name as your Github repository will appear in the ‘GitProjects’ folder.

But remember I had all the theme source code and RProject file in the same folder, move the entire thing into the newly created folder, my Github folder was called “mywebsite”, after successfully moving everything over, go ahead and change directory into the new folder as shown below:

cd_git_2

You know you are connected to your Github repository when you see the (master) branch at the end of the directory.

At this point, you have successfully connected to Github with Git, but your newly imported files are yet to be recognized.

Step 2: Adding your Theme Source Code into your Github Repository

Right now you need to add the theme source code into your Github repository. Your local folder should look something like this:

folder_content

Go ahead and add all the files into your repository with the following command in your Git Bash terminal:

git add <foldername>

Certain files are not required to be added, but if they are, add them in your .gitignore file so that the website deployment engine does not apply them onto your website:

.Rproj.user
.Rhistory
.RData
.Ruserdata
public

Finally, you're now ready to start creating content for your site!

Step 3: Creating/Customizing Content and Layout

This is the hard part! Every theme should come with a documentation to navigate throughout the source code. You can type the following code in the Rstudio console to preview your site in the ‘Viewer’ tab within Rstudio:

blogdown::serve_site()

For beginners, the most popular theme with a comprehensive documentation and strong support from the community is the ‘Academic’ theme. It is a theme with great versatility for both CV-showcase and straight up personal blogging. In fact, you can check out the video below for a great walkthrough of the ‘Academic’ theme in Rstudio:

Do note that the video is a little bit outdated and certain codes are being placed on a different file. I picked this theme at first for practice but switched to another theme for a better layout afterwards. I won't go deep into the tutorial about content creation and layout customization as it should be clearly explained in the themes documentation.

Step 4: Commit your Changes and Push the Changes in your Repository

Once you are happy with minor changes, commit your changes into your Github repository with the following command in the Git Bash terminal:

git commit <foldername or filename> -m "Your update message here"

After you are happy with all the changes, enter the following code in the Git Bash terminal for the changes to occur in your Github repository:

git push

And that's it! All you have to do is re-enter these commands in your Git Bash terminal every time you make changes in your website within RStudio.

Step 5: Deploy your Website using Netlify

Netlify is a foolproof website deployment solution that automatically turns your files from your Github repository into a website.

netlify_deploy_website

Just make sure you are connected to the right repository and you are good to go. But before your deployment becomes successful, you need to set the right environment variable for Netlify to recognize the file structure.

To do this, go to your Netlify dashboard, go to Settings → Build & Deploy → Environment and set the following environment variables.

netlify_env_var

However, your hugo version may be different from mine. To check your hugo version, go back to RStudio and type the following command in console:

blogdown::hugo_version()

Final Step: Customizing Domain Name

The free domain name that comes with deployment is in the .netlify.com format. If you don't mind the subdomain hanging around, you can skip this step. Otherwise, you can register your domain name from a DNS provider such as NameCheap. For me, I stuck with Netlify because it was a cheaper option for a .com extension. But you should always do your research and find what is best for your site. You can read more about domain registration for your site here.

Summary

As you continuously update your site with Git and RStudio, your subsequent workflow should look like this:

workflow_2

As promised, for a basic website with a pre-defined theme, you don't need to know extensive knowledge about HTML/CSS/JS although it is helpful for you to do so in case you want to change fonts, reposition certain words and customize the colours.

For me (A Windows user), I always use my friendly “F12” button to inspect element and find the file responsible for that particular layout. This way I get to learn to read some HTML code and make certain modifications so that my site can look much more customized than it originally was.

Last but not least, I encourage you to make a small donation to the owner of the theme you chose. Some theme creators allow you to remove their name off the copyright logo as long as you make a donation for their theme so you can call your website your own creation. At the same time, it is a show of appreciation for the hard work they have put in so that your site can look beautiful.

Happy coding!

Bobby Muljono
Data Analyst

Just an average Joe with a passion in data science