在codelabs上学习如何搭建自己的codelabs

knight康康

Android开发者，CSDN、掘金、公众号同名

开头情景剧

kk ：如何在codelabs上学习如何搭建自己的codelabs?

knight：看这个codelab就行了，一步一步的操作ok了

kk：那你这个codelab 怎么做的。

knight：这个codelab就是我写的如何搭建codelab的教程。

kk：哦，那你这个codelab 怎么做的。

knight： ……

N小时之后

‍♂ ‍♂ ‍♂禁止套娃，此情景对话以抛StackOverflowError

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

什么是Codelabs

相信很多人应该用过，反正作为android开发者我经常可以看到。官方介绍

Codelabs提供了一个指导、教程、实践的编码体验，特别喜欢它按步骤的交互方式，如下图所示

需要安装的软件

GO语言
Node.js v10+和npm
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")
}
```
## 结束

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://github.com/googlecodelabs/tools/blob/master/site/README.md

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

关于我

发布于 2020-12-20 21:32

开发者

GitHub Pages

网站搭建