在codelabs上學習如何搭建自己的codelabs

開頭情景劇

kk ：如何在codelabs上學習如何搭建自己的codelabs?
knight：看這個codelab就行了，一步一步的操作ok了
kk：那你這個codelab 怎么做的，
knight：這個codelab就是我寫的如何搭建codelab的教程，
kk：哦，那你這個codelab 怎么做的，
knight：
…… N小時之后
🤷?♂🤷?♂🤷?♂禁止套娃，此情景對話以拋StackOverflowError

下面內容也是如何搭建自己的codelabs的教程，一起看看吧，

什么是Codelabs

相信很多人應該用過，反正作為android開發者我經常可以看到，
官方介紹

Codelabs提供了一個指導、教程、實踐的編碼體驗 ，特別喜歡它按步驟的互動方式，如下圖所示

需要安裝的軟體

1. GO語言
2. Node.js v10+和npm
3. claat（由谷歌維護的開源命令列工具）

1和2 安裝應該沒啥大問題，claat有點麻煩，按檔案說的只要執行安裝就行了

go get github.com/googlecodelabs/tools/claat

由于網路原因，可能會卡在這里不動，我是用了一個go的代理，配置參考檔案如下
https://github.com/goproxy/goproxy.cn/blob/master/README.zh-CN.md

配置好了，有反應了，又提示編譯版本不必配

compile: version "go1.15.6" does not match go tool version "go1.15.2"

版本不一樣不能編譯？？？，無奈 我只好重新下載一個版本相同go安裝

需要的代碼

git  clone https://github.com/googlecodelabs/tools

如果clone 慢的話，可以使用github鏡像試試 git clone https://github.com.cnpmjs.org/googlecodelabs/tools

構建第一個Codelab

在剛clone 代碼site 下新建一個codelabs目錄（在那件檔案夾都可以，為了方便下面操作就這樣建立檔案夾了），在codelabs在創建一個assets 用于存放圖片等資源

在codelabs 添加一個first_codelab.md檔案，內容如下

summary: 測驗，第一個codelab
id: first_codelab
categories: Android
tags: android
status: Published 
authors: kk
Feedback Link: https://github.com/wkk-knight/

<!-- 標題  用一級-->
# 第一個codelab 

<!------------------- 步驟1 步驟用二級標簽 --------------->
## 開始學習
<!-- 這一步估計需要的時間-->
Duration: 1 
<!-- 第一步的內容 start  -->
### 啦啦啦
測驗
寫你想寫的內容 
用md語法寫就行
<!-- 第一步的內容 end  -->


<!-------------------- 步驟 2------------------------>
## 學會了嗎？
Duration: 2
<!-- 第二步的內容 start  -->
學會了嗎？
來點代碼
?```kotlin
fun main() {
    println("hello world")
}
<!-- 第二步的內容 end  -->

<!-------------------- 步驟 3------------------------>

## 學廢了嗎？

Duration: 3
<!-- 第三步的內容 start  -->
學廢了嗎？
再來點代碼

?```kotlin
fun main() {
    println("hello world")
}
?```

<!-- 第三步的內容 end  -->

<!-------------------- 步驟 3------------------------>

## 結束

Duration: 1

![alt-text-here](assets/Android_logo.png)

💡 如果在Windows系統寫這個md 檔案，使用的編輯器一定要用unix 的換行格式
，否則你會發現輸出的格式會有例外，這個換行符在vs code 等編輯器可以修改的，

根據上面的md檔案生成對應html檔案，執行下面命令

claat export first_codelab.md 

執行結束，看到ok 就說明執行成功了

執行成功后會發現對應的html檔案

把index.html 打開就可以看到效果了

在克隆的專案中有個示例在sample檔案夾中，打開里面的codelab-4-codelab-markdown/index.html就可以看到效果了，這個例子就是教如何創建一個codeLab的codelab，

串列展示

啟動

Codelab 做好了，我還要把這些用串列的形式展示 https://codelabs.developers.google.com/

這個界面的代碼也是有的，就在我們剛才下載的代碼site目錄下，安裝site目錄下的ERADME.md 我們來運行一下，

## 進入site目錄
cd site
##安裝依賴
npm install
## 啟動服務
gulp serve

如果npm install 很慢的話，可以嘗試設定一些淘寶的鏡像 npm config ``set`` registry http://registry.npm.taobao.org

服務啟動后 打開 http://localhost:8000 就可以看到效果了

開源的代碼是老版本的，沒有更新，所以看上去和網站上的有區別，但功能都是一樣的，

關聯Codelab

把我們剛才寫的codelab 顯示在串列中，我們使用下面命令部署串列

gulp serve --codelabs-dir=codelabs

啟動的時候，指定codelabs 所在的目錄就可以了設定

添加類別

在串列的又上角有個下拉選單，可以選擇類別，默認有個Visual Studio Live 版本，我們也可以自己添加一個 比如Android

在site/app/views 下面創建類別檔案夾

檔案夾需要一個logo圖片（svg 或者125x125的png圖片）還有一個view.json的檔案 用來描述頁面內容
view.json

{
  "title": "Android",
  "description": "這是Android 板塊",
  "logoUrl": "/android/Android_logo.png",
  "tags": ["android"]
}

title：類別的標題，description 類別的描述，logoUrl：串列的logo地址，tags 是和codelab 檔案上tags 設定的tags是有關聯的，相同的話，就會在這個類別顯示這個codelab

部署

在上面執行完 gulp serve --codelabs-dir=codelabs 命令后，就生成一個build檔案，這個檔案中就是靜態的html 檔案，可以部署到github pages 上或者自己服務器

還有一種打包方式是

#打包并啟動服務
gulp serve:dist  --codelabs-dir=codelabs
#直接打包，不啟動服務
gulp dist  --codelabs-dir=codelabs

這種輸入的靜態檔案在dist中，代碼會壓縮體積更小

檔案中列出了以來幾種方式部署

我覺得就github pages 簡單😁 其他我也不懂呀 ￣□￣｜｜我覺得Github pages 訪問有點慢，就部署到碼云上的pages了，效果如下

https://knight-kk.gitee.io/

參考檔案

https://github.com/googlecodelabs/tools/blob/master/site/README.md

https://medium.com/@zarinlo/publish-technical-tutorials-in-google-codelab-format-b07ef76972cd