Tutorial: How to Create Your Website with AI

Introduction

This comprehensive guide will provide detailed instructions for creating a professional website for an AI community in Tokyo. The website will include email collection functionality and newsletter distribution capabilities, with Kantan CMS integration for streamlined content management.

Prerequisites

Before commencing this project, please ensure you have:

• Access to an AI coding assistant (e.g., Cursor, Cline, or Aider)
• Fundamental understanding of web development principles
• Kantan CMS account access (required for later stages)

Step 1: Develop a Structured Website Outline

A well-structured outline serves as the foundation for your web development project.

Instructions:

1. Launch your preferred AI coding assistant application
2. Input the following prompt to generate a structured outline:

I want to create a website about [your business/yourself]. It is 
- (feature 1)
- (feature 2)
- (feature 3)

Generate an outline based on the above information. I want it in markdown format.

Example:

I want to create a website about an AI community in Tokyo. It is 
- A hub for AI enthusiasts to connect and share knowledge
- A platform to distribute newsletters and free resources
- A system to collect email addresses for exclusive content distribution
- A calendar of AI events occurring in Tokyo

Generate an outline based on the above information. I want it in markdown format.

Explanation:

The outline will provide a framework for your website's structure and content organization.

Tip:

Carefully evaluate the generated outline to ensure it aligns with your objectives. Consider the logical flow of information and user experience when reviewing the structure.

Step 2: Create a Detailed Specification Sheet

The specification sheet functions as a technical blueprint for your website development.

Instructions:

1. Initiate a new conversation in your AI coding assistant
2. Submit the following prompt, customized to your specific requirements:

I want to create a website about [your business/yourself]. 
I want the website to have the following:
- Responsive Design
- use [preferred SSG framework]
- use [preferred CSS framework]
- use markdown to manage content
- [additional technical specifications]

Based on the following outline, generate a spec sheet to create the website.
I want it in markdown format (artifact).

[Insert your outline from Step 1]

Example:

I want to create a website about a community focused on AI in Tokyo. 
I want the website to have the following:
- Responsive Design
- use Next.js as SSG framework
- use Tailwind CSS
- use markdown to manage content
- have a dedicated news section page
- Include an email collection form on the homepage

Based on the following outline, generate a spec sheet to create the website.
I want it in markdown format (artifact).

[Insert your outline from Step 1]

Explanation:

This specification sheet establishes the technical parameters for your website, providing clear guidance for the development process.

Tip:

Be precise and comprehensive when specifying technical requirements, as these will directly influence the functionality and appearance of your website.

Step 3: Generate the Website

Instructions:

1. Select an appropriate website generation platform from the following options:
   • v0
   • bolt.new
   • lovable.dev
2. Enter your specifications from Step 2
3. Evaluate the generated code and implement any necessary modifications

Explanation:

These platforms utilize advanced algorithms to transform your specifications into functional website code.

Tip:

The initial generated code serves as a foundation that may require refinement to fully meet your specific needs.

Step 4: Create Sample Content

Instructions:

1. Determine the content collections required for your website (e.g., blog articles, event listings, resources)
2. Develop 3-5 sample content items for each collection
3. Utilize markdown formatting for consistent presentation

Example:

For a blog collection, create articles such as:

• "The Evolution of Tokyo's AI Community"
• "Emerging AI Research Trends from Japanese Academic Institutions"
• "Featured Profile: Innovative AI Startups in Tokyo"

Explanation:

Sample content demonstrates how your website will present information and helps identify any necessary design adjustments.

Tip:

Develop high-quality, representative content that accurately reflects the material your website will ultimately feature.

Step 5: Generate Kantan CMS API Key

Instructions:

1. Access the Kantan CMS administrative dashboard
2. Navigate to the Settings section, then select API Key
3. Select the "Create API Key" option
4. Document this key securely for subsequent integration

Explanation:

The API key enables secure communication between your website and the Kantan CMS system.

Important Security Notice:

This API key grants access to your content management system. Exercise appropriate security measures by never publishing it or including it in public code repositories.

Step 6: Download Kantan CMS MCP (Model Context Protocol)

Instructions:

1. Open your system's terminal application
2. Execute the following command to download the management control panel:

   git clone https://github.com/kantan-cms/kantan-cms-mcp.git

3. Configure the MCP server settings using this JSON template:

   {
     "mcpServers": {
       "kantan-cms-instruction": {
         "command": "python",
         "args": ["<absolute path to kantan-cms-mcp>/main.py"],
         "disabled": false,
         "env": {
           "PROJECT_ID": "<Project ID>",
           "CMS_API_KEY": "<API Key>"
         }
       }
     }
   }

4. Insert your project ID from the Hosting Page in place of <Project ID>
5. Insert your API key from Step 5 in place of <API Key>

Tip:

Verify that all path references are absolute and properly formatted to prevent configuration errors.

Step 7: Integrate the Email Collection Form

Instructions:

1. In your AI coding assistant, submit the following prompt:

   When posting a form at <page name>, I want to send data to a collection called <Collection Name>.
   Get the corresponding ID and the instructions to send form data to the collections, then modify <page name>.

2. Example implementation for this project:

   When posting a form at index.js, I want to send data to a collection called "Newsletter Subscribers".
   Get the corresponding ID and the instructions to send form data to the collections, then modify index.js.

3. Implement the generated code in your website files

Explanation:

This process connects your email collection form to the appropriate database collection in your CMS.

Tip:

Conduct thorough testing of the form functionality to confirm that data is being correctly captured and stored in your content management system.

Step 8: Create a Build and Upload Script

Instructions:

1. In your AI coding assistant, submit the following prompt:

   I want to integrate with Kantan CMS. 
   
   Create a build.sh script. I want to create a builder that gets records from collections from <Collection Names>, stores them at <markdown content directory>, and uploads the built website to Kantan CMS.

2. Save the resulting script as build.sh in your project's root directory

Explanation:

This script automates the process of retrieving content from your CMS, generating markdown files, and deploying your updated website.

Tip:

Execute this script whenever you need to update your website with new content or modifications.

Conclusion

Following this systematic approach, you have successfully created a professional website for your Tokyo-based AI community. The site now features email collection capabilities and Kantan CMS integration for efficient content management and newsletter distribution.

For optimal results, maintain regular content updates and actively engage with your community members to foster continued interest and growth.