SiteBud CMS Starter Website Template

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.

Template Structure

The structure of the starter template is as follows:

1. data - Directory containing JSON content data files, managed by SiteBud CMS. Manual editing is not recommended.
2. data-config - Houses the SiteBud CMS data schema configuration. This directory contains the images subdirectory for document, block, and component images.
3. public - Holds public static resources, forming a part of the standard structure of a Next.js app.
4. schema - Contains TypeScript configuration files for documents, blocks, etc., generated by schema/generate.ts and outputted to data-config.
5. 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.

Key Features

This template includes a sample block demonstrating all possible data values in the SiteBud CMS UI.

Pages

1. MainPage - The home page of the website.
2. SamplePage - A sample page that renders the document data based on the sample block configuration.

Custom Template Development Process

1. Clone the repository to your local machine.
2. Open the .env.local file and set the REPO, OWNER, and SB_SECRET environment variables.
3. Run yarn install to install the project dependencies.
4. Execute yarn dev to start the Next.js development server.
5. Navigate to http://localhost:3000 in your web browser.
6. Access the SiteBud CMS system page by appending /admin to the URL. This will automatically create the work branch as a copy of the main branch.
7. Define documents and blocks and add them to the document in the schema directory.
8. Generate the document configuration index file, along with adapter types and utility functions, by running yarn generate.
9. Develop React components using the generated adapter types and functions.
10. Push all changes to the work branch of the repository and refresh the SiteBud CMS page.
11. Use SiteBud CMS to add content to your website, and preview changes.
12. If changes to the document configuration are required, modify the schema directory, regenerate the JSON index file and adapters, push these changes to the work branch, and reload the CMS page.

For any questions, please post in the Discussion forum of SiteBud CMS.

MIT License