How to deploy a website using Github Pages?
This article is for all the newbie web developers. Well, you all must have been tired of searching about how to deploy websites or must be wondering how to upload any file using GitHub. This article will walk you through the steps. Follow it carefully and you will get your website up and running in no time.
Step 1: Getting started with git
First things first, we need to download git in your Linux or Windows system by heading to their official website https://gitforwindows.org/ . MacOS users already have it in their system so no need to download this.
Once you download this, start the installation process by opening the downloaded file. Remember to choose the nano editor while installing from the drop-down menu in the installation box.
Step 2: Setting up Github
For those of you new to using Github. This step is for them or else you can skip this step. Go to https://github.com/ and create a new account. After creating an account create a new repository by clicking on New which is something like this.
Next step is to give the name of your project and mark the initialize with readme. Click on create a repository.
Now we are all set and configured with the creation of a new project in Github.
Step 3: Setting up local website files to Github
Switch open the git bash terminal which is something like this.
Follow the next steps very carefully.
Type the following commands sequentially one after another.
cd c:
Go to Github and you will see a link on clicking the option Clone or download. Again go to the git bash terminal and type
git clone <Your Link Here>
cd <Name of your Github project>
Once you open the C:/ drive on your system you will see a folder created with your project name and having a readme. Congratulations your project is linked with your local system.
Step 4: Writing your webpage code
Create a new notepad file. Save it as index.html and select All Files in SaveAs before hitting the Save button. Remember to save the index.html file in the same folder where your project is located.
Open that index.html using notepad editor and paste the code below.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Next click on save.
Step 6: Uploading website files on Github
Open git bash terminal again and type the following commands in the terminal sequentially.
git init
git add .
git commit -m “message”
git push
You will be prompted for Github Username and Password every time you upload or update a file. If you make any changes again in the file of local system then you again need to upload on Github by running the above commands sequentially.
Note: If you see the error message like this while running the commands then you have to type the two commands shown in the exception replacing it with your GitHub Email ID and Github Username. For example: git config — global user.email “iamwhoknocks@gmail.com”. After running these two commands try Step 6 again, you will not see any errors this time.
Step 7: Hosting the website
In the Github, once you successfully upload the files, you will be able to see the index.html on the Github. Next, click on Settings and scroll down.
You will see an option called GitHub pages and select the master branch from the dropdown and your site is hosted on the link given.
Note: On clicking the link if you see Error 404. Then go to gitbash again and type the following commands sequentially and refresh the link. Sometimes publishing pages takes time so please be patient.
git commit --allow-empty -m "Trigger rebuild"
git pushCongratulations, you have successfully deployed your website on Github and you can view it from anywhere.
If you like my article don't forget to give me claps :) My Github Username is ShubhayanS and you can even reach me on LinkedIn as Shubhayan Saha.
