Overview
In this tutorial, you’ll learn how to create a website UI using Builder.io, manage it with CloudCannon CMS, and host it on Vercel.
Step 1: Designing the UI with Builder.io
-
Sign Up for Builder.io:
- Go to Builder.io and sign up for an account.
- Once signed in, create a new space.
-
Design Your Website:
- Use Builder.io’s visual editor to design your website.
- Drag and drop elements to create pages like Home, About, Contact, etc.
- For each element, you can customize properties like layout, style, and content.
-
Setting Up a Data Model (Optional):
- If you want dynamic content, set up a data model in Builder.io.
- Create fields for dynamic content like blog post titles, images, etc.
-
Integrate Your Design:
- After finalizing your design, you can integrate it into your project.
- Builder.io provides SDKs for popular frameworks like React, Vue, and Angular.
Step 2: Setting Up CloudCannon CMS
-
Sign Up for CloudCannon:
- Visit CloudCannon and create an account.
- Choose a plan that suits your needs.
-
Connect Your Repository:
- CloudCannon works with Git-based workflows.
- Connect your GitHub, GitLab, or Bitbucket repository that contains your website’s code.
-
Configure Your CMS:
- Set up your content files and folders in CloudCannon.
- Define editable regions in your HTML or markdown files to allow for content editing.
-
Sync Content with Builder.io (If Needed):
- If you’re using dynamic content from Builder.io, ensure that it syncs with CloudCannon.
- You may need to write custom scripts or use webhooks to achieve this.
Step 3: Hosting on Vercel
-
Push Your Project to GitHub:
- Make sure your complete website code, along with the Builder.io integration, is pushed to a GitHub repository.
-
Sign Up for Vercel:
- Go to Vercel and sign up for an account.
- Connect your GitHub account to Vercel.
-
Deploy Your Website:
- Create a new project in Vercel and import your GitHub repository.
- Vercel will detect your project type and suggest build settings. Adjust these as necessary.
- Deploy your site. Vercel will give you a URL to access your live site.
Step 4: Finalizing and Testing
-
Check Your Live Site:
- Visit the URL provided by Vercel to see your live site.
- Test all pages and links to ensure everything works as expected.
-
Update Content via CloudCannon:
- Log in to CloudCannon and make changes to your site’s content.
- Check if the updates are reflected on your live site.
-
Iterate and Improve:
- Based on feedback or requirements, make further changes using Builder.io and CloudCannon.
- Sync changes and redeploy through Vercel as needed.
Conclusion
You’ve now successfully created a website using Builder.io for UI design, managed it with CloudCannon CMS, and hosted it on Vercel. This combination offers a powerful, flexible, and scalable solution for web development, allowing for easy updates and efficient deployment.