Build a personal website with distill

# Build a personal website with distill
## Part 1: Basic website with intro postcard

### Ariel Muldoon

### April 6, 2021

---

## Today's Goal

Overall

- **Create a personal website to showcase your work**

We will 
-     Start a **distill** website in a version-controlled directory  
-     Edit `_site.yml` to control website structure
-     Build an intro page with package **postcards**  
-     Change website *theme* (colors and fonts)

*Before we begin:*

Make sure you have packages **distill**, **postcards**, and **fontawesome** installed.

???

These are basic websites that I think applied scientists (not data scientists) might be interested in, on average.  They'll have an intro page with pic and then other pages to show publications, etc. I am not showing the distill blog format, although some may ultimately be interested in that.

---

## Resources

- The **distill** website has great material for getting started: https://rstudio.github.io/distill/  
- Thomas Mock has a nice intro to **distill** [here](https://themockup.blog/posts/2020-08-01-building-a-blog-with-distill/)  
- Alison Hill's post on **postcards**
[here](https://alison.rbind.io/post/2020-12-22-postcards-distill/) is super helpful  
- The [distillery showcase](https://jhelvy.github.io/distillery/showcase.html) is awesome for inspiration and ideas on website design. Check out the GitHub repositories of pages you want to emulate!

---

## Why distill?

.pull-left[
- Based on Rmarkdown
- Comparatively simple and easy to maintain  
- Templates for building interactive academic articles    
- **Con**: Not particularly flexible for customizing site layout or style

*Alternatives: blogdown, hugodown*
]

.pull-right[
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Blogdown vs distill comparison</p>&mdash; Shannon Pileggi (@PipingHotData) <a href="https://twitter.com/WeAreRLadies/status/1363144545677017089">Tweet February 20, 2021</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
]

???

The tweet does a more specific overview of simplicity with little flexibility (distill) vs complexity but lots of flexibility

---

## Where are we going?

The focus today is on making personal websites to showcase ourselves.

.pull-left[
- The home page will have a picture, a description of your background, and contact info. 
- Additional pages, such as publications and presentations, will be available through the navigation bar menus.
- We'll change the look of the website using a new *theme*.
]

---
## Examples for inspiration

.pull-left[
A lot of my own approach to building a website involves looking at other websites to see what I like and what I can do. I'll show two examples here. 
]

---

## Examples for inspiration

.pull-left[
A lot of my own approach to building a website involves looking at other websites to see what I like and what I can do. I'll show two examples here.

The first is a fairly complex **distill** website by [John Paul Helveston](https://www.jhelvy.com/). You'll notice he uses separate pages to showcase, e.g., publications and teaching.

]

.pull-right[
.center[<img src="figs/week02_files/helveston.png" width=600>]
[Link to site](https://www.jhelvy.com/)  
[Link to source code](https://github.com/jhelvy/jhelvy.com)
]

---

## Examples for inspiration

.pull-left[
A lot of my own approach to building a website involves looking at other websites to see what I like and what I can do. I'll show two examples here.

The second is a somewhat simpler **distill** website from [Harry Fisher](https://www.hfshr.xyz/).  Notice is the use of icons instead of labels for social and navigation links.
]

.pull-right[
.center[<img src="figs/week02_files/fisher.png" width='600'>]
[Link to site](https://www.hfshr.xyz/)  
[Link to source code](https://github.com/hfshr/distill_blog)
]

---

## Examples for inspiration

.pull-left[
A lot of my own approach to building a website involves looking at other websites to see what I like and what I can do. I'll show two examples here.

Take a few minutes to explore the two website examples more closely and/or go to the [distillery showcase](https://jhelvy.github.io/distillery/showcase.html) to scroll through some examples there to start thinking about what you like.
]

.pull-right[
[John Helveston site](https://jhelvy.github.io/)   
[John Helveston source](https://github.com/jhelvy/jhelvy.com)

[Harry Fisher site](https://www.hfshr.xyz/)  
[Harry Fisher source](https://github.com/hfshr/distill_blog)

Other example websites you might want to check out:  
[Ijeamaka Anyene](https://ijeamaka-anyene.netlify.app/)  
[Jeff Leek's](http://jtleek.com/) super simple, one-page website  
[Jannik M. Buhr](https://jmbuhr.de/)  
[Ted Laderas](https://laderast.github.io/)
]

---

# <font style="font-family: cursive; font-style:italic">Let's get started!</font>

---

## Create distill website

Open the version-controlled RStudio Project you created last week.

We'll make a website within this directory using `distill::create_website()`.  
--

<br/>
Copy and paste the following code example into your R Console. Change the `title` to your name before running:

```r
distill::create_website(dir = ".", 
                        title = "Ariel Muldoon", 
                        gh_pages = TRUE)
```

***Code explainer:***
- We use `dir = "."` to place files in our current (Project) directory. 
- You'll need to name the website with `title`. For a personal website this is usually your name.
- Finally, since we will be deploying the website via GitHub Pages, we set `gh_pages` to `TRUE`.

???

Instruct on opening RStudio Project as necessary. Can use drop-down menu to select Project have already opened in upper right. Otherwise can open the .RProj file after navigating to the directory.

---

## Basic website files

After running the code from the last slide you will have a bunch of new files that contains the basic skeleton of a **distill** website. Here's what is now in my `Files` pane.

We'll be editing the created files to personalize our websites.

???

In particular note _site.yml, index.Rmd, about.Rmd and the new "docs" folder.

---

## Build basic website

.pull-left[
**Important**: Before we proceed any further, close RStudio and then reopen your website Project.

Once you reopen you should see a `Build` tab near your `Environment` pane.

.pull-right[
Go to the `Build` tab and click `Build website`. The basic website will build and then open in a new window.

.center[![](figs/week02_files/basic_website.png)]
Click around on the navigation bar to explore the website. This will set us up to talk about how the files relate to the website content and structure.
]

---

## File overview

- `index.Rmd`: Your home page. Every **distill** website *must* have an `index.Rmd` file and it needs to be in the root directory. Don't move it.

In addition, you must have at least `title:` and `site: distill::distill_website` in the *YAML header*. The YAML header is the information at the top of the file sandwiched between two `---`. Like:

```r
    ---
    title: "Ariel Muldoon"
    site: distill::distill_website
    ---
```

- `docs` folder: This is where the files that make up your website are stored. Publish your website based on this folder.

- `_site.yml`: This file controls aspects of your website structure, including the navigation bar.

- `about.Rmd`: The content of this file is associated with the `About` navigation menu. Change the content, change that page. (*Editing `about.Rmd` not covered today.*)

???

This is a very basic overview. You may want to know more about each of these, in which case I recommend the distill "Creating a website" page.

This brief discussion of the YAML header assumes some knowledge of R markdown.

---

## Edit `index.Rmd`

**You control your home page content by making changes to `index.Rmd`.**

.pull-left[
To start, delete the two lines of `description` in the YAML header. (You can always add this back if you want. 😉)

My header now looks like

```r
---
title: "Ariel Muldoon"
site: distill::distill_website
---
```
]

For practice, add a line or two of text after the set-up chunk and then save.

I added

```
Welcome to my *new* website.

See my CV for more info:  
[CV](https://ariel.rbind.io/files/acm_resume.html)
```
]

---

## Knitting and Building

.pull-left[
If you change a single document like we just did you can use the `Knit` button at the top of your Source pane `Rmd` file to preview the changes you made.

Knit `index.Rmd` to see how the output file has changed.
]

<br/><br/>
After making changes to multiple files you'll want to *build* the entire website again like we did for the initial skeleton website.

---

## More on the `docs` folder

.pull-left[
Every time we knit a file in the root directory or build the entire website, all output files and folders are added to the `docs` folder.

Take a look at the contents of this folder.

]

.pull-right[
In particular note the two HTML output files created by `index.Rmd` and `about.Rmd` (same names but end in `html`). These are literally the files that make the pages of the website. 
.center[![](figs/week02_files/distill_docs.png)]
]

???

Distill is a static site generator, so is based on HTML documents we create. Since we are using GitHub pages to publish/deploy we have a "docs" folder by default and all HTML output from our Rmd files in the root directory are saved there. Distill is set up to create the files we need in "docs", so no need to fool around in there manually.

---

## Edit the navigation bar

Today we will keep most of the defaults and focus on changes to the website navigation bar.

The navigation bar settings are controlled with options passed to `navbar` in `_site.yml`.
]

```r
name: "."
title: "Ariel Muldoon"
description: |
  Ariel Muldoon
output_dir: "docs"
*navbar:  
*  right:  
*    - text: "Home"  
*      href: index.html  
*    - text: "About"  
*      href: about.html  
output: distill::distill_article
```

At the moment our navigation menu is on the right and we're using menu names `Home` and `About`.

]

---

## Edit the navigation bar

You can move the navigation menus to the right or left. I'm leaving them all on the right but if you want menus on the left use `left:`.

Change the `text` to change the menu names. I'm using `"Hello"` and `"Publications"`.

```r
navbar:
  right:
*   - text: "Hello"
      href: index.html
*   - text: "Publications"
      href: about.html
```

Build the website to see the new menu names.

---

## Edit the navigation bar

We use `href` to define which HTML page from the `docs` folder should be opened by each navigation menu.

For now we'll keep these as is, with `index.html` as our home page and `about.html` as the page opened by the "Publications" menu.

```r
navbar:
  right:
   - text: "Hello"
*    href: index.html
   - text: "Publications"
*    href: about.html
```

---

## Edit the navigation bar

You can use *icons* instead of text by defining Font Awesome identifiers. I decided to add a link to my website GitHub repo using the <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="rfa" style="height:0.75em;fill:currentColor;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> icon as an example.

`href` must refer either to a local HTML file or to a URL.

```r
navbar:
  right:
    - text: "Hello"
      href: index.html
    - text: "Publications"
      href: about.html
*   - icon: fab fa-github
*     href: https://github.com/aosmith16/personal-website
```
After building:
.center[![](figs/week02_files/index_github.png)]

???

Build website to see changes

I don't have a great explanation for the "fab fa-github" code, other than that is CSS and is how to refer to font awesome icons. Put the name of the icon after "fa-". An envelope would be "fa-envelope".

---

## Add a navigation menu

If we want a local HTML file associated with a new menu we'll need a new `Rmd` file to create it.

We can create an R markdown **distill** article, which has HTML output, using RStudio's drop-down menus.

Go to `File > New File > R Markdown...`

Click `From Template` and then choose `Distill Article`.

???

Remember that a website is all about HTML, so we want documents that create HTML outputs. That's a reason distill articles are so useful here.

We'll explore distill articles a little more next week but won't get into it today.

---

## Add a navigation menu

Save the file into the root directory.  I named mine `teaching.Rmd`, so it will create an HTML file called `teaching.html`.

Add a new `navbar` menu in `_site.yml` that is associated with the new HTML file and then build.  Note the order menus are defined in `_site.yml` dictates the order in the website.

```r
navbar:
  right:
    - text: "Hello"
      href: index.html
    - text: "Publications"
      href: about.html
*   - text: "Teaching"
*     href: teaching.html
    - icon: fab fa-github
      href: https://github.com/aosmith16/personal-website
```

???

Students might be interested in looking at this new file since it has some distill article defaults built into it that we will talk about next week.

Can make many new navbar menus following this same approach, depending on how you want your website to look and what info you want to give.

---

## Add a postcard to your website

The [**postcards** package](https://github.com/seankross/postcards) is a convenient way to create a nice home page for your website.

Before we proceed, save whatever image you'd like to represent you on your home page in a folder called `images` in the root directory of your current Project. My image is named `ao_small.png`.

We'll create a postcard using `distill::create_article()`. Copy and paste the code below and run it in your R Console.

```r
distill::create_article(file = "postcard",  
                        template = "jolla",    
                        package = "postcards")
```

***Code explainer:***
- Create the name of the new `Rmd` file with `file`. This creates `postcard.Rmd`.
- Chose a [template](https://github.com/seankross/postcards/blob/main/README.md#the-templates) from package **postcards** with `template`. Other options are `trestles`, `jolla_blue`, and `onofre`.
- In `package` we list the name of the package that has the template. In this case, **postcards**.

???

There are currently 4 templates to choose from. See link for examples of each.

May need to give direction on creating a new "images" folder and putting picture in it. Seems easiest to do outside RStudio, which means students must understand where their directory is.

---

## Add a postcard to your website

Let's change the YAML header filler info to our own before we knit. Delete `label`/`url` for social links you don't have and add others you want. **Note:** My image is in the `images` folder so I start at `images/`.

```r
title: "Tobi Burns"
image: "tobi.jpg"
links:
  - label: LinkedIn
    url: "https://linkedin.com/"
  - label: Twitter
    url: "https://twitter.com/"
  - label: GitHub
    url: "https://github.com/"
  - label: Email
    url: "mailto:email@email.com"
output:
  postcards::jolla
```
]
 
.pull-right[
And here are my edits:

```r
title: "Ariel Muldoon"
image: "images/ao_small.png"
links:
  - label: LinkedIn
    url: "https://www.linkedin.com/in/arielmuldoon/"
  - label: Twitter
    url: "https://twitter.com/aosmith16"
  - label: GitHub
    url: "https://github.com/aosmith16"
  - label: Email
    url: "mailto:ariel.muldoon@gmail.com"
output:
  postcards::jolla
```
]

???

Note my picture is in my "images" folder, so I had to write out the path. Delete the `label` and `url` lines for any social links you don't have or add others.

---

## Add a postcard to your website

Knit `postcard.Rmd` to see the first draft of the postcard.

---

## Using icons in your postcard

You may decide you want icons instead of words for social links. You can do this using R code and package **fontawesome**.

Make sure you are using version 0.1.0 of **fontawesome**, as on date of this presentation version 0.2.0 appears to offset the icons.

Install specific version with package **devtools**:

```r
devtools::install_version("fontawesome", 
                          version = "0.1.0", 
                          repos = "http://cran.us.r-project.org")
```

---

## Using icons in your postcard

Here's what my YAML header looks like if I use icons.

```r
---
title: "Ariel Muldoon"
image: "images/ao_small.png"
links:
  - label: '`r fontawesome::fa("linkedin", height = "25px")`'
    url: "https://www.linkedin.com/in/arielmuldoon/"
  - label: '`r fontawesome::fa("twitter", height = "25px")`'
    url: "https://twitter.com/aosmith16"
  - label: '`r fontawesome::fa("github", height = "25px")`'
    url: "https://github.com/aosmith16"
  - label: '`r fontawesome::fa("envelope", height = "25px")`'
    url: "mailto:ariel.muldoon@gmail.com"
output:
  postcards::jolla
---
```

???

Height is height of icons, must give units like px and be in quotes, which you can make larger or smaller

---

## Using icons in your postcard

Here's what my postcard looks like now.

---

## Make postcard your home page

But my new postcard isn't part of my website yet!

Rather than adding it in as a separate `navbar` menu we'll make it the home page.

To achieve this, copy/paste the `postcard.Rmd` YAML header info into the `index.Rmd` header.

<br/>
Here's my current YAML header from `index.Rmd`:

```r
---
title: "Ariel Muldoon"
site: distill::distill_website
---
```

**Reminder**: Do not delete the `site: distill::distill_website` line from `index.Rmd`.

---

## Make postcard your home page

Build your website to see your new home page! 🎉 Delete `postcard.Rmd` entirely.

---

## Change website theme

While **distill** doesn't allow for major changes to the overall website structure, we can change the *theme* by choosing colors and fonts to personalize the website.

Themes in **distill** are based on the CSS language.

???

We can write our own HTML and our own CSS. What distill does for us is make it so we don't have to learn either of those languages in detail to make a website.

---

## Change website theme
  
To change the website theme we'll first create a file that contains all the CSS code for the current website.

Run the following code in the R Console to create a file called `theme.css` in your root directory.  It will open up in your `Source` pane once it has been created.

```r
distill::create_theme()
```

Then either:
1. Edit this file to change individual style elements of your website.  
 
 OR  
2. Find a theme you like that someone else developed and use that code to replace the code in `theme.css`. You can still change individual style elements later.

We'll proceed with the second approach.

???

If you already know CSS you can go ahead and create your own .css file

---

## Change website theme

In order to apply a theme your entire website you'll need to point to the `theme.css` file within `_site.yml`.

This is done via `theme: theme.css`. Here I added it to the end of my current `_site.yml` file. Excerpt:

```r
navbar:
  right:
    - text: "Hello"
      href: index.html
    - text: "Publications"
      href: about.html
    - text: "Teaching"
      href: teaching.html
    - icon: fab fa-github
      href: https://github.com/aosmith16/personal-website
output: distill::distill_article
*theme: theme.css
```

Take care with your spacing. `theme` should have no spaces in front of it.

---

## Change website theme

The **distill** website has three nice [example themes](https://rstudio.github.io/distill/website.html#example-themes) that can be a place to start when setting a completely new theme.

When I made the [class website](https://aosmith16.github.io/spring-r-topics/) I copied the `theme.css` example from Piping Hot Data, pasted it over everything in my current theme, and then manually changed the navigation bar color to [Beaver Orange](https://communications.oregonstate.edu/brand-guide/visual-identity/colors) (`rgb(215, 63, 9)`).

---

## Change website theme

Take a few minutes to choose from one of these three example themes:

[Piping Hot Data](https://rstudio.github.io/distill/website.html?panelset1=screenshot#piping-hot-data)  
[Before I Sleep](https://rstudio.github.io/distill/website.html?panelset1=screenshot&panelset2=screenshot2#before-i-sleep)  
[Tidymodels](https://rstudio.github.io/distill/website.html?panelset3=screenshot3#tidymodels)

Once you've decided on one, copy and paste the CSS code from the `theme.css` tab over what you currently have your copy of `theme.css`.

.center[
<div class="figure">
<img src="figs/week02_files/theme_choose.png" alt="Copy theme code from left tab of the example themes" width="60%" />
<p class="caption">Copy theme code from left tab of the example themes</p>
</div>
]

---

## New website theme

Save the result and build the website to see the changes. If ultimately you'd prefer a different look for your website, find a theme you like from, e.g., the [distillery examples](https://jhelvy.github.io/distillery/showcase.html).

I used the [Tidymodels](https://rstudio.github.io/distill/website.html?panelset3=screenshot3#tidymodels) theme. After copying the `theme.css` code, pasting it over the code in my original `theme.css` file, and building the site this is what my website home page looks like.

---

## Push to GitHub <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="rfa" style="height:0.75em;fill:currentColor;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>

We've been going along, editing and adding files to the website locally but haven't pushed anything to GitHub.

Take a moment to `Stage`, `Commit`, and `Push` all new and edited files.

We usually want to do this fairly often so changes are recorded. That way if you ever really make a mess of things you can revert back to a previous version of your website. (In other words, the reason to use version control. 😄)

???

That's it for today. Remind everyone to push to GitHub and talk about why we might do this fairly often (especially when making big changes). If we don't commit changes then we can't revert to that previous version.

---

## For next week

- If you already work with bibTex files (`.bib`), have one available to use in a **distill** article. I will provide you an example file, as well.
- We'll be deploying the website, so you may want to flesh out your home page information.

.footnote[
[Code for slides](https://github.com/aosmith16/spring-r-topics/tree/main/docs/slides)  
Slides created via the R packages:  
[**xaringan**](https://github.com/yihui/xaringan), 
[gadenbuie/xaringanthemer](https://github.com/gadenbuie/xaringanthemer), 
[gadenbuie/xaringanExtra](https://github.com/gadenbuie/xaringanExtra) 
.center[*This work is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/4.0/.*]
]