Modern Project Workflows - Part 1

class: center, middle, inverse, title-slide

# Modern Project Workflows - Part 1
## Becoming Proficient and Efficient with R and RStudio for Policy Work
<html>
<div style="float:left">

</div>
<hr color='#e2f1fc' size=1px width=1100px>
</html>
### <span style="color:#005f86; font-weight:500">Noorah Alhasan</span> | Policy Researcher & Doctoral Candidate, UT Austin - LBJ
### <span style="color:#005f86; font-weight:500">D. Cale Reeves</span> | Visiting Assistant Professor, Georgia Tech; Research Affiliate, UT Austin - LBJ
### <span style="color:#005f86; font-weight:500">Matt Worthington</span> | Sr. Project Manager for Data Initiatives, UT Austin - LBJ
### March 21, 2021

---

class: middle

<style>

.center2 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

</style>

## About this session

We will explore how to navigate Github and Rstudio as ecosystems and establish a basic workflow that includes an interaction between the two systems with a static webpage as a final product hosted on Netlify.

---
class: middle

## Prerequisites

1. GitHub account
2. GitHub desktop app
3. RStudio (desktop version)
4. A PDF file of your choice (example: Resume)

---
class:middle

## General workflow

In this session we will be adopting the following workflow (of so so many):

.center[
<img src="assets/images/workflow.png" width="800px" />
]

Disclaimer: This workflow places strong emphasis on RStudio in terms of content creation, whereas Github is mainly used for product sharing.

---

class:middle

## What is Rmarkdown?

- A type of authoring document that allows the user to conduct data analysis interactively with text.

- Benefits include but are not limited to:
  - Easily reproduce research analysis.
  - Easily convert documents into other formats such as PDF, Word, or HTML without the need to format anything manually.
  - Create other documents such as slides and interactive HTML documents (with Shiny)

## What is RStudio?

- RStudio is an open-source environment that integrates code execution data management along with all sorts of other features.
  - Think of it as all of MS Suite in one window without the need to copy/cut/paste from one software/window to another.

---
class: middle

## What is Git?

- Git is a version control system.
  - Version control: think of it as Google doc history
  - Repository: think of it as a folder on your computer that tracks its own history.

## What is GitHub?

- GitHub is an online hosting provider that is based on Git

## What is Netlify.app?

A company that offers hosting services for static websites.

---
class: middle

## A quick walk through RStudio

.center[
<img src="assets/images/step00.png" width="700px" />
]

---

## A quick walk through RStudio

.center[
<img src="assets/images/step00a.png" width="700px" />
]

---

## A quick walk through RStudio

.center[
<img src="assets/images/step00b.png" width="700px" />
]

---

## A quick walk through RStudio

.center[
<img src="assets/images/step00c.png" width="700px" />
]

---

## A quick walk through RStudio

.center[
<img src="assets/images/step00d.png" width="700px" />
]

---

## A quick walk through RStudio

.center[
<img src="assets/images/step00e.png" width="700px" />
]

---

## A quick walk through RStudio

.center[
<img src="assets/images/step00f.png" width="700px" />
]

---

## Step 0: Install `distill` package

.center[
<img src="assets/images/step00g.png" width="700px" />
]

---

## Step 1: Creating an R project

.center[
<img src="assets/images/step01a.png" width="700px" />
]

???

- Most of the time when we are creating a new project, we open a new file (Word, Excel, Google doc, etc.) on our computer (local machine to be fancy) and start creating right way.
- In this workshop, we want to show you a more systematic way of creating and engaging with a project that consists of many elements.
- Taking a step back, instead of opening a new file to start creating your product, you create a folder for that product.

- That's where R Projects and Github repositories come in.

- There are several ways to create an R Project:

1. As a brand new folder (aka directory) on your computer
  2. From an existing directory on you local machine
  3. From a remote repository (a previously created Github repository)
  
- For this session we will go with step 1

---

## Step 1: Creating an R project

.center[
<img src="assets/images/step01b.png" width="700px" />
]

---

## Step 1: Creating an R project

.center[
<img src="assets/images/step01c.png" width="700px" />
]

---

## Step 1: Creating an R project

.center[
<img src="assets/images/step01d.png" width="700px" />
]

---

## Step 1: Creating an R project

.center[
<img src="assets/images/step01e.png" width="700px" />
]

---

## Step 1: Creating an R project

.center[
<img src="assets/images/step01f.png" width="700px" />
]

---

## Step 2: Edit homepage

.center[
<img src="assets/images/step02.png" width="700px" />
]

---

## Step 3: Build website

.center[
<img src="assets/images/step03a.png" width="700px" />
]

---

## Step 4: Add a local repository

.center[
<img src="assets/images/step04a.png" width="750px" />
]

---

## Step 4: Add a local repository

.center[
<img src="assets/images/step04b.png" width="750px" />
]

---

## Step 4: Add a local repository

.center[
<img src="assets/images/step04c.png" width="750px" />
]

---

## Step 4: Add a local repository

.center[
<img src="assets/images/step04d.png" width="750px" />
]

---

## Step 5: Link to remote repository

.center[
<img src="assets/images/step05a.png" width="800px" />
]

---

## Step 5: Link to a remote repository

.center[
<img src="assets/images/step05b.png" width="800px" />
]

---

## Step 6: Log in using GitHub account

.center[
<img src="assets/images/step06a.png" width="800px" />
]

---

## Step 6: Log in using GitHub account

.center[
<img src="assets/images/step06b.png" width="800px" />
]

---

## Step 6: Log in using GitHub account

.center[
<img src="assets/images/step06c.png" width="800px" />
]

---

## Step 7: "New site from Git"

.center[
<img src="assets/images/step07a.png" width="800px" />
]

---

## Step 7: "New site from Git"

.center[
<img src="assets/images/step07b.png" width="800px" />
]

---

## Step 8: Configure Netlify on GitHub

.center[
<img src="assets/images/step08a.png" width="800px" />
]

---

## Step 8: Configure Netlify on GitHub

.center[
<img src="assets/images/step08b.png" width="600px" />
]

---

## Step 8: Configure Netlify on GitHub

.center[
<img src="assets/images/step08c.png" width="600px" />
]

---

## Step 8: Configure Netlify on GitHub

.center[
<img src="assets/images/step08d.png" width="600px" />
]

---

## Step 9: Add GitHub repository

.center[
<img src="assets/images/step09.png" width="600px" />
]

---

## Step 9: Add GitHub repository

.center[
<img src="assets/images/step09b.png" width="500px" />
]

---

## Step 9: Add GitHub repository

.center[
<img src="assets/images/step09a.png" width="500px" />
]

---

## Step 9: Add GitHub repository

.center[
<img src="assets/images/step09c.png" width="500px" />
]

---

## Step 10: Change website name (optional)

.center[
<img src="assets/images/step10a.png" width="700px" />
]

---

## Step 10: Change website name (optional)

.center[
<img src="assets/images/step10b.png" width="700px" />
]

---

## Step 10: Change website name (optional)

.center[
<img src="assets/images/step10c.png" width="700px" />
]

---

## Add PDF file to new website folder

.center[
<img src="assets/images/step11a.png" width="700px" />
]

---

## Add PDF file to new website folder

.center[
<img src="assets/images/step11b.png" width="700px" />
]

---

## Edit "_site.yml"

.center[
<img src="assets/images/step12a.png" width="700px" />
]

---

## Build website in RStudio

.center[
<img src="assets/images/step12b.png" width="700px" />
]

---

## Build website in RStudio

.center[
<img src="assets/images/step12c.png" width="700px" />
]

---

## Commit new changes on GitHub desktop

.center[
<img src="assets/images/step13.png" width="800px" />
]

---

## Commit new changes on GitHub desktop

.center[
<img src="assets/images/step13a.png" width="800px" />
]

---

## Push new changes to GitHub online

.center[
<img src="assets/images/step13b.png" width="800px" />
]

---

## Refresh website

.center[
<img src="assets/images/step13c.png" width="700px" />
]

---

## Click on newly created tab

.center[
<img src="assets/images/step13d.png" width="700px" />
]

---

class: middle, center

# Questions?