Site icon R-bloggers

How I set up my first website (again)

R on notast

[This article was first published on R on notast, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

  • 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.

    Menu bar

    The menu bar is on the top of the site.

    Posting only on the menu bar

    To display a post only on the menu bar, include the following metadata in the YAML:

    • menu: main
    • sidebar: false

    Posting on home page and meunu bar

    To display a post both on the home page and the menu bar, include the following metadata in the YAML:

    menu:

    main:

    name: title to be shown on the menu bar

    weight: 10

    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.

    To leave a comment for the author, please follow the link and comment on their blog: R on notast.
    R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
    Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.