以Google Codelab 格式发布技术指南

安装软件

Go language
Node.js v10+ 和 npm
claat (google维护的开源命令行工具)

配置go环境

安装Go之后，将以下内容添加到您的 bash_profile:

## not required if you’re only using Go modules 
export GOPATH=$HOME/go
export GOROOT=/usr/local/go
## required 
export PATH=$PATH:$HOME/go/bin

管理claat

下载二进制文件并将其移至$HOME/go/bin目录。
仔细检查您是否对该二进制文件具有执行特权。如果不确定，请在二进制文件所在的目录中运行以下命令：

chmod u+x claat

设置登录页面

Codelabs登陆页面是由一群人慷慨开发的，并已进入GitHub。我们要做的就是克隆项目

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

克隆项目后，进入site文件夹并安装所有依赖项：

## navigate to folder
cd site/
## install dependencies
npm install
npm install -g gulp-cli

要在开发模式下为该站点提供服务，请运行以下命令，默认情况下，您应该看到服务器在http://localhost:8000上运行。

gulp serve

Running via Terminal

Codelab landing page running locally

现在我们已经设置了登录页面，让我们编写一个codelab。

编写示例Codelab

编写codelab的妙处在于，您不必因为用HTML编写代码而受苦。您可以选择markdown或Google文档。由于后勤原因，
我不得不使用markdown，因为google docs必须在Google Docs上发布，而且我还是在一家银行工作，所以这种情况不会发生。

我可以向您展示codelab功能的最好方法就是给您一个示例markdown文件，并向您显示几乎所有可能显示的项目。

首先，我们在site 目录下创建一个codelabs目录。然后在codelabs文件夹中创建一个assets文件夹，
以便您可以在其中放置你的Codelabs可能需要的图像或其他项目

## create codelabs folder
mkdir codelabs
## go into directory
cd codelabs/
## create assets folder
mkdir assets

您的文件夹结构现在应如下所示

tools
|-- site
|--|-- codelabs
|--|--|-- assets

在codelabs文件夹中，使用以下名称和内容创建一个markdown文件：

文件名: how-to-write-a-codelab.md

内容:

summary: How to Write a Codelab
id: how-to-write-a-codelab
categories: Sample
tags: medium
status: Published 
authors: Zarin
Feedback Link: https://zarin.io

# How to Write a Codelab
<!-- ------------------------ -->
## Overview 
Duration: 1

### What You’ll Learn 
- how to set the amount of time each slide will take to finish 
- how to include code snippets 
- how to hyperlink items 
- how to include images 
- other stuff

<!-- ------------------------ -->
## Setting Duration
Duration: 2

To indicate how long each slide will take to go through, set the `Duration` under each Heading 2 (i.e. `##`) to an integer. 
The integers refer to minutes. If you set `Duration: 4` then a particular slide will take 4 minutes to complete. 

The total time will automatically be calculated for you and will be displayed on the codelab once you create it. 

<!-- ------------------------ -->
## Code Snippets
Duration: 3

To include code snippets you can do a few things. 
- Inline highlighting can be done using the tiny tick mark on your keyboard: "`"
- Embedded code

### JavaScript

```javascript
{ 
  key1: "string", 
  key2: integer,
  key3: "string"
}
```

### Java

```java
for (statement 1; statement 2; statement 3) {
  // code block to be executed
}
```

<!-- ------------------------ -->
## Hyperlinking and Embedded Images
Duration: 1
### Hyperlinking
[Youtube - Halsey Playlists](https://www.youtube.com/user/iamhalsey/playlists)

### Images
![alt-text-here](assets/puppy.jpg)

<!-- ------------------------ -->
## Other Stuff
Duration: 1

Checkout the official documentation here: [Codelab Formatting Guide](https://github.com/googlecodelabs/tools/blob/master/FORMAT-GUIDE.md)

在assets 文件夹中，添加一个JPEG图像并将其重命名为：puppy.jpg。这只是出于演示目的。

保存markdown后，使用claat工具将其导出为HTML。在 codelabs目录中，运行以下命令即可：

## go into codelabs folder
cd codelabs
## export md to html
claat export how-to-write-a-codelab.md

Output for claat command

当您导出markdown时，claat将基于该markdown文件的id生成一个文件夹，
该id是您在示例markdown顶部的metadata中指定的。
每次修改markdown文件时，都必须将其导出，以便传播更改。您的新文件系统应如下所示：

Filesystem after running claat export within codelabs directory

现在，您已经编写了第一个codelab，您希望能够在登录页面上看到它。
终止正在运行应用程序的初始会话，在site目录中，运行以下命令：

## go back to site folder
cd ..
## re-run command
gulp serve --codelabs-dir=codelabs

Landing page now rendering newly written codelab

Sample codelab on desktop

需要注意的是，用户界面具有responsive和移动友好性，因此登录页和codelabs不仅在台式机上而且在手机和平板电脑上的外观和效果都很好

Sample codelab on iPhone 6/7

我们快完成了。让我们在此页面上添加一些颜色，并确保将新的codelab分类为Sample。

Codelabs分类

在/site/app/styles下_categories.scss文件中底部添加您自己的条目。我添加了以下内容：

@include codelab-card(['sample'], #FC0023, 'sample.svg');

然后，我去了flaticon.com，搜索了“Sample”一词，并下载了一个test-tube的svg，
因为这是我的搜索结果中弹出的内容