Deploy Slides Online

Deploying Your Slides Online

I web, therefore I am a spiderman -yihui

Cool kids will dump their xaringan slides online and never bring a usb stick to their group meetings. Besides, when there exist free services like netlify and github pages, there's no reason not to do that.

Here is an example by Anna Kennedy

Here is a github page example by TC

Here is a blog post by Silvia Canelón: Deploying xaringan Slides with GitHub Pages

If you have problems during deploying your xaringan slides online, here are some tips that might be of help.

Tips

1. Importing fonts when hosting slides on Netlify

The @import rules for any imported fonts – for example from Google Fonts – need to be at the top of your CSS file. As shown in default-fonts.css below:

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);

body { font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif; }
...

Netlify bundles multiple CSS files into a single file by default, which may break the @import rule and invalidate the font setting.

Solution

• Order the CSS files in your YAML header in xaringan such that the fonts are imported first. For example: css: ["default-fonts", "default"].
• Disable bundle and minify css in netlify.

See issue #141 for more details.

2. Fonts might be different after render locally and on web server

It can happens that same Rmd document rendered with same xaringan version will produce different fonts on local machine and remote server. The reason is likely to be external source of fonts, as can be observed in default-fonts.css.

Solution

Setting up web server with tool like servr is likely to solve issue on the side of your local machine. Another way is to use fonts that does need to be downloaded from external source.