Read on Twitter
How to deploy (upload) your project to the Internet.
For free.
One of the most important things when creating a website/portfolio is putting it online. People need to see what you create.
I'm gonna explain the easiest way to do it.
You are gonna love it.
Let's begin
For free.
One of the most important things when creating a website/portfolio is putting it online. People need to see what you create.
I'm gonna explain the easiest way to do it.
You are gonna love it.
Let's begin
We are gonna use @vercel.
First, go to https://vercel.com/signup and create an account. This is completely free.
First, go to https://vercel.com/signup and create an account. This is completely free.
We need two more things, Node.js installed and a code editor, I'm using @code.
You can download Node here: https://nodejs.org/en/ (Recommended version)
And VSCode from here: https://code.visualstudio.com/
You can download Node here: https://nodejs.org/en/ (Recommended version)
And VSCode from here: https://code.visualstudio.com/
One last install, the Vercel CLI.
This will allow us to use commands to upload our projects in an easy way.
Open any terminal (cmd, Powershell, Bash, iTerm2...) and paste the following command:
npm install -g vercel
-g means global. It will let you use it everywhere.
This will allow us to use commands to upload our projects in an easy way.
Open any terminal (cmd, Powershell, Bash, iTerm2...) and paste the following command:
npm install -g vercel
-g means global. It will let you use it everywhere.
We're ready! Let's go to our project.
For this example, I created a simple HTML /CSS project that only says "Hello World!".
You can use a project with multiple pages, a React project, Vue, etc. Everything works!
For this example, I created a simple HTML /CSS project that only says "Hello World!".
You can use a project with multiple pages, a React project, Vue, etc. Everything works!
Now, let's upload it!
Open a terminal (You can use the VSCode one, open it with Ctrl + `).
And we're gonna simply write:
vercel
The first time you do it, it will prompt you to log in, you enter your email and it will send you a confirmation code.
Open a terminal (You can use the VSCode one, open it with Ctrl + `).
And we're gonna simply write:
vercel
The first time you do it, it will prompt you to log in, you enter your email and it will send you a confirmation code.
Write `vercel` again.
You will see something like this, you don't need to add any configuration, Vercel detects what type of project you have and does it for you.
Just press enter until it stops asking you questions
When you're done, you should see something like this:
You will see something like this, you don't need to add any configuration, Vercel detects what type of project you have and does it for you.
Just press enter until it stops asking you questions
When you're done, you should see something like this:
And we're live!
You can see this example project here:
https://test-deploy-phi.vercel.app/
Vercel offers development/production URLs, this is the production one, you can deploy to development with `vercel` and to production with `vercel --prod`
Let's imagine I want to change something!
You can see this example project here:
https://test-deploy-phi.vercel.app/
Vercel offers development/production URLs, this is the production one, you can deploy to development with `vercel` and to production with `vercel --prod`
Let's imagine I want to change something!
Let's run `vercel --prod`
You would see something like this on your terminal and the changes deployed online in a matter of seconds.
You can also go to the Vercel page and connect your project to a Git repository, so every time you push to a branch, it automatically updates!
You would see something like this on your terminal and the changes deployed online in a matter of seconds.
You can also go to the Vercel page and connect your project to a Git repository, so every time you push to a branch, it automatically updates!
I hope this helps you upload those projects you have to the Internet and show them to the world.
If you deploy something with this tutorial, please reply to this thread so I can check it out.
I post threads like this one weekly, be sure to follow to never miss them!
If you deploy something with this tutorial, please reply to this thread so I can check it out.
I post threads like this one weekly, be sure to follow to never miss them!
