Website Making With GitHub

by Nerzgul in Workshop > Home Improvement

311 Views, 1 Favorites, 0 Comments

Website Making With GitHub

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

Github Desktop

4. Getting a Template Web page

Download Link is here

w3schools

After Getting These done. We have to prep all this and start our work

Preparing Github Account

2.PNG
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

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

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

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

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

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