Vibe coding is changing the way websites and web applications are built. Instead of writing every part of the code manually, today you can simply explain to an AI coding agent what kind of website you want, what design it should have, which pages you need and how the forms should work, and the agent can build the project, modify the files and help you with every future change.

In this guide, we will build something practical and easy to understand for a beginner: a complete company website with a homepage, services page, about page and a working contact form, and then publish it on a real .mk domain using Zemi.mk cPanel hosting.

For this, we will use one of the modern AI coding tools, GitHub for storing and managing the code, and Git Version Control in cPanel for deployment.

The complete process looks like this:

idea → AI → GitHub → Zemi.mk cPanel → your domain

Although this example focuses on a traditional company website, the same approach can also be used for much more advanced projects. Modern AI coding agents can help you create customer portals, administration panels, dashboards, PHP/MySQL systems, Node.js applications, Laravel projects, internal business tools and even complete SaaS applications, provided that the architecture is suitable for the hosting environment.

But we will start with the most practical example.

---

1. What are we going to build?

In this tutorial, we will create a company website with:

• a homepage;
• services presentation;
• an about section;
• responsive design for mobile, tablet and desktop;
• navigation;
• a contact page;
• a working contact form;
• server-side validation;
• basic protection against abuse;
• basic SEO setup;
• Git version history;
• a private GitHub repository;
• deployment to Zemi.mk cPanel hosting;
• SSL and your own domain.

You do not need to know PHP or Git in advance, and you do not need to be a professional developer. However, it is still important to review the changes made by AI and not give it uncontrolled access to your production environment.

---

2. First, you need Zemi.mk hosting and a domain

If you do not already have hosting, you can choose one of the Solo, Business or Premium cPanel hosting plans from Zemi.mk.

The main plans differ by storage, number of domains and available resources:

 

Plan	Storage	Domains	Best suited for
Solo	10 GB	1	one website, personal or small business project
Business	25 GB	3	more serious business websites and multiple projects
Premium Unlimited	unlimited according to the terms of use	10	multiple websites and projects with higher requirements

 

For projects that need more resources, Turbo versions with higher resource limits are also available.

For the website we are building in this tutorial, the Solo plan is perfectly suitable as a starting point. If your project grows later, you can move to Business, Premium or a Turbo plan without having to rebuild the website.

The Zemi.mk hosting environment includes tools such as:

• PHP;
• MySQL/MariaDB;
• Git Version Control;
• Node.js Selector;
• Composer;
• PHP CLI;
• Cron Jobs;
• SSL;
• LiteSpeed;
• Imunify360;
• backup management.

Zemi.mk hosting infrastructure provides 99.9% uptime, while depending on the service, up to two daily off-site backups are available, with incremental backup systems such as JetBackup and Backuply and simple management of available restore points.

When ordering hosting, you can also register a free .mk domain for the first year. You enter the available domain you want during the order process and complete the required electronic signing procedure for the .mk domain registration.

After successful payment or confirmation of payment, the hosting account is activated within a few minutes and the cPanel access details are sent to your email.

This means that before we even start writing the code, we already have a real domain and production hosting where the website will eventually run.

---

3. What are Git and GitHub?

Before we start, it is useful to understand two names that will appear throughout this guide.

Git is a system that tracks the history of your project. If AI modifies five files, Git knows which lines were added, which were removed and what the previous version looked like.

This is especially useful with vibe coding because an AI agent can modify many files in just a few seconds.

GitHub is an online service where we will store the Git repository.

In simple terms:

Your computer
      ↓
     Git
      ↓
   GitHub
      ↓
Zemi.mk cPanel
      ↓
 your .mk domain

In our example, GitHub is not the hosting platform for the website. It is where we store and organize the source code.

The actual website will run on Zemi.mk hosting.

---

4. Create a GitHub account

If you already have a GitHub account, you can skip this step.

If not, create a free account on GitHub. You will need a username, email address and password, and GitHub will ask you to verify your email address.

The free account is more than enough for this workflow and supports private repositories, which means the source code of your website does not have to be publicly visible.

It is also a good idea to enable two-factor authentication for additional account security.

---

5. Install GitHub Desktop

Git can be used entirely through the command line, but that makes the process unnecessarily complicated for a beginner.

For this reason, this guide uses GitHub Desktop.

With it, you can visually:

• create repositories;
• review the changes made by AI;
• create commits;
• send code to GitHub;
• download newer versions;
• see which files have changed.

After installing GitHub Desktop, choose:

Sign in to GitHub.com

Your browser will open, you will sign in to GitHub and approve the connection.

Do you need a GitHub API token?

For the workflow used in this guide, no.

GitHub Desktop authenticates through the browser and handles authentication for you. You do not need to manually create a Personal Access Token.

Tokens can be required for some other Git workflows, but there is no reason to add an unnecessary extra step for a beginner here.

---

6. Choose an AI coding tool

You can use:

• Cursor;
• OpenAI Codex;
• Claude Code;
• GitHub Copilot;
• Windsurf.

You do not have to commit to a single tool.

For example, you can start the project in Cursor, use Codex later to fix something, ask Claude Code to analyze backend logic and use GitHub Copilot for another change.

They can all work with the same project folder and the same Git repository.

For a beginner, Cursor is probably the easiest example, because the editor, project files, AI agent and Git integration are all available in one interface.

---

7. Create a new repository for the website

Open GitHub Desktop and choose:

File → New repository

For this example, we will call it:

my-company

In Name, enter:

my-company

In Local path, choose where you want the project to be stored on your computer.

You can also include a README.

Then click:

Create repository

GitHub Desktop will create a folder such as:

Documents/
└── GitHub/
    └── my-company/

This is the folder we will open in the AI coding tool.

---

8. Open the project in Cursor

In Cursor, choose:

File → Open Folder

and open:

my-company

At this point, the folder is almost empty, but the AI agent can build the entire website from scratch.

Now comes the most important part: the prompt.

---

9. Give the AI a specific prompt

Do not just write:

Build me a company website.

The more important constraints you provide at the beginning, the lower the chance that the AI will build something that later needs to be reworked.

For example:

Build a complete modern website for a consulting company. The website will be hosted on Zemi.mk cPanel shared hosting. Use PHP 8.x, HTML, CSS and JavaScript without requiring Docker, root access or separate server services. Create a homepage, About page, Services page and Contact page. The contact form must work through PHP, include server-side validation, CSRF protection, basic anti-spam protection and safely process all user input. The website must be fully responsive, fast and SEO-friendly. Keep all publicly accessible files inside /public. Do not place passwords, API keys or other secrets in source code or the Git repository.

You can also give it visual direction:

Keep the design clean, modern and corporate, with generous white space, serious typography and no cheap stock-style elements. I want it to feel like a professional website for a modern European B2B company.

The AI will start building the project structure.

---

10. What the project structure may look like

For our example, we may end up with something like:

my-company/
│
├── public/
│   ├── index.php
│   ├── about.php
│   ├── services.php
│   ├── contact.php
│   ├── send-contact.php
│   │
│   ├── css/
│   │   └── style.css
│   │
│   ├── js/
│   │   └── main.js
│   │
│   └── assets/
│       └── images/
│
├── src/
│   └── config/
│
├── .gitignore
├── .cpanel.yml
└── README.md

The exact structure does not have to be identical.

What matters is that the AI understands that:

• public website files belong in /public;
• secrets must not be stored in Git;
• the contact form needs real server-side processing;
• the project must work on standard PHP cPanel hosting.

---

11. Continue building the website through conversation

Once the AI creates the first version, you do not have to accept it as final.

You can tell it:

The hero section looks too generic. Make it more serious and simpler.

Then:

The mobile navigation is not good. Create a clean hamburger menu.

Then:

Add a section with three main services and a short call-to-action.

Then:

Improve the typography hierarchy without adding new fonts.

Then:

Review the whole website for accessibility issues.

And:

Verify that the contact form really validates data on the server side and not only with JavaScript.

This is the core of vibe coding. Instead of writing each line yourself, you guide the AI as it works on the project.

---

12. Make sure the contact form is real, not just visual

AI can easily create a form that looks good but does not actually work.

That is why you should explicitly ask:

Make sure the contact form actually works in production on PHP cPanel hosting. Validate all required fields on the server, validate the email address, limit input lengths, escape user-controlled output, include CSRF protection and basic anti-spam protection. Do not trust JavaScript validation alone.

The contact form can include:

• name;
• email;
• phone, if needed;
• subject;
• message.

Do not let the AI simply insert raw user input into email headers because that can create security problems.

You can also ask:

Review the contact form specifically for header injection, XSS, CSRF and obvious spam abuse risks.

For a more advanced production website, you can later integrate CAPTCHA or a transactional email provider, but a PHP contact form is sufficient for this basic tutorial.

---

13. Create .gitignore

In the root of the project, you should have:

.gitignore

For example:

.env
node_modules/
.DS_Store
*.log

Never commit:

• cPanel passwords;
• database passwords;
• SMTP passwords;
• SSH private keys;
• API keys;
• production .env;
• other credentials.

If the AI has inserted a password directly into a PHP file, ask:

Remove all hardcoded credentials and move all production-specific secrets outside the Git repository.

---

14. Review what the AI changed

Open GitHub Desktop.

On the left, you will see all files that were added or modified.

When you click a file, you can see the exact changes on the right.

You do not have to understand every line of code, but check whether:

• AI deleted something it should not have;
• it changed many unrelated files;
• it added passwords or API keys;
• it added strange dependencies;
• it left TODOs or placeholder code;
• the contact form really has backend processing.

Then enter a commit message such as:

Initial company website

and click:

Commit to main

---

15. Publish the repository on GitHub

In GitHub Desktop, click:

Publish repository

Keep this option enabled:

Keep this code private

Then click:

Publish Repository

The source code is now stored on GitHub, but it is not publicly available.

---

16. Sign in to Zemi.mk cPanel

After the Zemi.mk hosting package is activated, you will receive your cPanel login details.

Inside cPanel, you will find tools for:

• Files;
• Domains;
• SSL;
• PHP;
• MySQL;
• Git;
• Node.js;
• Cron Jobs;
• Backups;
• Security.

For deployment, the main tool we need is:

Git Version Control

If Terminal/SSH is required for working with a private repository and it is not enabled on your account, SSH access can be enabled on request by Zemi.mk support.

---

17. Connect the private GitHub repository to cPanel

Because the GitHub repository is private, cPanel needs permission to read it.

The cleanest approach is to use a Deploy Key.

A Deploy Key is an SSH key that gives cPanel read access only to a specific repository.

You are not giving cPanel your GitHub password.

You are not giving it a Personal Access Token.

And you are not giving it write access.

---

18. Create a Deploy Key

In cPanel, open:

Advanced → Terminal

Enter:

ssh-keygen -t rsa -f ~/.ssh/my-company -b 4096 -C "zemi-cpanel-github"

When asked for a passphrase, leave it empty and press Enter, because the server-side deployment needs to be able to use the key without requiring manual password entry each time.

You will get:

~/.ssh/my-company

and:

~/.ssh/my-company.pub

The file without .pub is the private key and should never be shared.

The .pub file is the public key.

---

19. Configure SSH for GitHub

In Terminal:

touch ~/.ssh/config
chmod 600 ~/.ssh/config

Then:

nano ~/.ssh/config

Add:

Host github.com
    IdentityFile ~/.ssh/my-company

Save with:

Ctrl + O

then Enter, followed by:

Ctrl + X

---

20. Copy the public key

Enter:

cat ~/.ssh/my-company.pub

You will see a long line beginning with something like:

ssh-rsa AAAA...

Copy the entire line.

---

21. Add the Deploy Key to GitHub

Open the repository on GitHub.

Go to:

Settings → Deploy keys → Add deploy key

For Title, enter:

Zemi.mk cPanel

Paste the public key into the Key field.

Leave:

Allow write access

disabled.

The production server only needs to read the source repository, not modify it.

Then click:

Add key

---

22. Test the connection

In cPanel Terminal:

ssh -i ~/.ssh/my-company -T [email protected]

The first time you connect, you may be asked to confirm the GitHub host key.

Check that the host is github.com and confirm.

If authentication is successful, GitHub will display a message saying that you have authenticated successfully but that shell access is not provided.

That is normal.

---

23. Create .cpanel.yml

cPanel uses .cpanel.yml to determine what should happen during deployment.

For our company website, all publicly accessible files are inside:

public/

Assume that the domain uses:

/home/CPANELUSERNAME/public_html/

Then .cpanel.yml can look like this:

---
deployment:
  tasks:
    - export DEPLOYPATH=/home/CPANELUSERNAME/public_html/
    - /bin/cp -R public/. $DEPLOYPATH

Replace CPANELUSERNAME with the username shown in cPanel.

If the website is hosted on an addon domain or subdomain, go to:

cPanel → Domains

and check its exact Document Root. Use that path instead.

---

24. Why do we deploy only /public?

It is not good practice to place the entire repository inside public_html.

The repository may contain:

• .git;
• README files;
• development files;
• configuration files;
• local scripts;
• other files that should not be publicly accessible.

That is why we intentionally deploy only the production web directory.

This keeps the setup cleaner and safer.

---

25. Commit .cpanel.yml

GitHub Desktop will show the new .cpanel.yml file.

Use a commit message such as:

Add cPanel deployment

Then:

Commit to main

and:

Push origin

GitHub now also contains the deployment configuration.

---

26. Clone the GitHub repository in cPanel

In cPanel, open:

Files → Git Version Control

Click:

Create

Leave this enabled:

Clone a Repository

On GitHub, open:

Code → SSH

and copy the URL, which will look similar to:

[email protected]:USERNAME/my-company.git

Paste it into:

Clone URL

For Repository Path, you can use:

/home/CPANELUSERNAME/repositories/my-company

Do not place the repository directly inside public_html.

For Repository Name, you can use:

Company Website

Then click:

Create

cPanel will clone the private repository.

---

27. Perform the first deployment

In:

cPanel → Git Version Control

find the repository.

Click:

Manage

Then:

Pull or Deploy

If .cpanel.yml is valid, you will have the option:

Deploy HEAD Commit

Click it.

cPanel will take the contents from:

public/

and deploy them to:

public_html/

Open your .mk domain.

Your AI-built company website is now live on Zemi.mk hosting.

---

28. Check that SSL is active

The website should work through:

https://

Zemi.mk hosting includes SSL, and you can check its status in cPanel through SSL/TLS or the relevant AutoSSL interface.

A production contact form should never be used over an unencrypted HTTP connection.

---

29. Test the contact form

Do not stop after checking whether the website simply opens.

Send a real message through the contact form.

Check:

• whether the form accepts a valid name;
• whether it rejects an invalid email address;
• whether required fields are truly required on the server side;
• whether the message is actually delivered;
• whether success and error messages are clear;
• whether HTML or script input in the message field is not executed;
• whether refreshing the page causes unwanted resubmission;
• whether the form is usable on mobile.

You can also ask the AI again:

Perform a security review of the contact form. Check server-side validation, CSRF protection, header injection risks, XSS risks, input length limits and obvious spam abuse. Do not change the design unless necessary.

---

30. Your everyday vibe coding workflow

Once the setup is complete, future changes become much simpler.

Suppose you want a new references section.

In Cursor:

Add a new client references section on the homepage. Match the current design system, make it responsive and do not change unrelated sections.

The AI makes the changes.

Review them in GitHub Desktop.

Then:

Commit → Push origin

In cPanel:

Git Version Control → Manage → Pull or Deploy

First:

Update from Remote

then:

Deploy HEAD Commit

The new version is live.

The full workflow looks like this:

Idea
 ↓
AI agent
 ↓
review changes
 ↓
GitHub Desktop
 ↓
Commit + Push
 ↓
GitHub
 ↓
cPanel Update from Remote
 ↓
Deploy HEAD Commit
 ↓
Zemi.mk hosting
 ↓
LIVE

---

31. Can deployment be automated later?

Yes.

cPanel also supports push deployment, so a more advanced user can eventually move to a workflow where a Git push automatically triggers the deployment.

However, for a beginner, the manual step:

Update from Remote → Deploy HEAD Commit

is actually useful.

It gives you one final control point before an AI-generated change becomes the production version.

Once you become comfortable with Git and deployment, automation is the natural next step.

---

32. What if the AI breaks something?

Git lets you track the history of the source code and return to a previous version.

But the production website is not only source code.

If you later have:

• a database;
• uploads;
• email data;
• dynamic content;

then backups become an additional layer of protection.

Zemi.mk provides up to two daily off-site backup copies, while JetBackup/Backuply and incremental backup mechanisms make it easier to manage available restore points.

With vibe coding, this becomes even more important because you can make in ten minutes a number of changes that used to take an entire working day.

Git protects the history of your code.

Backups protect your production environment and data.

---

33. What if you want to build a full application instead of a company website?

The same basic workflow still applies.

An AI coding agent does not have to create only presentation websites.

You can ask it to build:

• a customer portal;
• an admin panel;
• a booking system;
• a catalog;
• a custom CRM;
• an ERP module;
• a dashboard;
• a REST API;
• a PHP/MySQL application;
• a Laravel application;
• a Node.js backend;
• a SaaS prototype.

The difference is that the more complex the application becomes, the more important it is to tell the AI what production infrastructure is available.

For example:

This application will run on Zemi.mk cPanel shared hosting. Use only technologies and services compatible with that environment. Do not require Docker, Kubernetes, root-level daemons or infrastructure that assumes a dedicated VPS.

This helps the AI choose an architecture that matches the environment where the application will actually run.

---

34. Node.js is also available on Zemi.mk cPanel hosting

The Zemi.mk hosting environment also includes Node.js Selector, so you are not limited to PHP.

Through:

cPanel → Setup Node.js App

you can create a Node.js application, select an available Node.js version, application root, startup file, production mode and environment variables.

This allows AI to build a Node.js backend or even a complete Node.js web application, provided that it is compatible with the CloudLinux/Passenger environment.

For such a project, tell the AI from the beginning:

Build this Node.js application for Zemi.mk cPanel hosting using CloudLinux Node.js Selector and Passenger. Do not require Docker, root access or separate system daemons. Keep all credentials in environment variables and preserve compatibility with the hosting environment.

Node.js is already a separate topic and deserves its own detailed tutorial, but it is important to know that vibe coding on Zemi.mk does not end with HTML and PHP.

---

35. React and Vite can also be used

If you want AI to build a React or Vite frontend, Node.js may only be required during development and build.

For example:

npm run build

may generate:

dist/

which can then be deployed as a normal static website.

If the project also includes a real Node.js backend, the backend can be configured through Node.js Selector.

That is why you should always ask the AI:

Does this project need a persistent Node.js server in production, or can the final frontend be deployed as static files?

The answer will tell you which deployment model you need.

---

36. Do not blindly deploy AI changes to production

Vibe coding does not mean that you should stop checking what is happening.

Be particularly careful when AI changes:

• contact form logic;
• authentication;
• database queries;
• file uploads;
• payments;
• user permissions;
• .htaccess;
• API integrations;
• email sending;
• production configuration.

A good prompt before a commit is:

Review everything you changed, make sure no unrelated files were modified, check for obvious security issues and prepare the project for commit. Do not deploy anything and do not expose production credentials.

Then you review the diff and decide whether the change should go live.

---

37. Why does hosting still matter in the AI era?

AI lowers the barrier to creating web projects.

A company that previously had to hire a developer for every small change can now build prototypes, landing pages, internal tools and even complete applications much faster.

But AI does not replace:

• the domain;
• DNS;
• the server;
• PHP or Node.js runtime;
• the database;
• SSL;
• backups;
• security;
• uptime.

When the website becomes a real part of the business, infrastructure matters even more.

Zemi.mk hosting provides 99.9% uptime, SSL, cPanel, CloudLinux, LiteSpeed, Imunify360, Git Version Control, PHP/MySQL, Node.js Selector and a backup system.

AI makes development faster.

Hosting turns the code into a real website that needs to remain available.

---

38. Solo, Business or Premium?

For the company website we built in this tutorial, Solo is the logical starting point.

If the company later needs more websites, a larger project, more storage or additional applications, it can move to Business or Premium.

If the project becomes significantly more resource-intensive, Turbo versions with higher limits are also available.

The important part is that you do not need to know from day one how large the project will become.

You can start with a simple company website and tomorrow use the same Git/AI/cPanel workflow for a much more serious application.

---

From a prompt to a real website

A few years ago, someone without development experience would have had a hard time building a serious business website with custom code, a working contact form, version control and production deployment.

Today, AI coding tools have dramatically lowered that barrier.

Cursor, Codex, Claude Code, GitHub Copilot or Windsurf can help build the project.

Git remembers every version.

GitHub stores the source code.

cPanel deploys it.

And Zemi.mk hosting provides the domain, SSL certificate, PHP and Node.js runtime, backups, security layer and infrastructure where the website actually runs.

With Solo, Business and Premium hosting, a free .mk domain with the initial registration, Git Version Control, Node.js Selector, PHP/MySQL, Composer, Cron Jobs, 99.9% uptime and up to two daily off-site backups, you can start with an empty folder and an AI prompt and end up with a real website running on your own domain.

Prompt. Review. Push. Deploy. Live.

Vibe coding on Zemi.mk.