Ok, been meaning to write a post on this for a long time. So finally getting round to it. I thought I would show off how I build sites, integrate them with a full CMS and build features. Several of the tools I use do have costs associated with them, however I think that the costs are pretty low and they are each massive time savers.
My Tools
| Tool | Cost | Description |
|---|---|---|
| Bootstrap Studio | — | Used to build and design the sites. |
| Laragon | $10 (lifetime) | Lets you run a local webserver at the click of a button and sets up dev environments and local domains. |
| Cursor | $20/month | Provides AI-assisted development, converting designs into themes and building features. Includes credits then pay-as-you-go. |
| Context7 | Free | Plugin for Cursor that allows AI agents to look up OctoberCMS documentation. |
| OctoberCMS | $39/year | Powerful CMS with Tailor (YAML-based content builder). First license key is free with one year of updates. |
My process
- First I design my site within Bootstrap Studio. I will create each unique page in my design, anywhere I am creating pages that will have dynamic content later edited in the CMS, I design a template of how this content is laid out. But I won’t add all the pages, this will be done later in OctoberCMS.
- Once done, I launch Laragon and setup a new blank project. Laragon will instantly create me a local .test domain, a project root folder in my www directory and a MySQL database.
- I then create a new folder inside the www/project folder called Export, this is where I then export all the assets from Bootstrap Studio to.
- I then install OctoberCMS using the web based installer, in the same folder as the Export folder is stored. Once completed I can move onto the building stage.
- I open Cursor and point it to my project folder, I then instruct the AI agent using my custom rules, to create a new OctoberCMS theme from the designs in the Export folder.
- Once Cursor has done this, I check the site. Test the features and pages, then if its all good I move on to producing the features.
- I ask the AI agent in Cursor to make Tailor Blueprints, these are used by OctoberCMS to build backend pages for inputs and allow us to add data to the site and create new pages.
- I then test these features, and instruct the AI agent on any fixes it need to complete.
This system allows me to design, build and complete sites quickly and efficiently at very low costs, much lower than I would charge per hour to do this manually.
Video on all this information
Here is the rules I use within Cursor, updated to be more strict about how the AI should use this workflow.
AI Rules
You are assisting with an OctoberCMS project. Treat this as an OctoberCMS-first codebase at all times.
Core behaviour:
- Always recognise and strictly follow OctoberCMS conventions.
- Always use the MCP Context7 tool to check OctoberCMS documentation and up-to-date sources before making implementation decisions.
- Never rely on memory alone for framework behaviour when documentation can be checked.
- If anything is ambiguous, unclear, or incomplete, ask follow-up questions before proceeding.
- Do not guess intended behaviour.
Tool usage:
- Use Cursor tool calls to inspect, edit, create, move, or analyse files.
- Do not use terminal or shell commands for file system interaction.
- Never use commands when a Cursor tool call is available.
- All file operations must be done via Cursor tools.
OctoberCMS approach:
- Always build features the OctoberCMS way.
- Do not re-invent systems that OctoberCMS already provides.
- Before writing custom logic, check whether OctoberCMS already has a native feature, component, Tailor capability, CMS feature, or backend pattern for it.
- Prefer native OctoberCMS solutions over custom implementations.
- Follow OctoberCMS conventions for structure, naming, and organisation at all times.
Design-to-theme process (STRICT WORKFLOW)
When converting a design into an OctoberCMS theme, follow this exact order:
-
Create the theme:
- Create a new folder inside the
themesdirectory. - Create the required theme metadata files (e.g. theme configuration/metadata files).
- Do not proceed further until the base theme structure exists.
- Create a new folder inside the
-
Request assets:
- Instruct the user to supply the
assetsfolder from their exported Bootstrap Studio design. - The user must copy or drop the exported assets into the theme folder.
- Do NOT assume asset structure.
- Do NOT recreate assets manually.
- Instruct the user to supply the
-
STOP:
- Do not build layouts, partials, or pages until assets are provided.
- Only proceed early if the user explicitly asks to continue with placeholder assets.
-
Analyse design:
- Once assets are present, analyse the design as a system.
- Identify:
- Shared layout structure
- Repeated UI components
- Global sections (header, footer, nav, etc.)
- Reusable content blocks
-
Build structure:
- Create layouts for shared page scaffolding.
- Extract reusable elements into partials.
- Organise partials into logical folders (e.g.
Site,Sections,Forms,Components).
-
Build pages:
- Pages should only contain page-specific content.
- Do not duplicate layout or component markup inside pages.
Theme asset handling
-
All theme asset paths MUST use the OctoberCMS theme filter.
-
Correct usage:
{{ ‘assets/css/styles.css’|theme }} -
Apply this to:
- CSS files
- JavaScript files
- Images
- Fonts
- Any static asset
-
Never:
- Hardcode relative paths like
/assets/... - Use raw paths without the
|themefilter
- Hardcode relative paths like
-
Always assume assets live inside the theme’s
assetsdirectory unless confirmed otherwise.
Theme development rules
-
Always extract repeated UI into partials.
-
Group partials into folders based on purpose:
Site(navbar, footer, global elements)Sections(page sections)Forms,Cards, etc. where appropriate
-
Layouts must contain:
<html>,<head>,<body>- Global CSS/JS includes
- Header/footer structure
-
Pages must:
- Be minimal
- Use layouts and partials
- Not duplicate shared markup
-
Always think in reusable systems, not individual pages.
Tailor (CRITICAL RULES)
When working with Tailor blueprints and YAML:
-
DO NOT manually create a
titlefield.- OctoberCMS automatically provides a title field.
-
DO NOT manually create a
slugfield.- OctoberCMS automatically generates and manages slugs.
-
DO NOT add form inputs for:
- Title
- Slug
-
Only define fields that are actually needed for the content model.
-
Keep Tailor blueprints:
- Minimal
- Clean
- Focused on real data requirements
-
Use OctoberCMS conventions for:
- Field types
- Relations
- Structures (entries, singles, etc.)
-
If unsure how to structure Tailor content:
- Check documentation using MCP Context7
- Follow official patterns instead of inventing new ones
Decision making
-
If unsure where something belongs, determine whether it should be:
- Layout
- Page
- Partial
- Component
- Tailor blueprint
- Plugin
-
Always verify using OctoberCMS documentation before deciding.
General standards
- Prefer clean, maintainable, conventional code.
- Follow OctoberCMS structure and best practices strictly.
- Avoid unnecessary abstraction or custom architecture.
- Reuse instead of duplicate.
Here is also the install wizard for OctoberCMS
Hopefully this workflow peeks your interest, if anyone has any questions I would be delighted to answer them and provide assistance with setting up and working with these tools!