通過這個簡單的工作流程建立的研討會幻燈片，可以在任何瀏覽器、裝置和平台上獲得一致的檢視效果。
無論你是學習者還是教師，你可能都會認識到採用幻燈片放映來傳播知識的線上研討會的價值。如果你曾經偶然看到過這樣一個逐頁、逐章設定的井井有條的教學，你可能會想知道建立這樣的一個網站有多難。
好吧，讓我在這裡向你展示，使用全自動化的流程來生成這樣的教學是多麼容易。
當我開始將學習內容放到網上置時，體驗並不是很好。我想要的是一種可重複的、一致的、易於維護的東西，因為我的內容會隨著我教學的技術發展而變化。
我嘗試了許多交付模型，從 Asciidoctor 這樣的低階程式碼生成器到在單個 PDF 檔案中放置教學。全都不能讓我滿意。當我舉辦現場的在座研討會時，我喜歡使用幻燈片放映，因此我想知道我是否可以為我自己的線上的，自定進度的研討會體驗做同樣的事情。
經過一番挖掘，我為建立無痛的研討會網站打下了基礎。當時我已經在使用一個簡報生成框架，這對我來說是很有幫助的，因為這個框架可以產生對網站友好的格式（HTML）。
這裡是這個專案所需要的基本元件。
如果這個列表看起來令人望而生畏，那麼有一個快速入門的方法，不需要把所有的東西一個個都拉到一起。你可以用我的模板專案來給你提供幻燈片和專案設定的入門教學。
本文假設你熟悉 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，因為它能在本地瀏覽器中提供頁面預覽。這對我在將內容推播到研討會網站之前測試內容時很有幫助。
檔案 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 目錄是用來儲存你想在研討會幻燈片上使用的圖片。例如，我通常會把展示研討會主題進展的截圖放在我的個人幻燈片上。
現在，你只需要知道你需要將背景圖片儲存在一個子目錄（backgrounds）中，並將你計劃在幻燈片中使用的圖片儲存在 images 目錄中。
現在你已經把這兩個檔案整理好了，剩下的時間你就可以在 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。
要了解更多關於這個工作流程可以做什麼，請檢視下面的範例研討會和託管了研討會集合的網站。所有這些都是基於本文中描述的工作流程。
研討會例子：
研討會集合：
我希望這本新手指南和模板研討會專案能讓你看到，在開發和維護研討會網站的過程中，可以輕鬆、無痛地完成。我也希望這個工作流程能讓你的研討會受眾幾乎在任何裝置上都能完全存取你的內容，這樣他們就能從你分享的知識中學習到你的知識。