Posts and codelabs

Posts and codelabs

Updated

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.

Don't

https://web.dev/some-article

Do

/some-article

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

Don't

https://web.dev/some-article/image.png

Do

./image.png

Preview your content

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

Last updated: Improve article