3 Session 1: Build a simple website with Distill

3.1 To do before the workshop

Complete all the steps in the prerequisites section.
Decide if you want to buy a domain name (see appendix). Buying a domain name is totally optional, and you don’t have to decide now. But, if you know you want to, you might as well get set up now.
Decide what links to external things you want to share on your website. Have them easily accessible to copy and paste. GitHub? LinkedIn? Twitter?
Choose a profile picture for your website. A headshot with a simple background is best. If you don’t have one/don’t want to show a photo, you may want to find some other form of an avatar or placeholder picture. Have the PNG or JPEG easily available to copy to the file you’ll need.
Download the R Markdown cheat sheet and pay special attention to the ‘Pandoc’s Markdown’ section on the lefthand side of the second page.
Install the below R packages. I.e., copy and paste the below code into your R console and run it. If you’re not sure what this means or how to do it, come talk to use during a TidyTuesday and Talk session (Tuesdays, from 2:00 to 3:00 p.m. ET, on Zoom, see the Events list)

install.packages('postcards') # for landing page
install.packages('distill') # for multipage site
install.packages('usethis') # for easy connection to Git and GitHub

3.1.1 Thank you, Rohan!

Major credit to Prof. Rohan Alexander for his teaching notes about making a website. You can find them at: https://www.tellingstorieswithdata.com/interactive-communication.html#making-a-website

His personal website is also made with distill, https://rohanalexander.com/.

3.2 Workshop instructions

3.2.1 Landing page with `postcards`

Let’s start with the most basic thing we can do, create a landing page with a brief bio and some key links. It is a bit like a business card for the digital age.

This page can later become the home page of your website, or you might find you want to do something more customized.

Make sure you have installed packages you needed to.
Create a new R project using the postcard template:
1. ‘File -> New Project -> New Directory -> Postcards Website.’.
2. Choose a sensible location for this project to live on your computer. I’d recommend just calling this something like ‘task1’.
3. Pick a theme, I’d recommend trying ‘trestles’ for now, but you can see all the different ‘looks’ here (scroll down).
4. Choose ‘Open in new session’, just to be safe.
Run file.create('.nojekyll') in your console. It will later tell GitHub something about how not to build your site.
Open the ‘index.Rmd’ file and Knit it to View what it looks like.
Change the title to your name, add your photo to the folder you’re working in and change the image to that. Update the links with whatever you want to include. Update the text below the YAML. You might like to use the headings “Education” and “Projects” if you’re likely to stick with a one-page site.
Set up Git and a GitHub repo. Commit and push. There are quite a few ways to do this (see Happy Git with R to GitHub with the help of the usethis package.
1. In your console, run usethis::use_git() .
  1. You’ll be asked if it is okay to commit your uncommitted files. Read the options and enter the number for ‘Yes’.
  2. You’ll then be asked about restarting so the Git panel can be available. Choose to restart.
2. If you configured your GitHub Personal Access Token (PAT) (see Chapter 10 of Happy Git with R: Cache credentials for HTTPS) you can run usethis::use_github() in your console to set up and push to a repo of the same name as the folder you set up (e.g. ‘task1’). You’ll be able to delete this later once your website has taken it’s final form.
3. GitHub should open in your browser. If not, navigate to your GitHub repo for the site and go Settings (top horizontal menu) and then Pages (vertical menus on left)
4. Under source, change from None to master (or main if that is what your branch is called) and change /(root) to /docs and click save.
Make a change and repush to GitHub using the terminal tab! (Update the commit message.) Or use the Git pane, or however else you’ve learned to set yourself up.

git status
git add -A
git commit -m "look at this hopefully meaningful message"
git push

3.2.1.1 Example

I made the ISSC a landing page. You can view it at https://uoft-doss-issc.github.io/ and the code is available on GitHub.

3.2.2 Multipage site

Make sure you have installed packages you needed to.
Create a new R project using the distill website template:
1. ‘File -> New Project -> New Directory -> Distill Website.’.
2. Choose a sensible location for this project to live on your computer. I’d recommend just calling this something like ‘task2’ for now.
3. Tick ‘Configure for GitHub pages’.
4. Choose ‘Open in new session’, just to be safe.
Navigate to the Build tab in the environment pane (usually the top right pane in your R Studio if you haven’t customized the layout) and click Build Website. This should create a pop-up that allows you to preview what the basic template builds.
Open the index.Rmd file you made in task 1 and copy the entire thing into the index.Rmd file in your current project.
Add this line to your YAML site: distill::distill_website for this newly transplanted index.Rmd. Doesn’t matter which line you put it on.
Now we’re going to start by exploring the _site.yml file. This is how you’ll set up the navigation bar for your website.

Start by updating the name, title and description. Only change the description on line 4 and keep the tab in front of the text. Wow, look at this creative example!

    name: "lizawebsite"
    title: "Liza Bolton"
    description: |
    Liza Bolton

Next, let’s add links to any social media or other platforms you want to promote. Don’t link social media or platforms you wouldn’t be comfortable with an employer seeing (and probably make those accounts private). This example is for GitHub. You can also do Twitter (`fa-twitter`) and LinkedIn (`fa-linkedin`) and probably some others.

    - icon: fa fa-github
      href: https://github.com/elb0

Want to make it easy to email you? Add your email address and a email icon or cute paper plane icon (`fa-paper-plane`) to the navigation bar. Or you could add these as buttons under your picture if you’d prefer.

   - icon: fa fa-envelope
     href: mailto:liza.bolton@utoronto.ca

Let’s create a Projects page. Run this code in your console: distill::create_article("projects"). This will create a new Rmd call projects.Rmd. Update it, Knit it and then we’ll add it to the _site.yml and build the site again.
1. Want a table of contents? Update your YAML.
```
output:
    distill::distill_article:
        toc: true
        toc_depth: 3
```
Next, we’re going to create a CV page. You can either have your CV as a PDF and set it up to open directly or create a new page with your CV information.
1. If you’re creating a page, you’ll do basically the same things as the step above.
2. If you have a PDF of your CV, create a new folder called pdfs in your main file (you could call it something else too…) and put the PDF you want in there. Then we’ll add it to the navigation bar with:

    - text: "CV"  
      href: pdfs/mycv.pdf

(But update the file name.)

3.3 Other tips/resources

Need more help with Git/GitHub? Check out the DoSS Toolkit tutorial on it.
Add .DS_Store to your .gitignore file (if you’re on a Mac).
Here are the getting started notes from the distill team!
This blog post from the RStudio team is a great feature summary for the distill package.
Explore the Distillery Showcase of websites made with Distill! Some great inspiration here.

3.4 Setting up a custom domain

It can take a while (like, a day or so) to update the redirection between your GitHub page and your domain, so be prepared to be patient!

These instructions are quite good: https://richpauloo.github.io/2019-11-17-Linking-a-Custom-Domain-to-Github-Pages/

3.5 Post-workshop tasks

Check-in with yourself: What was fun about today? What did you learn? What did you find challenging? Did anything make you want to give up? If so, was why should you keep going with your website?
Fill out this short ‘ticket out the door’ survey.
Do a social media audit. What are you happy with being public and what is private to close friends/family, etc.
Continue to update your bio, links.
Make a site plan. What other pages would you like to add? Maybe a testimonials page?
Start thinking about what colours you like and/or what colours would help communicate your personality. Currently your site will have a blue navigation bar, but we will learn some basic ways to change the look and feel in our next session.
Add your website URL to your email signature, once you feel it is in an okay state of readiness. We’re also going to add more to it over the next few sessions so feel free to wait, too.