Posts and codelabs

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

Get started #

1. Create a new branch of the web.dev 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:

     secure/
     ├── codelab-same-origin-fetch/
     │   └── index.md

Add front matter #

See YAML front matter.

Authoring tips #

Use relative URLs to link to other posts and codelabs on web.dev.

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.