Website Making With GitHub
by Nerzgul in Workshop > Home Improvement
311 Views, 1 Favorites, 0 Comments
Website Making With GitHub
![git.png](/proxy/?url=https://content.instructables.com/FL8/25DW/KKY0KJV4/FL825DWKKY0KJV4.png&filename=git.png)
Making a Personal Web Page is one of the way you can tell The Internet World Who you are, What You are, and Where you are. But greater reach comes with Greater cost. What if I can tell you a way you can make a Website and make it visible for all people around the world with Zero cost..... Then You are at the right place.
First things First
You'll need the following
1. PC or Laptop connected to Internet..(Obviously...You are not that Stupid).
2. Text Editor, Here I'll Working on Visual Studio code
Download Link is here
Visual Studio This is used to make and edit Html pages
3. Github Desktop
Download Link is here
4. Getting a Template Web page
Download Link is here
After Getting These done. We have to prep all this and start our work
Preparing Github Account
![2.PNG](/proxy/?url=https://content.instructables.com/FQ3/J3OD/KKY0K7NF/FQ3J3ODKKY0K7NF.png&filename=2.PNG)
![3.PNG](/proxy/?url=https://content.instructables.com/FND/0IZ8/KKY0K7NK/FND0IZ8KKY0K7NK.png&filename=3.PNG)
GitHub Account Profile can be made similar like we make a facebook profile or Instagram Profile or google account.
Lets say we are making a google account Google will be giving 15 GB of space to store our data and can be viewed only when you are logged in
How github works more than googledrive is it gives an additional option to work as an online server domain. where you can choose to show what you want to display even if you are not logged in.
Making GitHub Repository for WebPage
![4.PNG](/proxy/?url=https://content.instructables.com/FKD/6ZB5/KKY0K7O7/FKD6ZB5KKY0K7O7.png&filename=4.PNG)
Now we will make a repository where we'll be keeping our html page will be saved/Uploaded
Note that The repository should be in the format
"yourreponame".github.io
Then go to your Local Directory where the you can see the folder
"yourreponame".github.io
Working on Visual Studio
![visualstudio.PNG](/proxy/?url=https://content.instructables.com/FK4/FPO6/KKY0K9J3/FK4FPO6KKY0K9J3.png&filename=visualstudio.PNG)
Writing html is fun with Visual Studio Code
You don't have to worry about unclosed tags.
Open your web page Template you downloaded from w3Schools.
and try to understand how the codes. Edit what all Required
I've got my html Basics from here
Try couple of random codes ... Enjoy The Show
Local Directory File Setting Up
![local dir2.PNG](/proxy/?url=https://content.instructables.com/F3M/UE4A/KKY0KA6H/F3MUE4AKKY0KA6H.png&filename=local dir2.PNG)
After editing
Copy and Paste all The files to the folder "yourreponame".github.io which can be found in your local directory which will be your Github desktop Root Directory
Make sure Your html page is saved as index.html
PULL & PUSH Aka Version Control
![global repo.PNG](/proxy/?url=https://content.instructables.com/F6E/5ZUD/KKY0KAEQ/F6E5ZUDKKY0KAEQ.png&filename=global repo.PNG)
After setting up your local Repository We have to Sync it to the Global Repository on GitHub.
So Open Github Desktop and Log in It'll guide you to the global Reposittory
Just Make sure your Global Repository is on Main Branch
Now click on Fetch Origin Which will Sync Global to Local
It'll Show what changes You made
Click Commit to Main
Then click Push Origin
Basically All the changes you done to your local repository will be saved in the Global.
Always make sure that you Pull >Change > Push for all Edits, Or You may Loose Data.
This Process is hence called Version Control.
Getting Your WebPage Link
![settings.PNG](/proxy/?url=https://content.instructables.com/F2V/3C49/KKY0KAPG/F2V3C49KKY0KAPG.png&filename=settings.PNG)
So Log in to your git page in browser and open your webpage repository.
You can see all Your Local files will be synchronized and displayed there.
Go to Settings
Scroll Down to Github Pages
Where you can see
Your site is published at https://yourprofiilename.github.io/yourrepository.github.io/
Tada your Page is Up and Running...
Cheerio
Feel free to Ask Doubts if Any