Settle down a Personal Website

class: center, middle, inverse, title-slide

# Settle down a Personal Website
## with and R Blogdown
### Annie Lyu & Anabelle Laurent
### Graphics Group Meeting @ISU Workshop @R-Ladies-Ames 2020-04-03

---

# Why a personal website?

- Be professional 👔

+ [Some advice on managing your online presence - Hadley Wickham](https://twitter.com/hadleywickham/status/1189971594778681344)

- Autobiography 📖

+ [I web, therefore I am. - Yihui Xie](https://bookdown.org/yihui/blogdown/)

- Learning and Sharing 🔈

+ [The unreasonable effectiveness of public work - David Robinson](https://resources.rstudio.com/rstudio-conf-2019/the-unreasonable-effectiveness-of-public-work)
  
  + [Becoming an R blogger - Rebecca Barter](http://www.rebeccabarter.com/blog/2020-02-03_blogger/)

- Have fun programming and blogging! 😁

+ [Twitter Threads vs Blogging - Yihui Xie](https://yihui.org/en/2017/08/twitter-threads-vs-blogging/)

---

<body>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
}
</style>
<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="https://annielyu.com/2020/01/12/blogdown-website/"/>
</div>
</body>

---
background-image: url(images/anabelle-website.gif)
background-size: 100%
background-position: 50% 50%

---
class: inverse

background-image: url(https://media.giphy.com/media/mohhXPUdhVVoA/giphy.gif)
background-size: 100%
background-position: 50% 50%

---
# How to get it done?

1. customize your content by modifying a template website -- lots of work 😅

+ `install.packages("blogdown")`
  
  + `blogdown::install_hugo()`

1. custom domain name -- straightforward 😄

+ Google Domains (.com, .org, .me) for a cost of $12 per year
  
  + Google Analytics (monitor website traffic for free)
  
--

1. publish with GitHub and Netlify -- somewhat tricky 😣

+ tell Netlify to continuously build and deploy your website from source
  
  + configure custom domain DNS

---
## RStudio and Website using blogdown

New Project `$\rightarrow$` New Directory `$\rightarrow$` Website using blogdown

---
## RStudio and Website using blogdown

New Project `$\rightarrow$` New Directory `$\rightarrow$` Website using blogdown

![](images/start_annote.png)

---
background-image: url(images/serve_site.png)
background-size: 100%
background-position: 50% 50%

---
class: inverse

## Your Turn (2min)

- Create a new website using the RStudio dialog to set it up in a new project.

+ pick a [hugo theme](https://themes.gohugo.io/) you like (we'll use hugo-academic as an example)

- Live preview a website locally (Addins -> Serve Site).

---
## File structure (VERY IMPORTANT!!!)

- configuration: a few site settings to go through

+ config.toml

+ config/_default/*.toml `$\Rightarrow$` languages, menus, params

- content: mostly markdown files

+ home/*.md -- homepage widgets

+ authors/admin -- your biography
  
  + post, talk, project, publication -- your achievements 💯

- static: self imported files

+ images, slides, resume, etc.

- **DO NOT TOUCH**: public, resources, themes

---
## Homepage Widgets (content/home)

---
## Homepage Widgets (content/home)

- `active = true`: keep widget; `active = false`: discard widget

- `weight`

+ display order (small weight shows first)
 
 + works in the same way for both homepage widgets and navigation bar menus

For example, `content/home/accomplishments.md`

```yaml
+++
# Accomplishments widget.
widget = "accomplishments"  
headless = true  # This file represents a page section.
active = false  # Activate this widget? true/false
weight = 50  # Order that this section will appear.
```

---
## Biography (content/authors/admin)

- folder name **admin** can be replaced with a customized user name

- edit `authors/admin/_index.md` to introduce yourself

- replace `authors/admin/avatar.jpg` with your profile picture

---
## Biography (content/authors/admin/_index.md)

---
## Resources - icons

- `""` versus `"r icon::fa('r-project')"`

- [Fontawesome](https://fontawesome.com/icons?d=gallery)

![](images/icons.png)

---
class: inverse

## Your turn (2min)

- Fill in your information (at least name, organization and role)

Optional

- Activate/deactivate the sections (widgets) on the homepage

- Rearrange the section orders however you like

---
## Create a new R Markdown post (content/post)

- use the **New Post** Addin (or run `blogdown::new_post(ext = '.Rmd')`)

---
## Create a new R Markdown post (content/post)

**Do not knit** your post, instead

+ use the **Serve Site** Addin to preview your post, or
  
  + refresh preview
  
In YAML header,

+ `draft:TRUE` `$\Rightarrow$` preview an R markdown post

+ `draft:FALSE` `$\Rightarrow$` ready to deploy a post

---
## Resources - Highlight (config/_default/params.toml)

- [Styles](https://highlightjs.org/static/demo/)

```yaml
highlight = true
highlight_languages = ["r"]  
highlight_style = "arta" 
```

---
## Resources - Emoji 😎

- `":sunglasses:"` versus `"r emo::ji('sunglasses')"`

- [Cheat sheet](https://www.webfx.com/tools/emoji-cheat-sheet/)

![](images/emoji.png)

---

## Resources - Shortcodes

- [Hugo's Build-in Shortcodes](https://gohugo.io/content-management/shortcodes/)

- `{{< youtube CjTLN-FXiFA >}}`

---
## Import files (static)

For image not created from your R Markdown file, you should
 
 + add image to the `static/img` folder
 
 + insert your image using `![alternate-text](img/xx.png)`

Any files in the `static` folder can be referred using similar relative path!

Follow the following steps to link your resume to the navigation bar:

1. add your resume to the `static/files` folder

1. Specify the URL to your resume in `config/_default/menus.toml`

```yaml
 [[main]]
    name = "Resume" # displayed text
    url = "files/resume.pdf"
    weight = 70
```

---
## About hyperlink

- relative path will be after your domain name (e.g., `https://xxx.com/`),

+ homepage section (widget): `[text](#posts)`
  
  + tags: `[text](tags/rstats)`
  
  + categories `[text](categories/r)`
  
--
  
- DO NOT leave out prefix `https://` when directing visitor to external webpages.

- Recommended practice for generating permanent links in `config.toml`

+ `slug` serves as a short page ID
  
  + URL won't change as you move around or rename file/folder
  
```yaml
# Rules to generate permanent links of your pages
[permalinks]
    post = "/:year/:month/:day/:slug/"
    publication = "/publication/:slug/"
    talk = "/talk/:slug/"
```

---
## Create a new publication (content/publication)

---
## Create a new publication (content/publication)

Per publication folder, you need

+ a Markdown file `index.md`
  + an optional featured image `featured.png` 
  + an optinal citation `cite.bib`

---
class: inverse

## Your Turn (2min)

- Create a "hello world" post

- Preview your post

Optional

- Try inserting

+ code chunk
  
  + emoji
  
  + icon 
  
  + image
  
  + hyperlink to internal pages

---
## Additional Site configurations

- `config/_default/params.toml`

+ your contact information (if you activate `content/home/contact.md`)

+ site name and description `$\rightarrow$` `title` and `description`

+ custom domain and Google analytics `$\rightarrow$` `baseurl` and `google_analytics`

+ active comments `$\rightarrow$` `comments`

- `config.toml`

+ enable emoji `$\rightarrow$` `enableEmoji = true`

+ activate Chinese/Japanese/Korean languages `$\rightarrow$` `hasCJKLanguage = true`

---
## Deploy with Netlify and GitHub

- Push your repository to [GitHub](https://github.com/)

+ can be private and ignore the `public` folder

---
class: middle, center

## Thank you

I get out of my pod 😆

---
count: false
class: middle, center, inverse

## Appendix

---
count: false
## Resources - citation

- use **bibtex** format. Open `cite.bib` on **BibDesk**

---
count: false

## Public GitHub Repositories of Blogdown Website

- [Yihui Xie](https://github.com/yihui/yihui.org)

- [Alison Hill](https://github.com/rbind/apreshill)

- [Amber Thomas](https://github.com/ProQuestionAsker/websiteSource)

- [Annie Lyu](https://github.com/XiaodanLyu/annielyu.com)