When I was building below4k.ai, I kept using the phrase “the website”. It sounds like one thing. In practice, several services sit behind what appears in the browser.
AI helped me build these parts, but I still needed to understand what each one did. Otherwise, when I wanted to make a change or fix a problem, I would not know where it belonged.
This is the simple map I needed.
| What needs doing | Service | Its job |
|---|---|---|
| Build the pages and control how the website works | Next.js | Creates the website application. |
| Store editable content | Sanity | Holds articles, projects and other published material. |
| Track changes to the code | Git | Track changes to the code. |
| Keep the code online | GitHub | Stores the Git repository online. |
| Publish the website | Vercel | Builds the code and makes the website available online. |
| Manage the website address | Porkbun | Manages the domain name and its DNS settings. |
| Store Contact-form messages | Supabase | Keeps information submitted through the website. |
| Send a Contact notification | Resend | Sends an email when a message arrives. |
You do not need to understand every technical detail before building a website. You do, however, need a basic idea of where each part belongs.
Start with what the website needs to do
Before choosing any technology, it helps to separate the work into a few questions:
- What will visitors see and use?
- Where will the content be stored?
- Where will the website code be kept?
- How will the website be published?
- Does it need to receive or store information?
- Does it need to send email?
- What address will people use to reach it?
A simple website may need only a few of these components. More services are added when the website needs to do more.
Next.js: the website application
Next.js is the framework used to build below4k.ai.
A framework gives the project an organised way to create pages, layouts, navigation and interactive features. It provides a working structure instead of requiring every part to be created from the beginning.
Next.js controls things such as:
- which page appears at a particular address;
- how the navigation works;
- how articles and projects are laid out;
- how the website gets content from Sanity;
- what happens when someone submits the Contact form.
An address inside the website is often called a route. For example, `/articles` leads to the Articles page. The Contact form also sends its information to a route that works behind the public page.
The Next.js project lives in a folder on the computer. This is the working version of the website, where changes are made and checked before they are published.
Sanity: the editorial content
Sanity is the content management system, or CMS.
A CMS is a place where content can be written, edited and published without changing the website code directly.
For below4k.ai, Sanity holds things such as articles, projects, curated resources, page introductions, images, titles and descriptions.
Sanity is not the website itself. It stores the content, while Next.js decides how that content should appear.
For example, Sanity may hold an article’s title, body and image. Next.js gets that information and places it into the article-page design. This means I can publish an article or correct some wording without changing the website code each time.
Git and GitHub: keeping track of the code
The website code changes as the project develops. Git records those changes.
A saved set of changes is called a commit. Each commit creates a point in the project’s history. This makes it possible to see what changed and return to an earlier version when necessary.
Git works with the project on the computer. GitHub stores the project and its Git history online.
The distinction is:
- Git tracks the changes.
- GitHub keeps the tracked project online.
GitHub is not the live website. In this stack, it provides the code that Vercel uses to create the live version.
Vercel: publishing the website
Vercel builds, publishes and hosts the Next.js application.
To build the website means turning its code into a version that can be served to visitors. To deploy it means making that version available online.
When changes are sent to GitHub, Vercel can build a preview version for checking. Changes sent to the production branch can create the live version of the website.
The path is:
`Project on the computer → Git commit → GitHub → Vercel → live website`
This makes publishing repeatable. The live website comes from recorded code rather than from files copied manually to a server.
Vercel also runs some of the work that happens behind the public pages. For below4k.ai, this includes receiving the Contact form, storing its information and sending the email notification.
Porkbun: the domain
The domain is the public address: `below4k.ai`.
It is registered and managed through Porkbun. Porkbun also provides access to the domain’s DNS settings.
DNS stands for Domain Name System. It connects a readable address such as `below4k.ai` to the service where the website is hosted.
The domain does not contain the website. It tells the browser where to find it:
`below4k.ai → Vercel → Next.js application`
Once that connection is set up, visitors can use the domain without needing to know anything about the services behind it.
Supabase: storing submitted information
Editorial content belongs in Sanity, but information sent through the website needs somewhere else to live.
Below4k.ai uses Supabase to store messages submitted through the Contact form. Supabase provides a database, which is an organised place for saving information so it can be found and managed later.
When someone sends a message, the website passes it to the part of Next.js working behind the page. That part checks the submission and saves it in Supabase.
Sanity and Supabase therefore have different jobs:
- Sanity stores material published by the website owner.
- Supabase stores information submitted through the website.
Not every publishing website needs a separate database. It becomes useful when the website needs to receive and remember information rather than only display content.
Resend: sending the notification
Saving a Contact message is only part of the job. I also need to know that it has arrived.
Resend sends the email notification after the website receives the submission.
Supabase keeps the message. Resend sends the notification. One visible feature uses two services because storing information and sending email are separate jobs.
How the stack connects
The easiest way to understand the complete stack is to follow a few common activities:
| What happens | Path |
|---|---|
| A visitor opens the website | Browser → below4k.ai → Vercel → Next.js → page displayed |
| I change the website | Project on the computer → Git → GitHub → Vercel → updated website |
| I publish an article | Sanity → Next.js → article page → visitor’s browser |
| A visitor sends a message | Contact form → Next.js → Supabase + Resend |
The exact timing of a Sanity update depends on how the website has been set up. The basic jobs remain the same: Sanity holds the content and Next.js presents it.
A sensible order for a first website
For someone building a similar website, the components can be introduced gradually:
1. Define what the website needs to publish.
2. Build the pages and layout in the website application.
3. Use Git to track changes and GitHub to keep the repository online.
4. Deploy the application through a hosting service such as Vercel.
5. Connect the domain and its DNS settings.
6. Add a CMS when content needs to be edited and published regularly.
7. Add a database, email service or other connection only when the website needs it.
AI can help create the code and connect these services, but it does not make them all the same thing. Each service still has its own job.
The aim is not to collect as many services as possible, or to understand every technical detail before starting. It is to give each necessary job a clear home. Once you can see that map, the technology stack becomes much less mysterious.
When I was building below4k.ai, I kept using the phrase “the website”. It sounds like one thing. In practice, several services sit behind what appears in the browser.
AI helped me build these parts, but I still needed to understand what each one did. Otherwise, when I wanted to make a change or fix a problem, I would not know where it belonged.
This is the simple map I needed.
| What needs doing | Service | Its job |
|---|---|---|
| Build the pages and control how the website works | Next.js | Creates the website application. |
| Store editable content | Sanity | Holds articles, projects and other published material. |
| Track changes to the code | Git | Track changes to the code. |
| Keep the code online | GitHub | Stores the Git repository online. |
| Publish the website | Vercel | Builds the code and makes the website available online. |
| Manage the website address | Porkbun | Manages the domain name and its DNS settings. |
| Store Contact-form messages | Supabase | Keeps information submitted through the website. |
| Send a Contact notification | Resend | Sends an email when a message arrives. |
You do not need to understand every technical detail before building a website. You do, however, need a basic idea of where each part belongs.
Start with what the website needs to do
Before choosing any technology, it helps to separate the work into a few questions:
- What will visitors see and use?
- Where will the content be stored?
- Where will the website code be kept?
- How will the website be published?
- Does it need to receive or store information?
- Does it need to send email?
- What address will people use to reach it?
A simple website may need only a few of these components. More services are added when the website needs to do more.
Next.js: the website application
Next.js is the framework used to build below4k.ai.
A framework gives the project an organised way to create pages, layouts, navigation and interactive features. It provides a working structure instead of requiring every part to be created from the beginning.
Next.js controls things such as:
- which page appears at a particular address;
- how the navigation works;
- how articles and projects are laid out;
- how the website gets content from Sanity;
- what happens when someone submits the Contact form.
An address inside the website is often called a route. For example, `/articles` leads to the Articles page. The Contact form also sends its information to a route that works behind the public page.
The Next.js project lives in a folder on the computer. This is the working version of the website, where changes are made and checked before they are published.
Sanity: the editorial content
Sanity is the content management system, or CMS.
A CMS is a place where content can be written, edited and published without changing the website code directly.
For below4k.ai, Sanity holds things such as articles, projects, curated resources, page introductions, images, titles and descriptions.
Sanity is not the website itself. It stores the content, while Next.js decides how that content should appear.
For example, Sanity may hold an article’s title, body and image. Next.js gets that information and places it into the article-page design. This means I can publish an article or correct some wording without changing the website code each time.
Git and GitHub: keeping track of the code
The website code changes as the project develops. Git records those changes.
A saved set of changes is called a commit. Each commit creates a point in the project’s history. This makes it possible to see what changed and return to an earlier version when necessary.
Git works with the project on the computer. GitHub stores the project and its Git history online.
The distinction is:
- Git tracks the changes.
- GitHub keeps the tracked project online.
GitHub is not the live website. In this stack, it provides the code that Vercel uses to create the live version.
Vercel: publishing the website
Vercel builds, publishes and hosts the Next.js application.
To build the website means turning its code into a version that can be served to visitors. To deploy it means making that version available online.
When changes are sent to GitHub, Vercel can build a preview version for checking. Changes sent to the production branch can create the live version of the website.
The path is:
`Project on the computer → Git commit → GitHub → Vercel → live website`
This makes publishing repeatable. The live website comes from recorded code rather than from files copied manually to a server.
Vercel also runs some of the work that happens behind the public pages. For below4k.ai, this includes receiving the Contact form, storing its information and sending the email notification.
Porkbun: the domain
The domain is the public address: `below4k.ai`.
It is registered and managed through Porkbun. Porkbun also provides access to the domain’s DNS settings.
DNS stands for Domain Name System. It connects a readable address such as `below4k.ai` to the service where the website is hosted.
The domain does not contain the website. It tells the browser where to find it:
`below4k.ai → Vercel → Next.js application`
Once that connection is set up, visitors can use the domain without needing to know anything about the services behind it.
Supabase: storing submitted information
Editorial content belongs in Sanity, but information sent through the website needs somewhere else to live.
Below4k.ai uses Supabase to store messages submitted through the Contact form. Supabase provides a database, which is an organised place for saving information so it can be found and managed later.
When someone sends a message, the website passes it to the part of Next.js working behind the page. That part checks the submission and saves it in Supabase.
Sanity and Supabase therefore have different jobs:
- Sanity stores material published by the website owner.
- Supabase stores information submitted through the website.
Not every publishing website needs a separate database. It becomes useful when the website needs to receive and remember information rather than only display content.
Resend: sending the notification
Saving a Contact message is only part of the job. I also need to know that it has arrived.
Resend sends the email notification after the website receives the submission.
Supabase keeps the message. Resend sends the notification. One visible feature uses two services because storing information and sending email are separate jobs.
How the stack connects
The easiest way to understand the complete stack is to follow a few common activities:
| What happens | Path |
|---|---|
| A visitor opens the website | Browser → below4k.ai → Vercel → Next.js → page displayed |
| I change the website | Project on the computer → Git → GitHub → Vercel → updated website |
| I publish an article | Sanity → Next.js → article page → visitor’s browser |
| A visitor sends a message | Contact form → Next.js → Supabase + Resend |
The exact timing of a Sanity update depends on how the website has been set up. The basic jobs remain the same: Sanity holds the content and Next.js presents it.
A sensible order for a first website
For someone building a similar website, the components can be introduced gradually:
1. Define what the website needs to publish.
2. Build the pages and layout in the website application.
3. Use Git to track changes and GitHub to keep the repository online.
4. Deploy the application through a hosting service such as Vercel.
5. Connect the domain and its DNS settings.
6. Add a CMS when content needs to be edited and published regularly.
7. Add a database, email service or other connection only when the website needs it.
AI can help create the code and connect these services, but it does not make them all the same thing. Each service still has its own job.
The aim is not to collect as many services as possible, or to understand every technical detail before starting. It is to give each necessary job a clear home. Once you can see that map, the technology stack becomes much less mysterious.
Continue reading