用 blogdown 搭建一个静态网站

class: center, middle, inverse, title-slide

# 用 blogdown 搭建一个静态网站
## 兼吐槽学术出版传统
### <a href="https://yihui.org">谢益辉</a>
### 2017/10/11 @ 北美华人基因组学在线沙龙

---

# 预装软件

若想边听边搭自己的网站，请先装一些软件。幻灯片在此：[bit.ly/cgm-blogdown](http://bit.ly/cgm-blogdown)，不要对着我的屏幕抄代码，打开幻灯片复制粘贴就好了。

1. 装 R：<https://cran.rstudio.com>；

1. 在 R 里面装 **blogdown** 包：

```r
    if (!require('devtools')) install.packages('devtools')
    devtools::install_github('rstudio/blogdown')
    ```

若上面的代码玩不转，用下面的也可以凑合：
    
    ```r
    install.packages('blogdown')
    ```

1. 装 Hugo: `blogdown::install_hugo()`；

1. 装最最最新版的 RStudio（不是必需的；[戳此链接下载](https://www.rstudio.com/products/rstudio/download/)）；

1. 装 GIT（也不是必需的）：<https://git-scm.com/downloads>。

---

# 装酷

.center[![装酷](https://slides.yihui.org/gif/duiyou-4.gif)]

---
class: center

.pull-left[
![](gif/html-body.jpg)
]

.pull-right[
![](gif/italic.jpg)
]

### 客官懂 HTML 否？

---

# blogdown 简介

- 基于 [R Markdown](https://rmarkdown.rstudio.com) 和 [Hugo](https://gohugo.io) 的 R 包

- R Markdown <img src="https://www.rstudio.com/wp-content/uploads/2015/12/RStudio_Hex_rmarkdown.png" width="10%" align="right" />

- 语法简单（越简单的文档语言，其可移植性越好，如生成 HTML、PDF、Word、EPUB 等）
    
    - 不仅仅很方便生成输出（从源文档直接编译出数据分析结果，省去复制粘贴），而且有可重复性
    
    - blogdown 继承了 R Markdown 的语法以及 [**bookdown**](https://bookdown.org) 的扩展语法（在 Markdown 里写数学公式、图表、文献引用、甚至定理、证明等）

- Hugo <img src="https://gohugo.io/img/hugo.png" width="10%" align="right" />

- 开源、安装方便（就是单个可执行文件）
    
    - 快：大约一毫秒渲染一个页面
    
    - 通用网站工具（博客只是一个特例应用）

???

Pandoc's Markdown: paragraphs, section headings, (un)numbered lists, blockquotes, math expressions, tables, images, footnotes, bibliography/citations, ...

See Chapter 2 of the **bookdown** book for additional Markdown features, such as figure/table captions, cross-references, numbered equations, theorems, ...

---

# 为什么不用 WordPress, Tumblr, Medium.com, Blogger.com 等平台？

- 没有 R Markdown 支持，甚至支持数学公式都很麻烦

- 静态网站相对于动态网站的优越性

- 整个网站就是个文件夹，不需要服务器端语言如 PHP、数据库、无需登录、断网情况下都能在本地用
    
    - 通常比动态网站访问更快，而且云加速方便（CDN）

- 个人经验

- 我用过很多网站系统，但从来没觉得我的网站属于我自己
    
    - 总是要登录到别人的服务器，寄人篱下，每次想换个服务器都麻烦得要死

???

If all you want to write about is what you had for breakfast today, or how cute your kittens are, there is no need to use blogdown. If there is anything related to R, statistical computing, and/or graphics, blogdown will be much more convenient.

---

# 开工

- 如果你用 RStudio 1.1，那么可直接从菜单创建网站： `File -> New Project`，选择 blogdown 项目

- 最关键的一个选项可能是网站主题（<https://themes.gohugo.io>）

- 不用或者不想用 RStudio 当然也可以（我们从来都很业界良心的）：`setwd()` 切换到一个空目录下，然后

```r
    blogdown::new_site()
    ```

---

# Hugo 网站简介

- 文件结构

- `content/`
        
        - `about.md`
        
        - `post/`

- `themes/`: 可以有多个主题供切换
    
    - `static/`: 静态文件，最终会被复制到 `public/`
    
    - `public/`: 网站会被生成到这个文件夹，你可以把它传到任意服务器（Netlify、Github Pages、Amazon S3、自己的服务器……）

- 网页源文件可用 Markdown 或 R Markdown

- YAML 元数据：标题、作者、日期、分类、标签等
    
    - 正文（用 Markdown 或 R Markdown 语法）

---

# 演示

- 默认网站样式

- hugo-lithium theme 主题

- 其它主题样式

- [jbub/ghostwriter](https://github.com/jbub/ghostwriter)
    
    - [gcushen/hugo-academic](https://github.com/gcushen/hugo-academic)
    
    - [kakawait/hugo-tranquilpeak-theme](https://github.com/kakawait/hugo-tranquilpeak-theme)

- 我对个人网站的建议

- 从简单主题开始，熟悉 blogdown 和 Hugo 之后再玩复杂主题

- 先花时间填充内容，比如先写上一百篇日志
    
    - 反正你现在精心挑选的主题过两年你自己也会看厌

---

# RStudio 支持

- 可从菜单用向导创建一个新网站

- RStudio 插件

- "Serve Site"（建议先设置 `options(servr.daemon = TRUE)` 选项）
    
    - "New Post"
    
    - "Update Metadata"

- 工作流程

- 打开 RStudio 之后点 "Serve Site" 插件（每次打开 RStudio 只需要点一次，它会一直在后台运行）
    
    - 更新旧页面，或者创建新页面（"New Post" 插件）
    
    - 猛写内容，保存（网站会自动编译并刷新）
    
    - 推送到 Github（推荐方式）或者将 `public/` 文件夹传到 Netlify

???

If you do not see the addins, you need to update your RStudio IDE.

---

# 网站发布

- 很多种可能，这里只谈两种

- Netlify 业界良心（<https://app.netlify.com>）

- 支持 Hugo 及其它静态网站编译工具（如 Jekyll、Hexo 等）
    
    - 免费云加速
    
    - 免费子域名 `*.netlify.com`
    
    - 免费绑定自己的域名，免费 HTTPS
    
    - 灵活的重定向规则（`_redirects` 文件）

- 两种办法

1. 直接拖拽上传 `public/`
    
    1. 通过 Github 持续部署（Continuous Deployment）

---

# Rbind

- https://github.com/rbind

- 想建网站但不懂网页或域名技术？我们帮你起步

- 想要一个免费的 `*.rbind.io` 子域名？（我更推荐你[注册自己的域名](https://yihui.org/cn/2017/03/domain-name/)）

- 想分享自己的网站源代码给（R）社区？

---

# 为啥要弄个网站

- 我网故我在——谢卡尔。

- 把知识分享给别人，以及未来的你自己（把你过去的经验以及错误都写下来）。

.center[![](gif/saw-branch.gif)]

---

# 为啥要写作

- 我的第一篇中文日志写于 2005 年 1 月 7 日：<https://yihui.org/cn/>；第一篇英文写于 2007 年 8 月 12 日：<https://yihui.org/en/>；我的一点心得：

- 听别人讲、阅读、发微博、发微信朋友圈都是过眼云烟的方式；只有亲自写才能让人记忆最深刻
    
    - 我这十几年来写了无数的废话和牢骚（约千篇），但只有写东西的时候是我最能凝神想问题的时候；未来的人类最缺什么资源？我认为是持久的注意力
    
    - 尽管写了不少废话，但沙子里也许偶尔可以刨出一两颗金子

- 推荐大家阅读《娱乐至死》这本书（[Amusing Ourselves to Death](https://en.wikipedia.org/wiki/Amusing_Ourselves_to_Death)）

???

- Let other people know more about you.

- I often flip through my own posts to find some tricks I learned but forgot.

- My first English post was about tidying R code: https://yihui.org/en/2007/08/tidy-up-your-r-code/ The idea was turned into the **formatR** package, and I'm still maintaining it 10 years later!

---

# 学术发表的未来（吐槽）

- 为什么需要期刊

- 两百多年前（？）公共的知识流通平台
    
    - 没有这个平台的话，知识只能点对点传播，太低效

- 为什么还需要期刊

- 贝尔塞柳斯男爵（Jöns Jacob Berzelius，1779 - 1848）去世之后人们整理了他的信件：一共收到 7150 封，寄出 3250 封；传说中的“笔很少干”的人（叶永烈《趣味化学》）
    
    - 我瞄了一眼我的邮箱，迄今发出去的邮件组数是 17240 组（收信数不准）
    
    - 如今的信息传播渠道大大增加（电视、社交媒体、博客、论坛等）、速度也大幅提高；论文是否通货膨胀？

- 为什么需要排版（早年的科学家每个人还得配秘书帮忙打字）

???

归咎于工业革命？

---

# 学术发表的未来（设想）

- 我理想中的期刊运作方式

- 投稿 + 评审 -> Github Pull Request
    
    - 他人的讨论（Discussion）-> 网页评论

- Authorea 针对先驱 arXiv 的一篇文章：[The arXiv of the future will not look like the arXiv](https://www.authorea.com/users/3/articles/173764-the-arxiv-of-the-future-will-not-look-like-the-arxiv)

---

# 记住这个链接

- 就算今天啥都没记住，记住这个链接就好了，这里有所有相关资源，包括 R 包和 blogdown 的书：https://github.com/rstudio/blogdown

---

# 谢谢，祝大家玩网站玩得开心

.center[![](gif/slam-dunk.gif)]

.footnote[幻灯片由 [**xaringan**](https://github.com/yihui/xaringan) 强力驱动。]