讓你從此擺脫優(yōu)盤和連接線，瀟灑從容走向講臺。
需求
曾經(jīng)，我們對于“放幻燈”的刻板印象，是拿著一個優(yōu)盤，或者舉著自己的筆記本電腦走向講臺。經(jīng)過識別優(yōu)盤或者連線成功之后，開始播放幻燈片，娓娓道來。
最近一段時間，不論是看學生展示，還是聽講座，抑或是參加國際學術(shù)會議，我發(fā)現(xiàn)越來越多的人，開始擺脫優(yōu)盤與自己的筆記本電腦，轉(zhuǎn)而使用在線形式來放幻燈了。
他們?yōu)t灑地走到講臺電腦前，打開瀏覽器，輸入一段網(wǎng)址。然后幻燈就出現(xiàn)了。
這樣一來，至少有以下幾個好處：
- 減少了優(yōu)盤插拔可能帶來的病毒感染
- 避免了電腦連接線不匹配帶來的尷尬
- 演講后，易于分享幻燈
我觀察了一下，大部分人使用的，都還是 Powerpoint 文件。
他們只需要把 PPT 文件寄存在一個公開或者私有的網(wǎng)盤上面，打開即可。
但這對于講臺電腦，還是有一些條件限制的。
例如，至少需要安裝了 Powerpoint 。
如果你讀過我之前的教程，便會發(fā)現(xiàn)相對于 Powerpoint ，我更加偏愛 Reveal.js 這樣的 HTML 5 幻燈。
因為它可控性強，開源免費，播放環(huán)境普遍（只要瀏覽器），而且還支持從簡單的標記語言（例如 Markdown ）轉(zhuǎn)換。
我就在想，有沒有可能，講臺電腦只需安裝一個瀏覽器，便能播放幻燈呢？
經(jīng)過一番嘗試，答案是可以的。
我還找到了一個幻燈片共享與托管服務(wù)，叫做 slides.com 。
它支持導入本地的 Reveal.js 幻燈，在線播放與分享。
可問題是，這個在線服務(wù)，要收費。
于是我就開始琢磨，有沒有辦法，用免費的文件托管方式，來寄存、放映和分享 Reveal.js 之類的 HTML 5 幻燈？
功夫不負有心人，我還真找到了解決方案。
我們將要使用的平臺，正是在我的系列教程中反復(fù)提及的 Github 。
幻燈準備
為了在 Github 播放幻燈，你首先需要有一個制作好的 Reveal.js 幻燈。
關(guān)于 Reveal.js 幻燈，我在《如何把思維導圖秒變成幻燈？》和《如何用 Markdown 做幻燈？》兩篇文章里都為你介紹過。
說明一下，《如何把思維導圖秒變成幻燈？》一文寫作時間較久，當時的工具包，還是 Python 2 。更建議你使用《如何用 Markdown 做幻燈？》一文中較新的 Python 3 代碼，來把 Markdown 轉(zhuǎn)換成為幻燈。
你還可以用許多第三方工具來生成 Reveal.js 幻燈。在 Reveal.js 官網(wǎng)，對這些工具都有細致的介紹。
為了簡明起見，本文我們依然使用《如何用 Markdown 做幻燈？》中的幻燈樣例。
它麻雀雖小，五臟俱全。包含了文字、漸進列表條目、全屏圖片、內(nèi)嵌圖片、視頻等元素。
你可以點擊這個鏈接查看播放效果。
幻燈的 Markdown 源代碼，你可以從這個 Github 鏈接下載。
按照《如何用 Markdown 做幻燈？》文中的步驟，你可以自己很快地在本地生成 Reveal.js 幻燈。
這里，為了方便你使用，我把生成好之后的幻燈打了個壓縮包，請你到這個鏈接下載。
解壓后，請你先嘗試本地打開播放。
本地運行無誤后，我來給你介紹怎么把它搬到 Github 上，直接在線播放。
新建 Github 項目
你可以為自己的幻燈，新建一個 Github 項目。
本文中，我會詳細為你介紹步驟。
如果你希望進一步了解 Github 的使用方法和技巧，請參考我這篇《如何高效入門Github？》。
你需要在 Github 創(chuàng)建并且登錄你的個人賬戶。
在本地計算機，也需要下載安裝 Github 的命令行工具包。
如果你對命令行操作不熟悉，沒關(guān)系，請參考我的這一份命令行使用視頻教程。
在頁面左上方，點擊綠色的“New”按鈕。
在設(shè)置頁面中，輸入你想要的 Github 項目名稱。
本文中，我們使用的是 demo-slides-play-on-github 。
點擊綠色的 “Create Repository” 按鈕，你的新項目就生成了。它大約是這個樣子：
在上圖頁面中，點擊右側(cè)的“Clone or Download” 按鈕。
點擊右側(cè)的剪貼板圖標，復(fù)制項目的 HTTPS 地址。
打開終端，輸入以下命令。其中最后的地址，是你剛才復(fù)制來的。粘貼即可。
git clone https://github.com/wshuyi/demo-slides-play-on-github.git
于是，你本地就有了一個新的目錄，它和你在 Github 上面新創(chuàng)建的這個項目內(nèi)容完全一樣。
讓我們打開看看：
到了這一步，你就把本地文件夾與遠程 Github 項目倉庫同步起來了。下面我們就可以把 Reveal.js 幻燈上傳。
上傳幻燈
上傳的方式非常簡單，首先，從之前解壓后的壓縮包里面，把全部文件拷貝到當前項目文件夾。
你本地文件夾就變成了這個樣子：
下面我們回到終端，執(zhí)行以下三條指令：
git add .
git commit -m "init"
git push
執(zhí)行結(jié)果如下：
我們回到 Github 項目頁面下，刷新。
你的幻燈相關(guān)文件都在這里了，對吧？
下面我們來嘗試打開，看能否顯示出 HTML 5 幻燈的炫酷效果。
嘗試打開
點擊項目頁面中的 slide.html 文件。
我們期待的，是漂亮的幻燈播放出來。
然而，效果卻是這個樣子的：
這是什么東西？
它是 HTML 文件源代碼。
我能用它給觀眾演示嗎？
當然不行。
你可能有 Github 使用經(jīng)驗，于是有了疑問：
能否用“原始文件”(Raw)方式開啟
slide.html呢？
很好的問題。但如果你嘗試，效果是這樣的：
雖然顯示的結(jié)果不同，但依然只是源代碼，對實現(xiàn)我們的目標沒有什么幫助。
這是怎么回事兒呢？
其實，這是因為 Github 并不會主動渲染項目中寄存的 HTML 文件。
默認設(shè)置中，它只會為你呈現(xiàn)它們的原始樣貌（源代碼）。
怎么辦？
我們的嘗試失敗了嗎？
沒有。
下面這個步驟，才是重點。
Github Pages
回到你的 Github 項目頁面。
點擊 “Settings” 標簽欄。
滾動頁面，找到下面這個位置：
默認情況下， Github Pages 選項是關(guān)閉的。
你需要點擊上圖中標紅的位置，把選項改成這樣：
保存設(shè)置之后，要牢記這個頁面中的一行網(wǎng)絡(luò)地址，下圖中已標記。
在你的瀏覽器里面，輸入上述網(wǎng)址，接著輸入你的 slides.html 文件名稱。
也就是 https://wshuyi.github.io/demo-slides-play-on-github/slide.html
看看會出現(xiàn)什么：
嘗試右鍵前進，看看圖片、視頻是否都可以正常顯示。
成功了！
后續(xù)工作
你可能會覺得這套流程有些繁瑣。
沒錯。
但是，繁瑣的簡單任務(wù)序列，實際上是很好的現(xiàn)象。
因為我們可以充分利用所學的 Python 知識。編寫腳本，把繁復(fù)的工作，變得自動化。
這一部分，因為篇幅所限，就不在這里詳細說明了。
希望你能夠舉一反三，自己編一個好用的腳本出來。
也歡迎你把自己嘗試的結(jié)果和代碼地址發(fā)到留言區(qū)，分享給大家。
小結(jié)
通過本文的學習，希望你已經(jīng)了解了以下知識點：
- 如何利用 git 命令，把 Reveal.js 以及類似的 HTML 5 幻燈免費存放在 Github 上
- 如何利用 Github Pages ，直接在線播放和分享 Reveal.js 幻燈
這樣一個工具，能讓你從此擺脫優(yōu)盤和連接線，瀟灑從容走向講臺。在課堂展示或者學術(shù)報告中，直接在瀏覽器輸入網(wǎng)址，就開始精彩的講解匯報。
祝你的演講如虎添翼，大獲成功！
延伸閱讀
你可能也會對以下話題感興趣。點擊鏈接就可以查看。
喜歡別忘了點贊。
還可以微信關(guān)注我的公眾號“玉樹芝蘭”(nkwangshuyi)。別忘了加星標，以免錯過新推送提示。
題圖： Photo by Teemu Paananen on Unsplash
