In this blog, we will learn how to build a website and how to host it in GitHub and Deploy it to Vercel.
Lets create a folder name first and open that folder in Vscode.
Once the folder is created in vscode, lets create two files one index.html and another one style.css and link the CSS to HTML file.
once you finished writing code we will need to host into GitHub. so lets create an account by going to the GitHub Website.
Okay we have created an account so now we can host our code into GitHub. Here is the simple instructions on how to create a new repository for the specific project and how to push our code into that Repository.
Create a new repository for your project
Name the Meaningful Repository Name and hit Create.
Go to your VScode and Open the code you want to push into GitHub.
Open Terminal in VScode
Write “git init” cmd in termimal
You will get this message.
(Initialized empty Git repository in /Users/rajeshrai/Desktop/DEV/Dented Code/css animation 1/.git/)
Go back to GitHub and open the repo you just created.
echo "# black-friday-animation" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Rarai365/black-friday-animation.git
git push -u origin main
copy the highlighted one and paste into VScode terminal after “git init” cmd.
Now they are linked, you can push your code to GitHub.
1st cmd: “git add”
2nd cmd: git commit -m “some description”
3rd cmd: “git push -u origin main”
Go back to your GitHub and refresh the repo. You will see your code being pushed into GirHub.
Now to deploy this code to vercel, go to your Vercel account or create one with your GitHub Account.
Once the account is created, you will see “Add New” option in vercel. Click that and select project.
Once you choose project, it will ask you to import your github projects. In our case, we choose the repo we created earlier “black-Friday-animation”.
After importing, Hit Deploy.
Congratulation, You have successfully Deployed your project on vercel.
After deploying if you go to your dashboard, you will see something like this.
You can click the domain link to open your project on the browser and you can also send it to your friends.
Top comments (0)