Make a website with blogdown and github

# >   04 📖 >   website <- blogdown + github
## 🔗   <a href="https://robust-tools.djnavarro.net">robust-tools.djnavarro.net</a>
### danielle navarro

---

layout: true
 
<div class="my-footer">

<a href="https://robust-tools.djnavarro.net" target="_blank">robust-tools.djnavarro.net</a>

</div>

---

.pull-left-narrow[
 .huge-bisque-number[1]
]
.pull-right-wide[
 
.larger[.embolden[GitHub]]
<img src="img/git_commits.png" width="579" />
]

---

## https://github.com

- **git**:  software to help you organise your code (more later!)
- **GitHub**: a website for sharing and collaborating code (using git)

---

## Me... https://github.com/djnavarro

---

## Also me... https://github.com/stringrbelle

---

<img src="img/stringrbelle_avi.png" width="55" />
oh hey you have a code repository I would like to use!

<img src="img/djnavarro_avi.jpeg" width="55" />
really, which one?

<img src="img/stringrbelle_avi.png" width="55" />
this one! https://github.com/djnavarro/newblog

<img src="img/djnavarro_avi.jpeg" width="55" />
oh cool. well, you're always welcome to create your own **fork** of the repo. or you can use this one as a **template** for your own if you like!

<img src="img/stringrbelle_avi.png" width="55" />
awesome! now, how do i do this??

---

- https://github.com/djnavarro/newblog
- create your repository using "djnavarro/newblog" as a template 
- use your respository to create a new RStudio cloud project

---

## 1. go to the "newblog" repository https://github.com/djnavarro/newblog

---

## 2. create "waffle-blog" from the template

---

## 3. copy link to the "waffle-blog" repo

---

## 4. go to https://rstudio.cloud then click the arrow next to "new project"

---

## 5. create new project from your repo

---

## 6. celebrate with cake 🍰 🎉

---

.pull-left-narrow[
 .huge-bisque-number[2]
]
.pull-right-wide[
 
.larger[.embolden[Blogdown]]
<img src="img/blogdown.png" width="212" />
]

---

## Frankenstein's monster

- **Markdown:** a simple text-only format for writing documents
- **R markdown:** a tool for mixing R code with markdown 
- **Blogdown:** a tool for writing blogs using R markdown
- **Hugo:** a vile demon that blogdown summons to do its magic

---

## Building the blog

```r
library(blogdown)
serve_site()
```
]
--
.pull-right[
<img src="img/blog_00.png" width="777" />
]

---

## Making a new_post()

---

## Editing the document

---

## Some markdown

- unnumbered lists
- look like this

1. numbered lists
2. look like this

this is *italicised*

this is **boldfaced**
```
]
--
.pull-right[
Output:

- unnumbered lists
- look like this

1. numbered lists
2. look like this

this is *italicised*

this is **boldfaced**
]

---

## Some markdown

```
]
--
.pull-right[
# Level 1 heading
## Level 2 heading
### Level 3 heading
]

---

## Some markdown

.pull-left-wide[
```
To insert an image:
![](https://placekitten.com/200/400)
```
]
--
.pull-right-narrow[
To insert an image:
![](https://placekitten.com/200/400)
]

---

## Some markdown

To make a named link:
[Placekitten](https://placekitten.com)
```
]
--
.pull-right-narrow[
To insert a URL:
https://placekitten.com

To insert a named link:
[Placekitten](https://placekitten.com)
]

---

## Some markdown

.pull-left[
```
To insert a LaTeX equation:
$$
a^2 + b^2 = c^2
$$
```
]
--
.pull-right[
To insert a LaTeX equation:
$$
a^2 + b^2 = c^2
$$
]

---

- write a short blog post (and save it)
- try to use a few markdown features

---

.pull-left-narrow[
 .huge-bisque-number[3]
]
.pull-right-wide[
 
.larger[.embolden[Push and Publish]]
]

---

.pull-left-wide[
<img src="img/Publish1.png" width="712" />
]
.pull-right-narrow[
.xsmall[
1. djnavarro creates the `newblog` repository on github 
]
]

---

.pull-left-wide[
<img src="img/Publish2.png" width="712" />
]
.pull-right-narrow[
.xsmall[
1. djnavarro creates the `newblog` repository on github 
2. djnavarro publishes `newblog` to github pages 
]
]

---

.pull-left-wide[
<img src="img/Publish3.png" width="712" />
]
.pull-right-narrow[
.xsmall[
1. djnavarro creates the `newblog` repository on github 
2. djnavarro publishes `newblog` to github pages 
3. stringrbelle creates `waffle-blog` from djnavarro's template 
]
]

---

.pull-left-wide[
<img src="img/Publish4.png" width="712" />
]
.pull-right-narrow[
.xsmall[
1. djnavarro creates the `newblog` repository on github 
2. djnavarro publishes `newblog` to github pages 
3. stringrbelle creates `waffle-blog` from djnavarro's template 
4. stringrbelle creates rstudio cloud project from `waffle-blog` 
]
]

---

.pull-left-wide[
<img src="img/Publish5.png" width="712" />
]
.pull-right-narrow[
.xsmall[
1. djnavarro creates the `newblog` repository on github 
2. djnavarro publishes `newblog` to github pages 
3. stringrbelle creates `waffle-blog` from djnavarro's template 
4. stringrbelle creates rstudio cloud project from `waffle-blog` 
5. stringrbelle modifies `waffle-blog` project on rstudio cloud 
]
]

---

.pull-left-wide[
<img src="img/Publish6.png" width="712" />
]
.pull-right-narrow[
.xsmall[
1. djnavarro creates the `newblog` repository on github 
2. djnavarro publishes `newblog` to github pages 
3. stringrbelle creates `waffle-blog` from djnavarro's template 
4. stringrbelle creates rstudio cloud project from `waffle-blog` 
5. stringrbelle modifies `waffle-blog` project on rstudio cloud 
6. stringrbelle wants to **push** changes to github and **publish** to github pages (... but how?)
]
]

---

---

---

class:

.pull-left-narrow[
.small[
- **stage**: tells git *which* changes to include 
- go to the git pane
- shows list of files that have changed
- click "commit" to open the commit window...
]
]
.pull-right-wide[
<img src="img/git_push1.png" width="513" />
]

---

.pull-left-narrow[
.small[
- commit window `->`
- shows changes in detail
]
]
.pull-right-wide[
<img src="img/git_push2.png" width="886" />
]

---

.pull-left-narrow[
.small[
- to select one file to stage, click its checkbox 
- to stage everything all at once, use shortcut key (ctrl-A, cmd-A on Mac) to select all, then check any of the boxes (will stage all of them)
]
]
.pull-right-wide[
<img src="img/git_push3.png" width="884" />
]

---

.pull-left-narrow[
.small[
- **commit**: to make a permanent addition to the local repository (i.e., on rstudio cloud) 
- write a descriptive "commit message"
- then click "commit"...
]
]
.pull-right-wide[
<img src="img/git_push4.png" width="885" />
]

---

.pull-left-narrow[
.small[
- oh noes! 
- don't stress!
- making mistakes with git is *very* common 
- in this case, the local copy of git (on rstudio cloud) doesn't know who we are
- okay... open the `git_config.R` script!
]
]
.pull-right-wide[
<img src="img/git_push6.png" width="573" />
]

---

.pull-left-narrow[
.small[
- stringrbelle types her email and name
- she sources the script... 
- then tries again!
]
]
.pull-right-wide[
<img src="img/git_push7.png" width="490" />
]

---

.pull-left-narrow[
.small[
- back to the commit!
- type informative message
- click "commit"...
]
]
.pull-right-wide[
<img src="img/git_push8.png" width="886" />
]

---

.pull-left-narrow[
.small[
- yaaaay!
- the *local* (rstudio) repository now has the "commit"
- click "close" 
- next step is to "push"... press "push" 😄 
]
]
.pull-right-wide[
<img src="img/git_push9.png" width="886" />
]

---

.pull-left-narrow[
.small[
- **push**: send commit(s) from the local repository (on rstudio cloud) to the remote version (on github) 
- press the "push" button
- stringrbelle needs to enter her github user name and password
]
]
.pull-right-wide[
<img src="img/git_push10.png" width="885" />
]

---

.pull-left-narrow[
.small[
- yaaay!
]]
.pull-right-wide[
<img src="img/git_push11.png" width="570" />
]

---

.pull-left-narrow[
.small[
- here's what stringrbelle's repository looked like before
]
]
.pull-right-wide[
<img src="img/git_push5.png" width="524" />
]

---

.pull-left-narrow[
.small[
- here's what it looks like after! 
- for the next step, click "settings"
]
]
.pull-right-wide[
<img src="img/git_push12.png" width="509" />
]

---

.pull-left-narrow[
.small[
- output is in "docs"
- to publish, stringrbelle needs to enable GitHub Pages for this repo
- only needs to do it once: later changes are published automtically 
- under settings, scroll down to "GitHub Pages"
- under "source" menu, choose "master branch /docs folder"
]
]
.pull-right-wide[
<img src="img/git_push13.png" width="404" />
]

---

.pull-left-narrow[
.small[
- she has a website now!
- click on the link and...
]
]
.pull-right-wide[
<img src="img/git_push14.png" width="397" />
]

---

---

.pull-left-narrow[
 .huge-bisque-number[4]
]
.pull-right-wide[
.larger[.embolden[&nbsp;&nbsp; oh no 😱 
&nbsp;&nbsp;
<img src="img/hugo-logo-wide.png" width="478" />
]]]

---

---

.pull-left-wide[
- files used by github or our rstudio project
 - `newblog.Rproj`
 - `install_packages.R`
 - `git_config.R`
 - `.gitignore`
 - `.Rhistory`
]
.pull-right-narrow[
<img src="img/files1.png" width="316" />
]

---

.pull-left-wide[
- `content`: (R) markdown files for the blog
- `docs`: generated output files (the website!)
- `layouts`: customise your own layouts
- `static`: image files and other resources
- `themes`: files used by Hugo (don't touch!)
]
.pull-right-narrow[
<img src="img/files2.png" width="316" />
]

---

.pull-left-wide[
- `index.Rmd`: file used by blogdown (boring)
- `config.toml`: user settings for the blog (hello sweetie!)
]
.pull-right-narrow[
<img src="img/files3.png" width="316" />
]

---

---

---

---

---

.pull-left[
- A lot of things have changed!
- When you're happy, follow the same process as before to publish the changes
]
.pull-right[
<img src="img/blog_edits4.png" width="414" />
]

---

.pull-left[
<h3><a style="color:black;font-weight:900;font-size:120%" href=https://stringrbelle.github.io/waffle-blog/>stringrbelle.github.io/ waffle-blog</a></h3>
]

---

.pull-left-narrow[
 .huge-bisque-number[5]
]
.pull-right-wide[
.larger[.embolden[R chunks
<img src="img/rmarkdown.png" width="212" />
]]]

---

```r
new_post(
 title = "Using R Markdown", 
 author = "Stringr Belle", 
 ext = ".Rmd"
)
```
] 
.pull-right-narrow[
<img src="img/rmd1.png" width="363" />
]

---

---

---

---

---

---

<h2><a href="https://stringrbelle.github.io/waffle-blog/" style="color:white">https://stringrbelle.github.io/waffle-blog/</a></h2>