Posts and codelabs

Posts and codelabs


This post is about how to set up a new post or codelab so it works correctly on For guidelines about what to put in your post, see the Content guidelines section.

Get started

  1. Create a new branch of the repository.
  2. Depending on what you're writing, copy the post template directory (_template-post) or the codelab template directory (_template-codelab) in src/site/_drafts to the appropriate location:
    • Codelabs and posts that will live in a collection go in src/site/content/en/<YOUR_LEARNING_PATH>
    • Posts that will live only on the blog go in src/site/content/en/blog
  3. Rename the template directory to match the content of your piece.
    • The folder name will become the URL for your piece, so it should be all lowercase, and words should be separated by hyphens.
    • Keep the name as short as possible while still being meaningful.
    • Codelabs always start with the codelab-* prefix. Example:
      ├── codelab-same-origin-fetch/
      │ └──

Add front matter

See YAML front matter.

Authoring tips

Use relative URLs to link to other posts and codelabs on




Use relative URLs to link to assets for the post or codelab.




Preview your content

Use the npm run dev command to start a local web server and watch for changes.

Last updated: Improve article