diff --git a/codelabs/publish-technical-tutorials-in-google-godelab-format/codelab.json b/codelabs/publish-technical-tutorials-in-google-godelab-format/codelab.json index fce2ee1..d240ad7 100644 --- a/codelabs/publish-technical-tutorials-in-google-godelab-format/codelab.json +++ b/codelabs/publish-technical-tutorials-in-google-godelab-format/codelab.json @@ -3,7 +3,7 @@ "format": "html", "prefix": "https://storage.googleapis.com", "mainga": "UA-49880327-14", - "updated": "2024-11-17T21:18:31+08:00", + "updated": "2024-11-17T21:22:19+08:00", "id": "publish-technical-tutorials-in-google-godelab-format", "duration": 12, "title": "使用 Google Codelab 格式编写技术教程", diff --git a/codelabs/publish-technical-tutorials-in-google-godelab-format/img/a2207184ab03afeb.webp b/codelabs/publish-technical-tutorials-in-google-godelab-format/img/a2207184ab03afeb.webp new file mode 100644 index 0000000..1b3eb8d Binary files /dev/null and b/codelabs/publish-technical-tutorials-in-google-godelab-format/img/a2207184ab03afeb.webp differ diff --git a/codelabs/publish-technical-tutorials-in-google-godelab-format/index.html b/codelabs/publish-technical-tutorials-in-google-godelab-format/index.html index 2e316a9..f4eb524 100644 --- a/codelabs/publish-technical-tutorials-in-google-godelab-format/index.html +++ b/codelabs/publish-technical-tutorials-in-google-godelab-format/index.html @@ -32,7 +32,7 @@

Google Developers Codelab 提供了一种引导式编码实践教程体验。大部分 Codelab 会逐步介绍开发小应用或在现有应用中新增功能的过程。其友好的交互体验,以及丰富的资源,使得 Codelab 成为学习新技能的好方法。Google Codelabs 网站可以通过 https://codelabs.developers.google.cn/?hl=zh-cn 网址访问。

当然,因为 Google 开源了这个网站构建工具,我们也可以基于该工具搭建我们自己的 Codelabs。我们要搭建的网站效果如下截图

alt text

-

本文参考自: https://medium.com/@zarinlo/publish-technical-tutorials-in-google-codelab-format-b07ef76972cd

+

本文参考自: https://medium.com/@zarinlo/publish-technical-tutorials-in-google-codelab-format-b07ef76972cd,并使用该作者的素材,加以优化。

@@ -218,7 +218,8 @@
# 指定codelabs目录为codelabs网站内容目录并运行网站
 gulp serve --codelabs-dir=codelabs
 
-

成功执行之后,再次打开浏览器,我们新建的文章就出来了,可以通过这个链接访问我新建的效果 https://codelabs.webtech.wiki/codelabs/how-to-write-a-codelab/index.html#0

+

成功执行之后,再次打开浏览器,我们新建的文章就显示在 Codelabs 主页里了,并且也在对应的 codelab 分类中。效果如下图:

+

alt text

@@ -257,23 +258,23 @@ - name: Set up Node.js uses: actions/setup-node@v2 with: - node-version: '12' # 设置 Node.js 版本为 12 + node-version: '12' # Step 3: Install dependencies - name: Install dependencies run: | - npm install && npm install -g gulp-cli # 安装项目依赖 + npm install && npm install -g gulp-cli # Step 4: Build the project - name: Build project run: | - gulp dist --codelabs-dir=codelabs # 运行打包命令 + gulp dist --codelabs-dir=codelabs # Step 5: Upload dist folder - name: Upload dist directory as artifact uses: actions/upload-pages-artifact@v1 with: - path: ./dist # 上传 dist 目录中的内容 + path: ./dist # Deployment job deploy: