将 Reveal.js 演示文稿部署至 GitHub Pages

前言

Reveal.js 是一个美观实用 HTML 演示文稿框架,只需要你决定内容,就可以方便地产出外观优雅的演示文稿。你可以在线查看 Reveal.js 的 Demo

为了分享已经制作好的演示文稿,可以使用 GitHub Pages 进行部署,同时也能够不用安装依赖地开启演讲者视图。以下是我建立 slides.zhanghai.me 的过程。

基本

为了建立一个 GitHub Pages 站点,我们需要准备以下一些文件:

  • 404.html:GitHub Pages 将使用此页面作为默认 404 页面的替代,一般可以换成一个符合自己站点风格的页面。
  • CNAME:对于绑定自定义域名的 GitHub Pages,可以使用这个文件指定自己的自定义域名。
  • .nojekyll:我们的站点不需要 Jekyll 的特性干预,因此将它关闭来避免可能的问题。

然后在 GitHub 上建立仓库,执行以下的命令:

1
2
3
4
5
6
7
git init
# 将默认的分支名 master 改为 gh-pages
git symbolic-ref HEAD refs/heads/gh-pages
git commit -am 'Initial commit.'
# 将 your/repo/origin 替换为你的仓库地址
git remote add origin your/repo/origin
git push --set-upstream origin gh-pages

当然,使用自定义域名的话还要配置一下 DNS 记录。

演示文稿

为了部署 Reveal.js 的演示文稿,可以利用 Git 的 Submodule 来完成对 Reveal.js 项目本身的引用。如此以来,我们的站点项目的 Git 仓库就不用跟踪 Reveal.js 中各个文件的状态,又可以记住所引用的 Reveal.js 仓库当时的版本(Commit SHA1)。

比较幸运的是,GitHub Pages 的构建过程是可以支持 Submodule 的。需要注意的是,Submodule 的仓库地址必须采用 https 而非 ssh 协议(否则会收到构建失败的邮件通知)。以下是将 Reveal.js 作为 Submodule 引入的命令:

1
git submodule add https://github.com/hakimel/reveal.js.git

之后将你的 index.html 中对于 Reveal.js 文件的应用都加上 reveal.js/ 的目录前缀即可。

其他详情可以参考我的站点仓库 DreaminginCodeZH/slides.zhanghai.me

结语

Reveal.js 是一个易用而优雅的 HTML 演示文稿框架,借助于它,我已经多年没有用过 PowerPoint 了。至于利用 GitHub Pages 将它放置在网页端,则可以在免运维的情况下可靠地分享自己的演示文稿,同时也可以不用安装大量 npm 依赖来开启演讲者视图,算是一个简单又有用的小技巧。

因此,将我的配置过程和结果记录在此,希望能对他人有所帮助。