Individual Web portfolio

Due by 11:59 PM on Tuesday, September 21, 2021

Overview

Besides having a Facebook, Instagram, LinkedIn, etc. accounts, this project is about building your own presence in the web where you tell the world who you are and show them examples of your work.

Building your own online presence is useful for a number of reasons, such as

  1. It is useful for recruiting purposes, as you can easily point someone to your portfolio website
  2. You participate in the wider data science/ R community
  3. It builds discipline of working on your code and making sure it is reproducible, easy to understand, and share
  4. You learn how to use Github along the way

You do not have to know much about HTML, you just have to invest some time on learning how to set up an account/repo at and working with Github, learning how the blogdown package works with Hugo, and link everything to Netlify

Sign up for GitHub and Netlify accounts

First, you need to have a Github account and set up Github to work with R.

Make sure you work through the first 13 chapters of Happy Git with R. It seems like a lot, but it goes fairly fast.

Netlify uses Hugo, an engine to render, or transform, your HTML webpage. If you connect your Github account to Netlify, then every time you push changes to Github, Netlify will automatically update your website to the latest version. You also have the option of manually deploying your site.

set up a new repository in Github, named my_website

Make sure you check to make your repository Public, and Initialize this repository with a README.

Once you do these, you will have an empty repo, which should look like this

If you click on the green Code Button, you can copy the repo’s address so you can paste it in the next step to clone your repo inside RStudio.

Clone the new GitHub repository to your computer via RStudio

In RStudio, start a new Project:

  • Accept the default project directory name, e.g. my_website, which coincides with the GitHub repo name.
  • Notice where (i.e., which folder/directory) the Project is saved locally. A common mistake is to have no idea where you are saving files or what your working directory is.
  • Click Create Project.

Install blogdown and hugo in RStudio

You can install the blogdown package through the Packages pane, or by using

install.packages("blogdown")

Once installed, you need to load the library and then install_hugo() to actually get the hugo engine.

library(blogdown)
blogdown::install_hugo()

Create a new site by choosing a hugo theme

While inside our RStudio project, we can now download the theme and a sample website. Hugo comes with many different themes. We have seen a portfolio website by Isabella Benabaye that uses the Academic Theme for Hugo; so does the one from Benjamin Wolfe.

We will use theme theme Forty: A portfolio/blog website built for companies or personal freelancers and set up a sample website. To do this, copy/paste the following code in the console and wait a few minutes until everything is downloaded and set up.

blogdown::new_site(theme = "MarcusVirg/forty",
          sample = TRUE,
          theme_example = TRUE,
          empty_dirs = TRUE,
          to_yaml = TRUE)

Once everything loads, we have our website which we can see at the right bottom part, in the Viewer tab. You can even click the rightmost of the three little buttons and open up the website within a new browser

You do not need to limit yourself to the Theme Forty; there are many Hugo themes you can choose from, e.g., choose the Personal Web Theme

Before we proceed, let us have a look at the right part of RStudio:

  • Select the Git tab in the upper window and
  • Select the Files tab in the lower window

You should be able to see the following if you used Forty

The Git tab at the top contains all the changes that Git is tracking, whereas at the bottom, we can see under Files all the files and directories that were downloaded and set up for our website. By default, hugo generates a public directory which is what you publish as your completed website

You should never change anything within the public directory.

Customise your site

Most of the changes we make in setting up the website will be with TOML (Tom’s Obvious, Minimal Language) files. If you notice at the root directory there are two toml files - config.yaml and netlify.toml

Change config.yaml

You can change pretty much everything with this file, but let us start with the basics:

  • Line 3: change the title to, e.g., title: Portfolio website for Kostis Christodoulou
  • Line 13: Add your real name and short description
  • Lines 11-12. If you don’t want a subtitle, comment out that line with a hashtag # – Do not delete stuff, just comment it out
  • Line 15-30: Change your contact details: address (lines 17-19), email (line 24), phone (line 28)
  • Line 37 onwards: Change what appears at the footer (bottom) of each webpage. If there is something you do not want to add, just comment it out with hashtags #
  • Line 44 onward: Change the social media links to correspond to your own accounts. If you don’t want something, comment it out with a hashtag #– Do not delete stuff, just comment it out.
  • Line 62 onwards: navigation
    • When a user clicks on the menu, there are four choices, defined in lines 70, 72, 74, 76. If you only want to keep, e.g, two choices, comment out with # everything from lines 74-77
    • BY default, we also get two buttons in lines 63-68.
  • Line 81 onwards: This is where you define six tiles that appear on your website– these could be six blog posts, six projects, or whatever you like. Let us look at the first one in detail:
    • Line 86: title: Aliquam – this is the title of your tile shown in larger font size
    • Line 85: subtitle: Ipsum Dolor Sit Amet – a subtitle, with smaller font size
    • Line 84: image: pic01.jpg - what image do you wish to use as background– you can find them and change them, in the themes\forty\static\img directory
    • Line 86: url: blogs/aliquam - address with directory that the particular tile links to

Change netlify.toml

The netlify.toml file is what automates the rendering of your website anytime you commit and push changes to GitHub.

First, you have to check the version of hugo you are running– you can find this by typing in the console blogdown::hugo_version(). As of the writing of this in June 2021, the latest version of hugo is 0.83.1. Copy/paste the code below so your netlify.toml file contains just the following

[build] 
  publish = "public"
  command = "hugo"

[build.environment]
  HUGO_VERSION = "0.83.1"
  HUGO_ENABLEGITINFO = "true"

[context.production.environment]
  HUGO_ENV = "production"
  
[context.branch-deploy.environment]
  HUGO_VERSION = "0.83.1"

[context.deploy-preview.environment]
  HUGO_VERSION = "0.83.1"

Publishing your website

Manual deployment

You could deploy your website manually, without connecting to GitHub, by dragging and dropping the folder public that contains your rendered website in the lower part.

Once you drag and drop your public folder, Netlify will build the website and come back with a unique name/ address– when I tried it, my website was named compassionate-galileo-051845

Click on Domain Settings> Options>Edit site name

Final changes to config.toml

Once you change your domain name to something that makes more sense, then you need to revisit the config.toml file and change line 2 to the correct link, with a slash / at the end. In my case, I used

baseURL = "https://kostis-portfolio.netlify.app/"

Adding your own projects, as knitted Rmd Files

Any content you create and want to upload on your website, has to be added under the content folder. Let us say you have worked on an assignment or a dataset, have created a brilliant analysis you are proud of and want to show the world.

Create my_website/content/projects

The first thing would be to create a new folder called projects, e.g., my_website/content/projects. Under this folder, you can add multiple folders, e.g., project1, project2, etc. and within each of them you need an index.Rmd file. Your Rmd can as usual contain text and R code and you do not need to knit it, as Hugo will automatically knit it, create the HTML page, etc.

Change images for tiles

You can change the images that appear in the tiles of the forty theme and use whatever you like. You need to change e.g., line 97 of the config.toml file, to refer to the folder where you have the image. You save images under static/img/projects, and then your line 97, or wherever you define images for tiles, would become

title = "My Project 1 title"
subtitle = "What is the question I address?"
image = "projects/project1_image.png"
url = "projects/project1"

What kind of projects/posts should I add to my portfolio website?

This is entirely up to you: work on something that you will enjoy sharing with others. Besides the articles contained in the sample portfolio projects, here is a nice post on visualising Tour De France data in R

Deliverables

There are a number of steps involved in getting your website up and running and as such there are two deliverables; one in setting everything up (github, netlify, hugo) and then the actual website with your own content.

Setting everything up

  1. Create your own GitHub account, and please use a name appropriate for a professional profile that you can share with job applications, etc.
  2. Once you have a Github account, sign up for an account at https://app.netlify.com/signup using your Github account
  3. Create a new public repo for your portfolio website & initialize it with a “readme” file.
  4. Turn your repo into a default website, using the steps outlined earlier - please change your name, email address, etc. Modify content if you like, but for now it’s fine to use the theme content provided

Now that you managed to set up your website with the default content, please share with the class its address, etc.

  1. Find kostis-christodoulou in GitHub and locate the gitHub-practice-am01 class repo
  2. Click on README.md and then edit the README by clicking on the pencil icon in the upper right
  3. Add a row in the table below with your information, using the first row as a template: Add your Name, Study Group, Github ID, url for Github Repo that contains portfolio website, and portfolio website address. Also, please ensure the URL link works (e.g., wrap url in < and > to activate links to website)
  4. commit your changes and submit a pull request
  • write a descriptive commit message (e.g. added Kostis Christodoulou to class table)
  • click green button “Propose file change” & start pull request

Important: Please note that your entry will NOT appear on the class table right away. Once you submit the pull request the owner of the repo (me) needs to approve and merge it into the “master” before your entry will appear in the class table on the website.

Finalised website with your own content

Once you set everything up, you need to add some of your own work as blog posts. You can use any of the examples/exercises you have worked on. Make sure your code is easy to read, your graphs look nicer than the standard ggplot default graphs, you have used titles, correct labelling, provide links to sources, etc.

Further resources

Last updated on September 1, 2021