If you're new to SiteBud CMS, please familiarize yourself with our documentation first. This template forms the foundation for your unique requirements, enabling you to add custom elements and create personalized React components.
For a detailed guide on getting started and developing a new website with SiteBud CMS, please refer to our Getting Started tutorial and How To series.
The structure of the starter template is as follows:
data- Directory containing JSON content data files, managed by SiteBud CMS. Manual editing is not recommended.data-config- Houses the SiteBud CMS data schema configuration. This directory contains theimagessubdirectory for document, block, and component images.public- Holds public static resources, forming a part of the standard structure of a Next.js app.schema- Contains TypeScript configuration files for documents, blocks, etc., generated byschema/generate.tsand outputted todata-config.src- The standard structure directory of a Next.js app, consisting of:pages- Next.js pages Routes.pages/api- API routes.adapters- Generated adapters utility (refer to documentation for more details). Manual editing is not recommended.components- React components.icons- SVG icon files used in the website.styles- CSS files for custom classes and Tailwind CSS.PageFacade.tsx- The entry point for rendering any page using fetched data from Pages Routes.
This template includes a sample block demonstrating all possible data values in the SiteBud CMS UI.
- MainPage - The home page of the website.
- SamplePage - A sample page that renders the document data based on the sample block configuration.
- Clone the repository to your local machine.
- Open the
.env.localfile and set theREPO,OWNER, andSB_SECRETenvironment variables. - Run
yarn installto install the project dependencies. - Execute
yarn devto start the Next.js development server. - Navigate to
http://localhost:3000in your web browser. - Access the SiteBud CMS system page by appending
/adminto the URL. This will automatically create theworkbranch as a copy of themainbranch. - Define documents and blocks and add them to the document in the
schemadirectory. - Generate the document configuration index file, along with adapter types and utility functions, by running
yarn generate. - Develop React components using the generated adapter types and functions.
- Push all changes to the
workbranch of the repository and refresh the SiteBud CMS page. - Use SiteBud CMS to add content to your website, and preview changes.
- If changes to the document configuration are required, modify the
schemadirectory, regenerate the JSON index file and adapters, push these changes to theworkbranch, and reload the CMS page.
For any questions, please post in the Discussion forum of SiteBud CMS.