## Theme Organization **Do:** Adopt the standard Ghost theme layout with dedicated folders for assets (css, js, images), partials, and core templates like index.hbs, post.hbs, and default.hbs. *Example:* ``` assets/ css/ main.css js/ app.js partials/ header.hbs index.hbs ``` **Don't:** Scatter files randomly or ignore Ghost's conventions, leading to maintenance issues. *Example:* Avoid placing CSS directly in root without assets/ folder. ## Component Creation **Do:** Build reusable Handlebars partials for components, composing them efficiently and using Ghost helpers like {{content}}. *Example:* In partials/card.hbs: ```handlebars

{{{content}}}

``` Include via {{> card}}. **Don't:** Duplicate code across templates or overuse inline styles instead of partials. *Example:* Never repeat header markup in every page.hbs. ## Routing Setup **Do:** Leverage routes.yaml for custom paths, dynamic slugs, and collection templates while handling 404s with error.hbs. *Example:* routes.yaml: ```yaml routes: /blog/:slug/: template: custom-post collections: /blog/: permalink: /blog/{slug}/ ``` **Don't:** Rely solely on default hierarchy without custom routes for complex navigation. *Example:* Skip routes.yaml for multi-author blogs, causing poor organization. ## Content Handling **Do:** Query via Ghost Content API with filters, tags, authors, and pagination for dynamic lists. *Example:* ```handlebars {{#foreach posts}} {{title}} {{/foreach}} {{pagination}} ``` **Don't:** Hardcode content or ignore relationships like primary/secondary tags. *Example:* Avoid static lists; use API for fresh data. ## Performance Boost **Do:** Apply lazy loading, defer JS, preload critical assets, and use Ghost's image optimization with Alpine.js for interactivity. *Example:* `

` **Don't:** Load heavy scripts synchronously or skip caching. *Example:* Never use `

Rules

Ghost CMS Tailwind CSS Theme Rules: Best Practices for Performance and Scalability

Ghost Theme Designer Pro