How to create a website on Github Pages – Tutorial 1
Articles,  Blog

How to create a website on Github Pages – Tutorial 1


hi guys my name is Sharath so today
we are going to see how to host a simple website on GitHub that’s for free. So GitHub is a, is not
meant for hosting websites GitHub is actually a platform where you can manage
your code so let’s say you have a single you know single project which has some code on
it and there are like four or five people working on it so it’s very hard
to manage the code when it’s been edited by many people so it’s really hard to
manage if you’re doing it on your own but GitHub provides a very good
solution for that and you will learn that you know when you will go deep into
GitHub but for now that’s not necessary so we’re just you know we’re just going
to see the basics so GitHub has an option to host your website’s that’s
called GitHub Pages so what I’m going to do is I’m going to create a simple
website inside GitHub and host it and i’ll show you and it takes like
in just two minutes so we don’t need a you know Command Line or anything for that
you don’t even need IDE for coding, you can just do that online and lets get
started so all you need is a GitHub account. i hope you have one otherwise you can
sign up and get a free account i’m gonna sign in I, I already have an account called
redgadget. I’m gonna sign into that ok so this is what you’re going to get, when you sign in so here it’s showing that what other repositories i
have the repositories are nothing but you know the folders, kind of folders you have
created inside or you can call them projects so this is one of the projects
which is a blog that i have. So for this video i’m going to create a new
repository i’m going to name a test and i’m going to initialize that with the
README file that’s not necessary you can you know and can always start with a blank repository but I just prefer having a README file. Okay let’s create. So
inside redgadget you know it has created a test repository and as you can see
doesn’t have any, i haven’t given any description or website. i can give that and
it has a single branch that is master and test and it has a single file that is
README.md. Okay doesn’t have anything so let’s let’s create a website
so this plus sign is what we use for creating websites or adding a file
so let’s add a file, let’s add index.html so once you’ve done that you have to
commit only when you create you know only when you commit, the file will be added. So I
have committed. So now you can see that index.html is there inside me depository.
Let’s open that, it’s blank let’s add some code in it. Let’s add HTML… Hm.. what just happened, okay Edit.tag let’s have a title tag, so this is not
the way i prefer coding. I usually code on Brackets. You can do it on
sublime or notepad++ whichever is you know is your favorite IDE but for now
we’re doing it here so let’s have a title as “first website” and let’s create
i’ll have just a

this is my first github page. Hm.. that..
that’s it I think that’s enough. So I haven’t
mentioned any DOCTYPE or HTML5 or anything you can mention that but I
don’t think that’s necessary let’s add some styling here. I prefer
adding CSS file in a separate file and linking it but you can, for this
example I’m doing it here. .body {} let’s give it a nice background color
background color green. Green is this not a good
color(for background) but that’s fine let’s change the font color as well. Let’s make it pure wait let’s aline it. It
will be on the left, so let’s align it to the center you don’t have to do all this you know the
styling and everything. So once you are done changing the file you have to
commit again ok so now it looks like a proper HTML file. So the thing with HTML you know Github Pages is if you wanna host it, you need to have a branch called gh, gh stands for pages gh-pages I
don’t know why they have named it so the github pages that makes sense so i
have created a new branch and our code is in the branch now. Now go to
settings. So here in the settings the name the default branch you come down
the features and here Github Pages. So it is saying that your site is ready to be
published at this web address. So let’s see if that is published already, it
seems like it has we have it so this is the web page so you can make any changes, it looks good you can make any changes you want you can add in all JavaScript
files can have a CSS files if you have a whole project file you can upload that
as well, so i will teach you how to do that i mean how to upload files if you
have a lot of them it’s hard to you know code here on the github itself.So you
you code it on your favorite of IDE, you make a project and upload it to the Github
and this URL looks ugly right so you
can have a custom URL as well that is also very easy in Github Pages i will
teach you that as well. I have created a website I’ve created a lot, i’ll show you one
which I’ve hosted on Github so this is the one, so this is my
personal page actually so if you can see the webpage has,
obviously has some CSS, has some JavaScript going on and some nice
effects and these are my projects and contact so this is a simple website that Ihave hosted here so you can also make some you know cool websites where you can host on it(Github)
and good luck using Github see you in the next one Bye Bye.

71 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *