Planning

This tutorial builds one small site from start to finish: Shadow Dojo, a ninja school with lessons and a shop.

Before writing any code, know what the site is made of. List every page and the content on it, find what repeats across pages, and decide where content should be stored. Anything that shows up in more than one place should be referenced, so there's a single source of truth. Pull content that lives in another system instead of maintaining two sources of truth.

FAQ

In what order should I follow this tutorial? This tutorial starts from the markup: write the components as plain HTML, mark dynamic data, then derive the schemas from those marks. When the content already exists (e.g. external data or exports), start from the schemas instead and build components around them.

Should the navigation and footer be documents of their own? They can be. Think about simplicity, putting them in one single settings document can reduce the number of references.

Example

Shadow Dojo has a home page, a lessons page, a shop, and a page per lesson and per product. What repeats:

• Settings holds what every page shares: the site's name, the navigation and the footer.
• Page is the layout home, lessons and shop have in common (e.g. a hero and a few sections).
• Lesson appears in lists on the home and lessons pages, and each one has a page of its own.
• Product appears in lists on the home and shop pages, and each one has a page of its own.

The dojo already sells its gear on Shopify, so products are pulled from there (see Connecting data). Lessons don't exist anywhere else yet, so editors write them by hand.