梦断代码

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

张海
2 分钟读完

前言

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/ 的目录前缀即可。

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

结语

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

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