Deploy Your Website on Vercel in Minutes | No Setup Needed | Humanitarians AI
This walkthrough deploys a real GitHub project to Vercel from start to finish, showing how a repository turns into a live, shareable URL in about 30 seconds.
Getting a website online used to mean configuring a server, or at least fighting with hosting settings until something worked. This walkthrough shows the alternative: connecting a GitHub repository to Vercel and watching a project go from source code to a live, shareable URL in about 30 seconds, with no server configuration at all.
Connecting GitHub to Vercel
The process starts at vercel.com, where an existing account already has several projects listed. To add a new one, the workflow is a single black "Add New" button followed by "Project." From there, since the source lives on GitHub, the demonstration imports a fitness tracking web application directly from a connected GitHub account. If your GitHub isn't already linked to Vercel, the platform walks you through an authorization step first, asking you to grant Vercel access to your repositories before you can import anything from them.
Configuring the project before deploying
Once the fitness tracker repository is selected, Vercel asks for a project name, which can be anything you choose, in this case "fitness activity tracker." It then asks you to confirm the framework. Vercel supports a long list of frameworks in its dropdown, including React and Next.js, but for a plain JavaScript project without a specific framework, "Other" works as the catch-all option. The setup screen also exposes the root directory setting, which matters most for full-stack projects: if your frontend code lives in a subfolder separate from your backend, this is where you point Vercel at the right source folder. Environment variables, for API keys or other configuration values, can be added at this same step, though the demo project didn't need any.
From click to live URL
With the project name, framework, and root directory set, deployment is a single click on the "Deploy" button. The result is a live, production URL, and it happens fast, roughly 30 seconds from click to a working site. Back on the dashboard, the deployed project shows up under its chosen name with its live URL attached, following the pattern of project-name.vercel.app. Clicking into the deployments view confirms the build is live and currently in production.
Customizing your domain
Vercel doesn't stop at the free subdomain. From the deployment view, you can assign a custom domain to the project or purchase one directly through the Vercel dashboard, which matters once a portfolio site or side project is ready to move off the default .vercel.app address and onto something more permanent.
Key takeaways
- Vercel deployment starts by connecting a GitHub repository, authorizing access if it isn't already linked, and importing the specific project you want to host.
- Project setup involves naming the project, selecting a framework (or "Other" if none apply), and setting the root directory for full-stack projects.
- Environment variables for API keys or configuration can be added directly during setup.
- A single click on "Deploy" produces a live production URL in about 30 seconds, with no server configuration required.
- Custom domains can be connected or purchased directly from the Vercel dashboard after deployment.
Try it yourself
If you have a project sitting in a GitHub repository and no live URL yet, this is a workflow you can repeat in one sitting: connect the repo, confirm the framework and root directory, and deploy. It's a practical entry point for students, designers, and developers who want a portfolio, side project, or hackathon build online fast, and it pairs well with other build-and-ship tutorials from Humanitarians AI.
Full transcript(auto-generated, with timestamps)
[0:01]Hello everyone. In this video, I'm going to explain how to deploy a website on Versel. First, let's just go to the versel.com website and this is how the UI looks once you have logged in. If you don't have an account or you're not logged in, sign up, create an account at versell.com and then this is how it is going to look. Now, I have been using Versel since quite some time now. So, I have all my projects here. But I do want to add a new project. I have my GitHub connected to Versel and I'm going to host or deploy my one of my projects in
[0:33]The GitHub. So this is my GitHub. I'm going to host a fitness tracking web application and I'm going to demonstrate on how to do that and to add any new project um in Versel. All you got to do is click on this black button add new and click on project. Like I said I'm going to host or deploy a GitHub repository. the project which is present pres present already in my GitHub. So I'm just going to import this fitness tracker GitHub repository and since I already have connected my GitHub to Versel this is how it looks. If you don't have any GitHub repository imported or connected in Versel first
[1:11]You will get an get a UI to do that connection step. You have to authorize Versel to access the GitHub repositories and once you have done that step this is how it's going to look. I'm just going to click import on this fitness tracker uh option. And yes, so the project name, let's just say fitness activity tracker. You can customize your project name whatever you want. And the framework is actually it's a JavaScript project. There's no JavaScript option here. There are multiple other options like React or Nex.js and plenty of options in this dropdown. So since it's JavaScript, I'm just going to let it stay as other. And yes, this is my root
[1:49]Directory. You can also edit it uh because when when you have a full stack application you have separate front end and back end at that time it's very essential to you know change your root directory to point to the source folder in the front end. And there are also environment variables. So if you have any API key or any other variables you can add here. And since I don't have anything I'm just going to leave it as it is and click on deploy. That's it. Um, now I will get a link uh which is already in production and this is basically it and it's pretty quick as well. It barely
[2:25]Took 30 seconds to uh deploy my project. Let's just go to the dashboard and see how it looks. So as you can see the I had given the project name fitness activity tracker and that is the same URL that I have it right here and yeah it's perfect. It is uh the UI is neat as expected and also the URL is the project name.app. If you come to deployments, you can see that uh it it is deployed and it is currently in production. Click on it and you can see the assigning custom domains. So you can also further customize it or buy a paid domain as
[3:03]Well. That's it. This is how you host a website in Versel. I hope this was helpful. Thank you for watching.
More videos
2:08Bridging the Pixel Gap in Browser Automation.
2:23How One Narrow Safety Rule Can Make an AI Less Safe Everywhere Else.
2:04Why splitting a chunk from its document makes it retrieve for the wrong question
4:20Three You Can Take Back. One You Can't.
2:21Why a 50-turn agent pays for the same screenshot 35 times unless it caches the pixels
1:53