How I set up my first website (again)

R

Rebirth

A week ago, I created my first website using Hugo template, Tufte. Initially, I was eagar to write my posts using Tufte style but I had severeal difficulties with the template. Firstly, I could not display full RSS feeds. Having a website with full RSS feeds is a prerequisite to be on r-bloggers. Secondly, the tags did not work. When I was searching for Hugo themes used by websites created via blogdown, I noticed lots of individuals using the Academic theme. Though the theme was attractive and would have address issues I encountered with the Tufte theme, I wanted a less mainstream theme. That’s when I stumbled onto Sascha’s blog, where he used the theme called Mainroad. Below I will outline how I set up this website. You can refer to Sascha’s website for a detailed walkthrough though our steps are slightly different.

Basic Setup of the Site

Things to install

  1. Rstudio
  2. blogdown package
  3. Static site generator, Hugo, via blogdown::install_hugo()
  4. Git program
  5. Git Hub account
  6. Account with website publisher, Netlify. Link your Git Hub account to your Netlify account. Netlify will auto update your website everytime you push content into your Git Hub.

Genesis

I adapted the workflow recommended from blogdown’s e-book

  1. Create a new repository in Git Hub for your website.
  2. Create a New Project in Rstudio under Version Control. Use the above Git Hub repository.
  3. Type blogdown::new_site(theme = 'user/repo'). theme is any website theme from https://themes.gohugo.io/. user/repo is the GitHub username and GitHub repository of the selected theme. I’m using the Mainroad theme template from https://github.com/Vimux/Mainroad. The Mainroad theme requires Hugo verison 0.43. You can update your hugo version in Rstudio via blogdown::update_hugo(). When linking your GitHub with Netlify, ensure the Hugo verison is more than 0.43, otherwise Netlify will be unsuccessful in deploying your site.
  4. When the content is ready to be published, tick the staged box in the Git GUI. Then commit the stagged items. After which push the commited items into your GitHub repo. Your website via Netlify will be updated soon after items are pushed into your GitHub repo as you have previously link your netlify account with your GitHub repo. I had difficulty ticking the stagged boxes in the GUI and resorted to typing the Git command git add . instead. If you are unfamiliar with saving with Git, you can refer to jennybc’s site and atlassian’s site for help.

Partially Completed Content

When you return to your R project in the future, remember to select Sever Site under the Addins dropdown menu. This will allow you to preview how the edited website will appear when you save your changes.

Testing the theme

I’ve tested the following features on the Mainroad theme

  1. Headings
  2. Tables
  3. Non-static plots
  4. Menu bar

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The heading for level 5 and 6 looks similar.

Tables

knitr::kable(mtcars[1:6, 1:6], caption = 'A subset of mtcars.')
Table 1: A subset of mtcars.
mpg cyl disp hp drat wt
Mazda RX4 21.0 6 160 110 3.90 2.620
Mazda RX4 Wag 21.0 6 160 110 3.90 2.875
Datsun 710 22.8 4 108 93 3.85 2.320
Hornet 4 Drive 21.4 6 258 110 3.08 3.215
Hornet Sportabout 18.7 8 360 175 3.15 3.440
Valiant 18.1 6 225 105 2.76 3.460
Noted that the capti on is p ositio n on th e top of the table.


Non-static plot

plotly

p <- ggplot(iris, aes(x = Petal.Width, y = Petal.Length)) + 
  geom_point()

plotly::ggplotly(p)

gganimate

anim <- p + transition_states(Species,transition_length = 2, state_length = 1)

anim

Both dynamic plots plotly and gganimate work on Mainroad theme. Though the use of gganimate functions may affect the speed of building the website.

Optional Setups

After establishing the basics of the websites and testing some features of theme, I enabled additional features to the website such as:

  1. Disqus
  2. Full RSS feeds

Disqus

  1. Set up a Disqus account.
  2. Install Disqus. Unfortunately, Hugo does not have a simple plugin to integrate Disqus. You need to manually edit some files to install Disqus on Hugo.
  3. The line disqusShortname is at the top of config.toml for the Mainroad theme.

Full RSS feeds

  1. Create a .xml file under ’themes/Mainroad/layouts/_default’. Name the file “rss.xml”. I wasn’t sure how to create an .xml file so I copied an .xml file from the ‘public’ folder and renamed it. Then, I deleted all the scripts to derive a blank .xml file.
  2. Furnish the blank “rss.xml” file with Hugo’s embedded rss.xml code. Replace summary feed script {{ .Summary | html }} with full content script {{ .Content | html }}.
  3. Update baseurl at the top of config.toml with your website’s URL address.
  4. Test if your website has full content RSS feeds with https://validator.w3.org/feed/check.cgi or https://simplepie.org/demo/

Conclusion

Looks like I successed in ticking off a few boxes in my 2019 new year’s resolution such as learning about GitHub, setting a blog to document my data science learning journey. I’m looking forward to posting more content in the near future. The features I intended for my site was implemented successfully with the Mainroad theme so I don’t think I will change the theme any time.