Code Monkey home page Code Monkey logo

starter's Introduction

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

starter's People

Contributors

ipselon avatar sitebud avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.