Open presentations - when slides or posters presented at a conference are made publicly available afterward - are one of the many exciting facets to the steady push to make science a more inclusive, open community. Unrefereed preprints, open access publishing, open peer review, and open source code, among many others, are thankfully becoming more widespread every year. Open presentations, though, have been more slowly adopted by some scientific fields, but not, I think, because people are uninterested in making these documents widely accessible. Rather, I think it’s because most people don’t have any easy method to share their slides in a way that provides a seamless user experience. Sure, we could share links to the cloud, but there is no guarantee that a user will be able to download and view a given presentation with its original aesthetics. Keynote presentations viewed in PowerPoint are, to be quite frank, quite ugly. People could get in the habit of exporting their presentation files to PDFs, but those won’t support animations, GIFs, or movies.
Why can’t biologists have nice things
Perhaps not surprisingly, open presentations have become much more widespread in the data science community. Though I’ve never been to an rstudio::conf , each summer I look forward to to perusing the presentations from the comfort of my own office because of the ubiquity of their open presentations.
Adoption of open presentations in the DS community has probably been quicker because it’s easier to make DS presentations in a format that plays nicely with the web. Keynote and PowerPoint files don’t often view very accurately or natively in a browser, so the DS community has built tools and libraries that let you construct a presentation that can be viewed natively in any modern browser. remark is popular tool that will transform a Markdown document into HTML via JavaScript running in the browser. xaringan is an R package that does the same, except you can use R Markdown to include plots and tables in-line. reveal is another JavaScript-based option that doesn’t require using Markdown.
There have been several times where I’ve sat down to put together a new presentation, hoping to use xaringan, but I’ve never actually completed one. For one, remark is “targeted at people who know their way around HTML and CSS,” which sadly isn’t me. Second, presentations made by biologists usually include more than just need text, code, and plots. We need photos and - let’s face it - including a photos in a Markdown document is a massive pain, and it just isn’t worth the effort.
I’ve searched for alternatives. One effort a few years ago utilized Google Slides, but truthfully I’ve only seen these used by school-aged children, and they require network access to be able to present them. Slideshare is another option, but I’ve never tried it, and it has the same network requirement as Google Slides. For years I’ve thought that building a truly open presentation just wasn’t gonna happen for me.
Until now…
Open presentations for biologists
I use Keynote to make all my presentations, but before I travel to a conference I export my slides to a PDF just in case the conference won’t let me use my own MacBook to present. This strips the presentation of all my nice (always tasteful) transitions, but that’s the price I pay for using the unpopular (checks notes) Apple product. When preparing to export my most recent presentation, I noticed that I could export to HTML as well, which I hadn’t seen before:
I tried this option and opened up index.html in a browser and was surprised to see that all my transitions were retained! I don’t know enough about how HTML works to be able to explain this to you, but it still blows my mind. Try it if you don’t believe me.
Side note: I’m not sure when Apple included this feature, but Keynote has another little Easter egg. Did you know you can unzip .key files to get all the images you pasted in??
At first I thought this was mainly going to be handy as a backup for my upcoming conference, as it would be much preferable to a plain old PDF. But then I realized that if I could view it natively in the browser, then so could everyone else (💡🧠). But what was the best way to host all the files? GitHub, of course. It’s how I share data and code, so it seemed like a great option for this purpose as well.
The problem with HTML on GitHub is that if you open up an HTML file in the repository, it thinks you want to edit it, view the the source, view the diff, etc (GitHub is annoying like that). So I got to wondering how I could make GitHub actually render the HTML. Google told me that https://htmlpreview.github.io/ was an option. This works fine, but seemed a little outdated. Then I realized that GitHub Pages are built with exactly this purpose in mind.
GitHub Pages will render the HTML that you have in the root of the repository. Back when I was making my first personal website with Hugo and Markdown, you had to create a specific gh-pages branch for it to work, but that doesn’t seem to be the case anymore. Just keep it in main and you’re good to though. GitHub (ermm, Microsoft) is even nice enough to give you a somewhat pretty domain ({repo}.{user}.github.io). It looks ok but has a lot of dots.
But I own my own domain (yes, the one you’re currently on…get off my domain! (jk)). Now, I know next to nothing about HTTPS and DNS and TLS/SSL, but it turns out it’s not that difficult to host the HTML yourself instead of on the domain that GitHub gives you. I use Google Domains, so I’m not sure how differently the process will be if you use a different host. But the short of it is that I will now be hosting all of my and my students presentations at {conference}.wheelerlab.bio! Feel free to check out my slides for ASP 2022 at asp2022.wheelerlab.bio, and read on to get a detailed tutorial.
Keynote presentations in the browser using HTML and GitHub Pages (with a bonus for those who own their own domain)
- First things first - make a nice presentation. Don’t reference this tutorial if your presentation is ugly.
- Export it to HTML. Feel free to save it anywhere, but the Desktop is probably the easiest place. Keynote will create a folder called
{presentation}withindex.htmlandassets/in the root of that folder. Open up the index in Chrome or Safari to view your presentation locally and make sure everything still looks good. - Make a new GitHub repository where you’ll store the presentation(s) (maybe you run your own lab and want to put your trainees slides and posters there as well…have at it!) I name my repo the same as the conference that I’m going to, with the year appended.
- Note: Choose a license. Your presentation is going to be open-access, but it’s good to include a license as well, so you can enforce attribution (or not). I generally use the MIT license, but there are several that work well. Here’s a little tool to help you choose: https://choosealicense.com/
- Clone the repo to your local machine (
git clone https://github.com/{user}/{repo}.git - Copy
index.htmlandassets/to the cloned repo (ditch the root directory). Stage, commit, and push the files:
git stage .
git commit -m 'upload the HTML version of my new presentation'
git pushHosting on GitHub Pages
After pushing, you’ll be able to see the files on GitHub, but you won’t be able to view the presentation (unless you use https://htmlpreview.github.io/). Here’s how to use GitHub Pages to render the HTML:
- Navigate to your repo and click Settings. Under “Code and automation” in the panel on the left, click Pages.
- In Source, set Branch: main/root and click Save. You should get a pop-up notifying that your presentation is ready to view at
{repo}.{user}.github.io, or something similar. Note that it might take a few minutes to render, especially if they presentation is large (mine was >150 MB and it was 3-5 minutes before it was ready).
(Optional) Hosting on your custom domain
The following is specific to a Google Domains, but I imagine it’s similar for other hosts.
- Login to domains.google.com and open up your domain’s DNS settings. You should have the A/CNAME records for your regular site, and now you’ll add another CNAME record to use a subdomain.
- Click the Custom records toggle to open it up, then click Manage custom records. Your page should look something like this:
- Click Create new record and add a CNAME record with the GitHub repo as the host name and
{user}.github.ioin the Data field. Save this new record. - Head back to your GitHub repo settings and put your new subdomain in the Custom domain field, then click save. The DNS will be checked, and should be validated in a few minutes. You’ll get a congralatory popup when it succeeds.
- Wait a day or two before checking the Enforce HTTPS box. This is preferable, but you want to wait for the DNS to fully propagate before you purchase a CA certificate.
And there you have it 🎉 Your presentation is now live on the world wide web, for all to see. I wouldn’t use the GitHub page to present it live, as it tends to be a bit slow. For that, I would use the native Keynote (if available at the conference) or the local HTML viewed in a browser.
Happy conferencing!