This tutorial shows you how to create and host your own codelabs on GitHub. In this tutorial you will do the following:

• setup your own codelabs plateform.
• create your very first codelab tutorial.

Prerequesites

• Install go
• install npm and Node.js to quickly boot up a http server.

The CLaaT project, Codelabs as a Thing, is the tool behind codelabs that gives developers around the world a hands-on experience with Google products.

This project has been implemented as a volunteer project by a small group of dedicated Googlers who care deeply about this kind of "learning by doing" approach to education and it is opened for anyone to use.

So before building codelabs-based tutorials, you will need to install claat, the tool that will convert your formatted tutorial (from a Google Docs or from a markdown file) to a codelab.

Follow these instructions for installation: https://github.com/googlecodelabs/tools/blob/master/claat/README.md#install

Test your installation by typing claat --help. If the help doesn't show up, make sure you properly installed go.

You can use this tutorial as an example of markdown-based codelabs.

• Download this file to serve as template or example: https://raw.githubusercontent.com/Patechoc/codelabs/master/build-your-own-codelabs.md
• Change the content of the tutorial
• Generate your tutorial into a "codelab" from your markdown by replacing "CODELAB-NAME" with the name of your file: claat export --prefix "../../" -o docs CODELAB-NAME.md
• Build all the required dependencies and render the generated codelabs as it/they would appear in production: cd docs && claat build

Eventually you can also serve the final app in a simple web server for viewing exported codelabs locally: claat serve
It takes no arguments and presents the current directory contents.

Official instructions are here

I haven't tried yet as I am a big fan of Markdown, but this might be a quicker way to build more elaborate tutorials.

• Go to the GitHub repository that will host your codelabs (e.g. https://github.com/Patechoc/codelabs)
• Click on the Settings tab at the top of the page
• Scroll down to the GiHub Pages section
• Selecting the Source to be "master branch /docs folder" and clicking Save will activate GitHub Pages.

GitHub generates a url to the HTML content served (e.g. https://patechoc.github.io/codelabs/.).

Congratulations! Your generated codelabs under docs/ are now hosted by GitHub ;)