使用Reveal.js和Git創建網頁教程
通過這個簡單的工作流程創建的研討會幻燈片，可以在任何瀏覽器、設備和平臺上獲得一致的查看效果。
無論你是學習者還是教師，你可能都會認識到采用幻燈片放映來傳播知識的在線研討會的價值。如果你曾經偶然看到過這樣一個逐頁、逐章設置的井井有條的教程，你可能會想知道創建這樣的一個網站有多難。
好吧，讓我在這里向你展示，使用全自動化的流程來生成這樣的教程是多么容易。
介紹
當我開始將學習內容放到網上置時，體驗并不是很好。我想要的是一種可重復的、一致的、易于維護的東西，因為我的內容會隨著我教學的技術發展而變化。
我嘗試了許多交付模型，從 Asciidoctor 這樣的低級代碼生成器到在單個 PDF 文件中放置教程。全都不能讓我滿意。當我舉辦現場的在座研討會時，我喜歡使用幻燈片放映，因此我想知道我是否可以為我自己的在線的，自定進度的研討會體驗做同樣的事情。
經過一番挖掘，我為創建無痛的研討會網站打下了基礎。當時我已經在使用一個演示文稿生成框架，這對我來說是很有幫助的，因為這個框架可以產生對網站友好的格式（HTML）。
設置
這里是這個項目所需要的基本組件。
- 研討會的想法（這是你的問題，我幫不了你）
- 用于研討會幻燈片的 Reveal.js
- GitLab 項目倉庫
- 你常用的 HTML 代碼編輯器
- Web 瀏覽器
- 在你的機器上安裝好 Git
如果這個列表看起來令人望而生畏，那么有一個快速入門的方法，不需要把所有的東西一個個都拉到一起。你可以用我的模板項目來給你提供幻燈片和項目設置的入門教程。
本文假設你熟悉 Git 和在 Git 平臺（如 GitLab）上托管項目。如果你需要指導或教程，請查看我們的Git 入門系列。
首先，將模板項目克隆到本地機器上。
$ git clone https://gitlab.com/eschabell/beginners-guide-automated-workshops.git
為此設置一個新的 GitLab 項目，導入模板項目作為初始導入。
研討會網站有一些重要的文件。在根目錄下，你會發現一個名為 .gitlab-ci.yml 的文件，當你向主分支提交修改時（即將拉取請求合并到 master 分支），這個文件會作為觸發器。它可以觸發將 slides 目錄的全部內容復制到 GitLab 項目的 website 文件夾中。
我把它托管在我的 GitLab 賬戶中，名為 beginners-guide-automated-workshops。當它部署完畢后，你可以在瀏覽器中通過導航到下列地址查看 slides 目錄的內容:
https://eschabell.gitlab.io/beginners-guide-automated-workshops
對于你的用戶帳戶和項目，URL 如下所示：
https://[YOUR_USERNAME].gitlab.io/[YOUR_PROJECT_NAME]
這些是你開始創建網站內容所需要的基本素材。當你推送修改后，它們會自動生成更新過的研討會網站。請注意，默認模板包含了幾個示例幻燈片，這將是你完成對存儲庫的完整簽入后的第一個研討會網站。
研討會模板生成的結果是一個 receive.js 幻燈片，可以在任何瀏覽器中運行，并可以自動調整大小，幾乎可以讓任何人在任何地方、任何設備上觀看。
這樣創建一個方便、易訪問的研討會怎么樣？
它是如何工作的
有了這些背景信息，你就可以開始探索研討會的這些素材，并開始把你的內容放在一起了。你需要的一切都可以在項目的 slides 目錄中找到；這里是使用 reveal.js 在瀏覽器中創建研討會幻燈片的地方。
你將用來制作研討會的文件和目錄是：
default.css文件images目錄index.html文件
在你常用的 HTML/CSS 編輯器中打開每一個文件，然后進行下面描述的修改。你用哪個編輯器并不重要，我更喜歡 RubyMine IDE，因為它能在本地瀏覽器中提供頁面預覽。這對我在將內容推送到研討會網站之前測試內容時很有幫助。
default.css 文件
文件 css/theme/default.css 是一個基礎文件，你將在這里為你的研討會幻燈片設置重要的全局設置。其中值得注意的兩個主要的項目是所有幻燈片的默認字體和背景圖片。
在 default.css 中，看一下標有 GLOBAL STYLES 的部分。當前的默認字體在這一行中列出了。
font-family: "Red Hat Display", "Overpass", san-serif;
如果你使用的是非標準字體類型，則必須在以下行中將其導入（Overpass 字體類型就是這樣做的）：
@import url('SOME_URL');
background 是你創建的每張幻燈片的默認圖像。它存儲在 images 目錄下（見下面），并在下面這一行中設置（重點是圖像路徑）。
background: url("…/…/images/backgrounds/basic.png")
要設置一個默認背景，只需將這一行指向你要使用的圖片。
images 目錄
顧名思義，images 目錄是用來存儲你想在研討會幻燈片上使用的圖片。例如，我通常會把展示研討會主題進展的截圖放在我的個人幻燈片上。
現在，你只需要知道你需要將背景圖片存儲在一個子目錄（backgrounds）中，并將你計劃在幻燈片中使用的圖片存儲在 images 目錄中。
index.html 文件
現在你已經把這兩個文件整理好了，剩下的時間你就可以在 HTML 文件中創建幻燈片了，從 index.html 開始。為了讓你的研討會網站開始成形，請注意這個文件中的以下三個部分。
head部分，在這里你可以設置標題、作者和描述。body部分，你可以在這里找到要設計的單個幻燈片。- 你可以在每個
section中定義各個幻燈片的內容。
從 head 部分開始，因為它在頂部。模板項目有三個占位符行供你更新。
<title>INSERT-YOUR-TITLE-HERE</title><meta name="description" content="YOUR DESCIPTION HERE."><meta name="author" content="YOUR NAME">
title 標簽包含文件打開時顯示在瀏覽器選項卡中的文字。請將其改為與你的研討會的標題相關的內容（或研討會的某個部分），但記得要簡短，因為標簽頁的標題空間有限。description 元標簽包含了對你的工作坊的簡短描述，而 author 元標簽是你應該把你的名字（如果你是為別人寫的，則是工作坊創建者的名字）。
現在繼續到 body 部分。你會注意到它被分成了許多 section 標簽。body 的開頭包含了一個注釋，說明你正在為每個標有 section 的打開和關閉的標簽創建幻燈片。
<body><div class="reveal"><!-- Any section element inside of this container is displayed as a slide --><div class="slides">
接下來，創建你的各個幻燈片，每張幻燈片都用 section 標簽封裝起來。這個模板包括了一些幻燈片來幫助你開始制作。例如，這里是第一張幻燈片。
<section><div style="width: 1056px; height: 300px"><h1>Beginners guide</h1><h2>to automated workshops</h2></div><div style="width: 1056px; height: 200px; text-align: left">Brought to you by,<br/>YOUR-NAME<br/></div><aside class="notes">Here are notes: Welcome to the workshop!</aside></section>
這張幻燈片有兩個區域，用 div 標簽分隔。用空格隔開了標題和作者。
如果你有一定的 HTML 使用知識，可以嘗試各種東西來開發你的研討會。使用瀏覽器預覽結果的時候真的很方便。有些 IDE 提供了本地查看修改，但你也可以打開 index.html 文件查看你的修改，然后再推送到資源庫中。
一旦你對你的研討會感到滿意，推送你的修改，然后等待它們通過持續集成管道。它們將像模板項目一樣被托管在 https://eschabell.gitlab.io/beginners-guide-automated-workshops。
