Skip to content
Learn Measure Blog Case studies About
On this page
  • Get started
  • Add front matter
  • Authoring tips
  • Preview your content

Posts and codelabs

Jun 26, 2019 — Updated Jun 29, 2020
On this page
  • Get started
  • Add front matter
  • Authoring tips
  • Preview your content

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: Jun 29, 2020 — Improve article
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.