Let’s host any website for free and show-off in resume
Before we start, let’s understand what is Hosting. If you know this and want to skip the easiest explanation of hosting 😅, then you can directly jump to the hosting part.
What is Hosting?
You have created an HTML file on your computer and when you open it, it will open in your browser, and you can see your website.
Now if I want to open your website then I can’t open it as your html file is on your computer. If I want to open it, then you need to share your HTML file with me. But you all can access facebook.com without asking Mark for an HTML file. It is because Mark has put that HTML file on a server (a computer connected to the internet) and when you type facebook.com in the browser, your browser reaches out to that server and opens that HTML file for you. So, putting your HTML file on the server is called website hosting. We do this so that everyone can access our website as it is practically impossible for someone to share the HTML file with everyone in the world. I hope the meaning of hosting is clear.
Now, let’s host a website in 4 minutes.
Note: After you read the instructions, just look at the picture or video below for a better experience.😃
Here you can see a project folder Coffee Website. The Coffee Website folder is present in the Downloads folder. You can put it anywhere. It contains the index.html file and other files such as CSS files, JavaScript files, and images. You should always open the index.html file and check your website. I checked and it is working fine. Let’s host then.
1.) Go to your browser and type github.com. Sign in or Sign up at GitHub.
2.) I have already signed in. Here, you can see the + button at the top right corner. Click and select New Repository.
3.) Give a Repository name. Let’s say “CoffeeWebsite”. You can leave a Description as it is optional. Keep it Public so that anyone on the internet can see this repository. Select Add a ReadMe file. Now, click on Create Repository. Wait for a few seconds and your project repository has been created.
Just FYI, the ReadMe file is used for providing project details and it is a part of every project so that outsiders can read what is being done through this project.
4.) Now, you can add files from the Add File option. Click over Add file and select Upload files.
5.) Click choose your files and browse your website project on your computer. Please see a couple of images given below. Also, read instruction 6 before executing this step.
6.) Select all these files and folders, drag them to GitHub and they will get uploaded within a minute (depending on the size of the project). Please don’t upload the folder Coffee Website. You need to upload the files and folders within it. Please see the below video which covers instructions 4, 5, and 6.
Note: Your home page code must be inside the index.html file because this is what GitHub is going to look for to render your page. It should be lowercase index.html. It should not be home.html or any other name.
7.) Once your files are uploaded successfully then scroll to the bottom of the page and click on the Commit changes button.
8.) Now, click on the Settings Tab at the top. Then, go to the pages tab on the left side panel. Please refer couple of images given below.
9.) Now, set Branch to main. On setting to the main branch, the root folder will appear next to it. Keep it root only. Click Save. Please refer couple of images and then a video given below.
Please check the below video which covers steps 8 and 9.
10.) Wait for a few seconds after clicking the Save button. Refresh the page and you can see the message that Your site is live at <this site>. Click over it and you can see your website. You can share this link with anyone in the world and that person can access your website. You can check the Coffee Website hosted by me at https://ashaynayak.github.io/CoffeeWebsite/.
Here you are with a live website 👏. You can put it on your resume or share it with the interviewer while discussing your projects.
That’s it… Hope you liked this article. Please do like and share it with your friends.” It motivates us.
Comments