社群分享 — 工欲善其事，必先利其器

10 min readJun 19, 2020

其實知識分享本身最重要的還是內容的品質跟傳達的效果，這篇文章提到的東西只是希望盡量屏除一些雜訊的干擾，讓資訊分享者可以盡量專注在分享的內容上就好

Slides

General Concept Sharing

Source: DevOpsDays Taipei 2019 — Mastering IaC the DevOps Way

我做投影片的時候，會使用到幾個有提供免費 Google Slide Template 的網站，來讓自己的投影片有質感一些，畢竟自己沒有繪畫天份，搜尋一下，找個自己看起來覺得舒服的範本來使用，時間比較充裕的話可以選擇深色系的，時程很趕的話請選擇淺色系的，因為深色系在文字顏色的選擇和圖片的處理上需要耗費的功夫大很多，底下兩個是自己比較常用的 Slide 範本素材網站：

至於投影片用到的圖片，應該就跟大部分的人一樣，使用 Google Image 來做搜尋，不過在找圖的時候有一些自己的小技巧

可以用英文搜尋，找到的圖會比較多
搜尋的關鍵字可以使用一些抽象詞語，例如：Pain, Boring, Happy, Sad
或是加上 emoji, icon 去做交集搜尋，這樣可以找到比較多的 PNG 圖檔素材，使用起來會更方便
最後要記得注意圖片的版權問題

Detail Technique Sharing

Source: Mastering Infrastructure as Code Workshop

不過假如分享的內容有大量的程式碼，用傳統做投影片的方式其實有點太累了，例如幾百頁整天的實戰課程，自己之前有嘗試去找找看用 Markdown 自動轉成投影片的工具，不過用起來滿失敗的，一直到…最近跟 HashiCorp 官方合作，發現他們不只是推行 Infrastructure As Code，連 Slide As Code 也已經完美達成了XD 使用的是一個叫做 remark 的工具，可以像是寫 Markdown 的方式來撰寫投影片，然後他就會幫你轉換成靜態網頁，在使用上會需要至少兩個檔案

index.html (只截取 Body 的部分)

這個就是常見的網站首頁啦～裡面會先載入 remark-latest.min.js，請他去把我們的撰寫的投影片內容也就是 Markdown 檔案給載入進來

<body>    <script src="https://remarkjs.com/downloads/remark-latest.min.js" type="text/javascript"></script>    <script>
        remark.macros.scale = function (percentage) {
            var url = this;
            return '<img src="' + url + '" style="width: ' + percentage + '" />';
        };        // Place all of your files here
        sourceUrls = [
            'intro.md',
            'ch01.md',
            'ch02.md',
            ...
        ]        var xmlhttp = new XMLHttpRequest();
        var source = ""        for (var i = 0; i < sourceUrls.length; i++) {
           xmlhttp.open('GET', sourceUrls[i], false);
           xmlhttp.send();
           source += xmlhttp.responseText;          // Files shouldn't have --- at the head or foot
          // It is added automatically here
          if (i + 1 < sourceUrls.length) {
              source += "\n---\n"
          }
       };
       var slideshow = remark.create({
           ratio: '16:9',
           highlightLines: 'true',
           source: source
       });
    </script>
</body>

*.md (intro.md 的部分內容)

這個就是投影片的內容啦，詳細看一下，可以發現跟寫 Markdown 沒有什麼不同，只是會多搭配一些 remark 格式設定的語法在其中

name: Mastering Infrastructure as Code Workshop
class: center
![:scale 60%](images/intro/tf_aws.png)
<br><br>
# Mastering Infrastructure as Code Workshop
### Build AWS Resources with Infrastructure as Code

---
name: Link-to-Slide-Deck
# The Slide Deck
<br><br><br>
Follow along on your own computer at this link:

### <https://git.io/JfQrY>

---
name: Introduction
class: img-right-full

![](images/intro/profile.png)

# Hello!
## I am smalltown
  - MaiCoin Lead Site Reliability Engineering
  - Taipei HashiCorp User Group Organizer
  - AWS User Group Taiwan Staff
<br><br><br>
![:scale 100%](images/intro/profile-org.png)


???
介紹自己，提一些關於自己的背景故事，走一遍教室，讓學員介紹他們自己

詳細的撰寫方式可以參考官方的 Wiki，然後這邊推薦一個改的相當厲害的範本 1–2–3’s theme，看完會覺得，天阿，竟然可以做到這種程度，比用 Slide 軟體做出來的還厲害了，而這邊有從 HashiCorp 官方改過來的案例可供參考 Mastering Infrastructure as Code Workshop，連 Slide As Code 都做到了之後，就可以讓 Slide 內容 Modularized, Reuse, Code Review, Testing, Integrate CI/CD (一整個走火入魔XD)

Host Server

但要讓靜態網頁讓使用者可以看得到，不就要架網站，會不會很麻煩啊？！在架構上最簡單又免費的作法就是….

程式碼當然就是放在 GitHub 上嘍！
然後使用 GitHub Pages 來讓使用者存取
(非必要) 買個自己的網址，然後掛在 Cloudflare 上

使用 Cloudflare 就可以使用自己買的網址，並且解決 HTTPS 的問題，也可以設定一些簡單的 Redirect Rule，最重要的是…只要花買網址每年幾百元台幣的錢就好XD

Lab As Code

目前自己開的實戰課程，總是會遇到設定環境的問題，要避開這種問題的話提供個人和企業兩個相對應的解決方案

Personal

盡量不要讓學員直接安裝東西在自己的工作環境上，至少要使用 VM 或是 Container 的方式將環境隔離開來，避免在課程的一開始就花太多的時間在幫學員解決環境設定問題 😭 更進階一點的方式，就是使用類似 AWS Cloud9 這種線上開發環境，讓大家省掉安裝的時間，並且確保環境的一致性

Enterprise

假如是用企業身份開課的話，可建議公司購買 Instruqt 這個服務，簡單來說他就是一個線上學習平台，可以在裡面準備線上課程，每個人可以有獨立的實作環境 (有點像是 AWS Cloud9，可以直接使用 VSCode)，後面也可以直接整合好對應的 Cloud Provider，例如直接開 AWS 上面的資源，然後安排每個 Session 的內容教材，提示，要完成的挑戰，以及檢查學生有沒有做對，所以事先有準備好的話，學員實作的品質其實會好很多 (這邊有一個簡單的範例可以玩玩看)；最厲害的是它也可以達成 Lab As Code XD 就可以讓 Lab 內容 Modularized, Reuse, Code Review, Testing, Integrate CI/CD (一整個再度走火入魔XD)，像底下就是他用程式碼設定上課環境的一段 Sample Code

setup-workstation (一樣只擷取部分程式碼)

#!/bin/bashsource /etc/profile.d/instruqt-env.sh
source /root/.bashrc# clone the hashicat-aws repogit clone https://github.com/hashicorp/hashicat-aws
GITDIR="/root/hashicat-aws"
/bin/set-workdir "$GITDIR"cd ${GITDIR}echo -e "prefix = \"workshop\"" >> ${GITDIR}/terraform.tfvars
echo -e "\nregion = \"us-east-1\"" >> ${GITDIR}/terraform.tfvars# Just the public DNS pleasecat <<EOF > outputs.tf# Outputs file
output "catapp_url" {
    value = "http://\${aws_instance.hashicat.public_dns}"
}
EOF

使用類似 Instruqt 這種類似的平台工具之後，在課程中可以達到投影片內容只需要論述想要傳達的核心價值就好，不需要提到 Lab 實作的部分，因為在 Instruqt 裡面就會有動作做的內容，實作提示和結果檢查…等，假如學員沒有做對就不給進到下一關，也可以安插一些簡單的選擇題小考在其中，當作學習的 Checkpoint

Equipment

最後提到的是最重要的小事！古人有文房四寶，自己則是開課四寶XD

Type-C 變壓器

一整天待在外面，筆電沒有電是一定會遇到的，而要隨身攜帶就要輕一點小一點比較好攜帶，我自己是購買 Innergie PowerGear 60W USB-C 筆電充電器，放在包包裡面完全不佔空間

投影筆

這個雖然有些上課的教室就會準備，但沒有 Logitech SPOTLIGHT 這隻來得厲害，比一般的雷射筆效果好上一百倍還不止，可以讓學員很清楚的知道目前需要聚焦在投影片的哪一個地方

轉接頭

自己是用 MacBook，沒有轉接頭的話，根本沒有辦法接上其他的投影設備，而副廠的總是會遇到鬼，所以建議直接買原廠有 USB+HDMI 的版本，自己除了工作的地方有一個之外，也還多買一個放在身上，以備不時之需

行動電源

有時候會遇到會場沒有插頭或是講師休息室的囧況，所以準備一個兩萬毫安培具備 PD 且可以讓筆電充電的行動電源也是非常必要的，可以讓你充飽筆電跟手機至少一次，一天的課程應該還擋得住

Summary

假如運氣好，自己持續有在參與社群活動的話，這篇文章應該會一直不斷編輯更新，因為每次跟不同的夥伴合作後，總是可以讓我學到更多的東西 ^^