Lecture Video
Introduction
After spending the last few weeks creating a reproducible data project, we have finally reached the final stage of our project and are ready to embark on creating our final deliverable website.
The good news is that the bulk of our work is already done – all of the .MD output files that we created throughout the course will be utilized to create our web pages.
In the next few sections, we’ll walk through how to format these files to make their appearance on a GitHub Pages site seamless.
If you’d like to view a demo of the website we’ll be creating, checkout the following link: https://watts-college.github.io/paf-515-example-website/
GitHub Pages Website Creation
1. Download template
To begin, one (1) member of your team needs to download a GitHub Pages template.
A customized version of the Minimal Mistakes template has been created specifically for this course. This is the template that we will walk through in this code-through and therefore it is recommended for most groups.
You can download a zipped version of the template files to the resources folder of your team’s repository by clicking here: paf515_custom_minimal_mistakes_template.
However, if your team has extensive experience with Jekyll/GitHub Pages and/or website development and would like to work with custom files or a different template, you can check out the GitHub Pages section of the Final Project Guide.
2. Unzip template files and add to repository
Once the teammate in charge of downloading the template has completed the download and stored it in the resources folder of the team repository, they will then need to unzip it.
If you are the teammate completing the download and you’re unfamiliar with how to unzip files, you can check out the following links:
- 7zip: https://www.7-zip.org/
- Unzip on Windows: https://support.microsoft.com/en-us/windows/zip-and-unzip-files-f6dde0a7-0fec-8294-e1d3-703ed85e7ebc?
- Unzip on Mac: https://support.apple.com/guide/mac-help/zip-and-unzip-files-and-folders-on-mac-mchlp2528/mac
After your folder is unzipped, you should see the following sub-folders and files:
_data
_includes
_layouts
_sass
assets
docs
_config.yml
banner.js
evaluation_report.md
Gemfile
index.md
minimal-mistakes-jekyll.gemspec
package.json
package-lock.json
Rakefile
staticman.ymlYou will want to copy all of these contents and paste them into the main folder of your team repository. There may be a popup warning that the assets and docs folders will be replaced. This is fine as both of these folders should be empty.
3. Update _config.yml
Once you have your files stored in the main folder of your repo, you will want to open the _config.yml file and update the following lines:
Line 15
The example website uses the default skin and you’re welcome to use this for your report as well. However, if your team would like to select a different skin or customize elements of your website, checkout the section on skins within the Minimal Mistakes documentation: https://mmistakes.github.io/minimal-mistakes/docs/configuration/#skin
minimal_mistakes_skin : "default"
Line 19
A title has already been provided for the website, however if your team would like to make changes to it, this section will control the website title:
title : "The NMTC & LIHTC Programs and Community Social Vulnerability"Line 21
Similar to the title, this section controls the subtitle and can be updated if desired
subtitle : "An evaluation of the effectiveness of federal programs in the United States"Line 22
Update the name section to contain your Semester and Group Number:
name : "PAF 515 Spring 2024 Team 00"Line 107
Update the name section of the author profile to indicate your team members’ names. Though this is a comment, it serves as good documentation of who has worked on the project:
name : #"Courtney Stowers, Minnie Mouse, Mickey Mouse, Nala Lion, Sparky SunDevil"Line 108
Update the bio section with your team’s expected report date. This will appear on the left-hand side of the front page of your report website:
bio : "Report Date: 04/15/2024"Line 143
Update the URL to be the link to your team’s repository. This will provide a link to your team’s GitHub repo in the footer of the website.
url: "https://github.com/Watts-College/paf-515-example-website/"Once you’ve made the appropriate updates, save the _config.yml file.
4. Upload template files to GitHub
Once Steps 1-3 are complete, upload the template files to GitHub so all team members can begin working on their files.
Remember to commit to a branch to ensure there are no conflicts with main
5. Activate GitHub Pages
Now that the template files are uploaded, you now can navigate to your repository settings and select Pages.
Under Branch, select main and /root as displayed below and then select save. Your website will automatically start to build:
6. Update repository description and add license to repository
After your website begins to build, return to the main page of your repository, select the gear symbol next to About. Enter a brief description and select the tick to add your GitHub Pages website:
Once that is updated, refer to the Final Project Guide for instructions on how to add your license: https://r-class.github.io/cpp-528-example-repo/Final-Project-Guide.html#license
7. Add lab files to docs and update for website
Once the template files are uploaded, all team members will need to work on their individual files for the website.
In order to ensure the files on your machine are up-to-date, be sure to fetch from main first.
After fetching the files, you will want to navigate to the /docs folder. Here you will find the following files and folders:
imgs
middle_atlantic_division
mountain_division
pacific_division
south_atlantic_division
west_south_central_division
about.md
about_team.html
about_team.md
README.mdAll of the division sub-folders contain example files that you can explore, if you’d like. If not, feel free to delete their contents.
If your division is not one of the example folders, create a new folder in the same format with all lowercase letters your_division.
Next, add a README.md file in the same way you did in Lab 01 if you have a new folder OR update the README.md with your personal details if you’re using one of the pre-created example folders.
Copy markdown files
Once your division folder is set-up, you can begin adding the following files/folders from your /labs folder:
labs/wk01
From labs/wk01, copy your lab01.md file to your newly created docs/your_division folder.
labs/wk02
From labs/wk02, copy your lab02.md file to your newly created docs/your_division folder.
labs/wk03
From labs/wk03, copy your lab03.md file and imgs folder to your newly created docs/your_division folder.
labs/wk04
From labs/wk04, copy your lab04.md file and lab04_files folder (if it exists, if your report was self-contained you may not have this folder) to your newly created docs/your_division folder.
labs/wk05
From labs/wk05, copy your lab05.md file and lab05_files folder (if it exists, if your report was self-contained you may not have this folder) to your newly created docs/your_division folder.
labs/wk06
From labs/wk06, copy your lab06.md file to your newly created docs/your_division folder.
Update files for website
Once the markdown files for labs 01 - 06 are copied into your docs/your_division folder, you will then want to update them for the website.
Specifically, you will want to remove unnecessary YAML header information and tables of contents and update the YAML headers with website-template specific information:
Lab 01
Your Lab 01 header should change from something like the following:
---
title: "Lab 01 - Middle Atlantic Division"
author: "Courtney Stowers"
date: "2024-03-09"
output:
github_document:
toc: true
toc_depth: 3
preserve_yaml: true
rmdformats::downcute:
toc_depth: 3
self_contained: true
thumbnails: false
lightbox: true
gallery: false
highlight: "tango"
code_folding: show
always_allow_html: true
knit: (function(inputFile, encoding) {
rmarkdown::render(inputFile, encoding = encoding,
output_format = "all") })
---
Lab 01 - Middle Atlantic Division
================
Courtney Stowers
2024-03-09
- [Library](#library)
- [Data](#data)
- [Census Variable Data Dictionary](#census-variable-data-dictionary)
- [Division Population](#division-population)
To this header for the Minimal Mistakes Template:
Note that you will want your title to match exactly except for updating the [DIVISION] placeholder. Your name can remain the same, but you will need to comment out the date in your report to work with Jekyll
---
title: Introduction - [DIVISION]
author: "YOUR NAME"
#date: "2024-03-09"
layout: single
sidebar:
nav: "sidebar"
toc: true
---You can also update any titles/headers as you’d like, in addition to updating your text to make it more readable.
Lab 02
Lab 02 follows the same format as Lab 01:
Current:
---
title: "Lab 02 - Middle Atlantic Division"
author: "Courtney Stowers"
date: "2024-03-12"
output:
github_document:
toc: true
toc_depth: 3
preserve_yaml: true
rmdformats::downcute:
toc_depth: 3
self_contained: true
thumbnails: false
lightbox: true
gallery: false
highlight: "tango"
code_folding: show
always_allow_html: true
knit: (function(inputFile, encoding) {
rmarkdown::render(inputFile, encoding = encoding,
output_format = "all") })
---
Lab 02 - Middle Atlantic Division
================
Courtney Stowers
2024-03-12
- [Social Vulnerability in the Middle Atlantic
Division](#social-vulnerability-in-the-middle-atlantic-division)
- [Library](#library)
- [API Key and Variable Import](#api-key-and-variable-import)
- [Data](#data)
- [Data Wrangling](#data-wrangling)
- [Analysis](#analysis)
- [References](#references)Update:
---
title: "Social Vulnerability Index"
author: "YOUR NAME"
#date: "2024-03-12"
layout: single
sidebar:
nav: "sidebar"
toc: true
---Lab 03
Lab 03 follows the same format as Lab 01:
Current:
---
title: "Middle Atlantic Division SVI Infographics and Choropleth Map"
author: "Courtney Stowers"
date: "03/17/2024"
output:
github_document:
toc: true
toc_depth: 3
preserve_yaml: true
rmdformats::downcute:
toc_depth: 3
self_contained: false
thumbnails: false
lightbox: true
gallery: false
highlight: "tango"
code_folding: show
always_allow_html: true
knit: (function(inputFile, encoding) {
rmarkdown::render(inputFile, encoding = encoding,
output_format = "all") })
---
Middle Atlantic Division SVI Infographics and Choropleth Map
================
Courtney Stowers
03/17/2024
- [Data](#data)
- [Socieconomic Status Infographics](#socieconomic-status-infographics)
- [Household Characteristics
Infographics](#household-characteristics-infographics)
- [Racial and Ethnic Minority Status
Infographics](#racial-and-ethnic-minority-status-infographics)
- [Housing Type and Transportation
Infographics](#housing-type-and-transportation-infographics)
- [2010 SVI Flag to Population Ratio
Map](#2010-svi-flag-to-population-ratio-map)
- [2020 SVI Flag to Population Ratio
Map](#2020-svi-flag-to-population-ratio-map)Update:
---
title: "SVI Infographics and Choropleth Map"
author: "Courtney Stowers"
#date: "03/17/2024"
layout: single
sidebar:
nav: "sidebar"
toc: true
---Lab 03 Image File Paths
In addition, for Lab 03, you will want to replace all of the ./ in your image src statements to the URL of your website.
For example:
./imgs/infographic_SES_Middle_Atlantic_Division.pngShould become:
https://watts-college.github.io/paf-515-example-website/docs/middle_atlantic_division/imgs/infographic_HAT_Middle_Atlantic_Division.pngIn addition, for your maps you will need to add a closing iframe tag () and adjust the sizing arguments to better fit the webpage (you can adjust the height if needed):
<iframe align="center" width="100%" height="500px" src="https://watts-college.github.io/paf-515-example-website/docs/middle_atlantic_division/imgs/flag_pop_quantile2010_Middle_Atlantic_Divisionmap.html"></iframe><iframe align="center" width="100%" height="500px" src="https://watts-college.github.io/paf-515-example-website/docs/middle_atlantic_division/imgs/flag_pop_quantile2020_Middle_Atlantic_Divisionmap.html"></iframe>Lab 04
Lab 04 follows the same format as Lab 01:
Current:
---
title: "Visualizing The Intervention - Middle Atlantic Division"
author: "Courtney Stowers"
date: "2024-03-30"
output:
github_document:
toc: true
toc_depth: 3
preserve_yaml: true
rmdformats::downcute:
toc_depth: 3
self_contained: true
thumbnails: false
lightbox: true
gallery: false
highlight: "tango"
code_folding: show
always_allow_html: true
knit: (function(inputFile, encoding) {
rmarkdown::render(inputFile, encoding = encoding,
output_format = "all") })
---
Visualizing The Intervention - Middle Atlantic Division
================
Courtney Stowers
2024-03-30
- [Library](#library)
- [Functions](#functions)
- [SVI Data](#svi-data)
- [NMTC & LIHTC Data](#nmtc--lihtc-data)
- [Load 2010 SVI Data](#load-2010-svi-data)
- [Load 2020 Data](#load-2020-data)
- [Merge 2010 and 2020 Data](#merge-2010-and-2020-data)
- [NMTC Data Wrangling](#nmtc-data-wrangling)
- [LIHTC Data Wrangling](#lihtc-data-wrangling)
- [Exploratory Data Analysis](#exploratory-data-analysis)
- [NMTC in Middle Atlantic
Division](#nmtc-in-middle-atlantic-division)
- [Data Summary](#data-summary)
- [Bivariate Mapping](#bivariate-mapping)
Update:
---
title: "Visualizing The Intervention"
author: "Courtney Stowers"
#date: "2024-03-30"
layout: single
sidebar:
nav: "sidebar"
toc: true
---Lab 05
Lab 05 follows the same format as Lab 01:
Current:
---
title: "lab-05"
author: "Courtney Stowers"
date: "2024-04-12"
output:
github_document:
toc: true
toc_depth: 3
preserve_yaml: true
rmdformats::downcute:
toc_depth: 3
self_contained: true
thumbnails: false
lightbox: true
gallery: false
highlight: "tango"
code_folding: show
always_allow_html: true
knit: (function(inputFile, encoding) {
rmarkdown::render(inputFile, encoding = encoding,
output_format = "all") })
---
lab-05
================
Courtney Stowers
2024-04-12
- [Introduction](#introduction)
- [Diff-in-Diff models](#diff-in-diff-models)
- [Dependent Variables: SVI Variables, House Price Index, Median Home
Values, and Median
Income](#dependent-variables-svi-variables-house-price-index-median-home-values-and-median-income)
- [Independent Variables: NMTC and LIHTC
Data](#independent-variables-nmtc-and-lihtc-data)
- [Library](#library)
- [Load Functions](#load-functions)
- [Data](#data)
- [House Price Index Data](#house-price-index-data)
- [CBSA Crosswalk Data](#cbsa-crosswalk-data)
- [Census Data](#census-data)
- [NMTC Data](#nmtc-data)
- [LIHTC Data](#lihtc-data)
- [Log NMTC and LIHTC Variables](#log-nmtc-and-lihtc-variables)
- [Diff-in-Diff Models](#diff-in-diff-models-1)
- [NMTC Evaluation](#nmtc-evaluation)
- [Divisional SVI](#divisional-svi)
- [Divisional Median Income](#divisional-median-income)
- [Divisional Home Value](#divisional-home-value)
- [Divisional House Price Index](#divisional-house-price-index)
- [NMTC Divisional Model](#nmtc-divisional-model)
- [Visualize SES](#visualize-ses)
- [Visualize Median Home Value](#visualize-median-home-value)
Update:
---
title: "NMTC and LIHTC Evaluation"
author: "Courtney Stowers"
#date: "2024-04-12"
layout: single
sidebar:
nav: "sidebar"
toc: true
---Lab 06
Lab 06 follows the same format as Lab 01:
Current:
---
title: "Results and Conclusions"
author: "Courtney Stowers"
date: "2024-04-19"
output:
github_document:
toc: true
toc_depth: 3
preserve_yaml: true
rmdformats::downcute:
toc_depth: 3
self_contained: true
thumbnails: false
lightbox: true
gallery: false
highlight: "tango"
code_folding: show
always_allow_html: true
knit: (function(inputFile, encoding) {
rmarkdown::render(inputFile, encoding = encoding,
output_format = "all") })
---
Results and Conclusions
================
Courtney Stowers
2024-04-19
- [Introduction](#introduction)
- [Data](#data)
- [Analysis](#analysis)
- [Results](#results)
- [NMTC Diff-In-Diff Models](#nmtc-diff-in-diff-models)
- [Socioeconomic SVI](#socioeconomic-svi)
- [Household Characteristics SVI](#household-characteristics-svi)
- [Racial and Ethnic Minority SVI](#racial-and-ethnic-minority-svi)
- [Housing and Transportation SVI](#housing-and-transportation-svi)
- [Overall SVI](#overall-svi)
- [Median Income Economic
Outcomes](#median-income-economic-outcomes)
- [Median Home Value Economic
Outcomes](#median-home-value-economic-outcomes)
- [House Price Index Economic
Outcomes](#house-price-index-economic-outcomes)
- [LIHTC Diff-In-Diff Models](#lihtc-diff-in-diff-models)
- [Socioeconomic SVI](#socioeconomic-svi-1)
- [Household Characteristics SVI](#household-characteristics-svi-1)
- [Racial and Ethnic Minority
SVI](#racial-and-ethnic-minority-svi-1)
- [Housing and Transportation
SVI](#housing-and-transportation-svi-1)
- [Overall SVI](#overall-svi-1)
- [Median Income Economic
Outcomes](#median-income-economic-outcomes-1)
- [Median Home Value Economic
Outcomes](#median-home-value-economic-outcomes-1)
- [House Price Index Economic
Outcomes](#house-price-index-economic-outcomes-1)
- [Discussion and Recommendations](#discussion-and-recommendations)
- [References](#references)
- [R Version](#r-version)
- [R Packages](#r-packages)
- [Data](#data-1)
- [Readings](#readings)
Update:
---
title: "Results and Conclusion"
author: "Courtney Stowers"
#date: "2024-04-18"
layout: single
sidebar:
nav: "sidebar"
toc: true
---9. Upload personal files to GitHub
Once you have your personal files updated and added to the navigation, upload to GitHub.
10. Update index.md with Team Executive Summary
You and your teammates should collaborate to complete the Team Executive Summary. Look over the demo file, Lab 06, and the Final Project Guide for details.
11. Update about_team.md with Team Bios
All team members should add their name, researched division, and a bio to the about_team.md file. There’s sections to add an image, quote, and links to any social media/GitHub/portfolio websites if you’d like.
If you have difficulties getting an image to appear, you can upload it to your ASU Google Drive account and embed it following instructions from the Final Project Guide.
Note: There is also an about.md template that takes advantage of Jekyll syntax, however, since it is a bit more complicated, I recommend that students utilize the about_team.md template.
12. Upload team files to GitHub
Ensure that the updated index.md (exec summary) and team bios are uploaded to GitHub.
13. Ensure all issues in repo are closed
Finally your website should be complete! Now you just need to refer back to the Lab 01 checklist to ensure all Kanban tasks are complete and issues are closed.
I would also suggest reviewing the Final Project Rubric (https://watts-college.github.io/cpp-528-template/project/project_rubric.html) and Final Project Guide https://r-class.github.io/cpp-528-example-repo/Final-Project-Guide.html.
Once that’s done, you’re all set!
Additional Readings
If you would like to review additional readings on creating a GitHub Pages website, check out the following links:
- Final Project Guide: https://r-class.github.io/cpp-528-example-repo/Final-Project-Guide.html
- Minimal Mistakes Documentation: https://mmistakes.github.io/minimal-mistakes/
- Minimal Mistakes GitHub Repo: https://github.com/mmistakes/minimal-mistakes/tree/master
You can also view the demo website here:
- PAF 515 Demo Final Project Website: https://watts-college.github.io/paf-515-example-website/
Lab Submission Instructions
Congratulations! You’ve reached the end of the Lab-07 Tutorial!
After you and your team are happy with your website, please submit the following links Canvas:
- Repository link
- GitHub Pages website link
You can also post your link to the Project Showcase Discussion Board to share with other students in addition to your YellowDig posts.
Thanks for all of your hardwork this semester!