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 #
- Create a new branch of the web.dev repository.
- Depending on what you're writing, copy the post template directory (
_template-post
) or the codelab template directory (_template-codelab
) insrc/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
- Codelabs and posts that will live in a collection go in
- 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.