How to create a website on Github Pages – Tutorial 1

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 thoughts on “How to create a website on Github Pages – Tutorial 1

  1. hi, i like your tutorial to create webpage on github. it's really helpful.
    you showed the website you created on github. Can you pls teach how to create a website like yours on github?
    i appreciate. thanks!!!!

  2. That was very clear and by far the most simple tut. thanks mate.

    In the video you mentioned that you will show how to upload files from PC (local directory) to GitHub, but I couldn't seem to find that tutorial!.

    I have created a website with lots of images, pages and some JS. I'm looking for a way to publish it on GitHub. Can you help pls?

  3. Наконец-то понял как выложить несколько сайтов на github-pages –_

  4. Thank you so much for this tutorial! I learned HTML and CSS as a hobby but have been away from it for years. Here's my first page since about 2010: http://christypena.github.io/static/ – I recently discovered this world again and am so excited to learn more! Looking forward to looking through your other videos!

  5. Hi, I am creating a website with your tutorial but I am confused about adding and editing the code for making my website. What really confuses me is making the branch gh-pages. Why do we make that branch? Also, do I have to be on gh-pages to make a new edit or index.html? Very confused right now… 😐

  6. It was weird Until i watched this video. How should i thank u.
    thanku thanku ThankYou . Love u <3 🙂 @webjeda

  7. Hey, great tutorial series. I would like to ask if you could create tutorial on how to redirect non-existing pages on github because I saw plugins for that like https://github.com/jekyll/jekyll-redirect-from but it looks too complicated for me as I'm not a programmer? Is there any way to do 301 redirect for those non-existing post/pages to my homepage in some easy way? 🙂

  8. I was able to create a simple website using github. After hosting the web when I wanted to alter(edit) contents on the index.html file web site follows the original content however the file on repository got edited after commits I made. I will request you to please suggest why doesn't it operate as desired.

  9. Omg!! Thank you!!! Fastest, simplest, easiest… everything!!! I've been trying to add files using terminal and all that but my page never showed up. FOR OVER 24 HOURS!
    This took me less than 10 mins.
    God bless you!!

  10. why did you create the index.html file in the master branch ? why not create it in the gh-pages branch ?

  11. FINALLY! Literally zero of the other tutorial work in any capacity. This is the ONLY one that works. Cudos. Thanks.

  12. Thank you! I stack like an idiot on this little moment – to make a branch gh-pages :)), but you really helped me!

  13. Thanks that was really helpful. You mentioned that we can do a lot more on github pages. Can we upload a whole SpringBootApplication and run it there? Just asking…

  14. I have a free github account and I don't think it lets me create private projects. Does this mean anyone could mess up my web pages without my permission?

  15. How can I get https on my hosted site

    As I have hosted a site and GitHub is saying can't enforce https on custom domain…

  16. Can u kindly make a tutorial on external style sheet.. how we refer and what will be the location css file.?? its confusing plz make an external style sheet.css instead of defining style tag

  17. Thank you for the concise, well done explanation. Per your request to viewers at 7:06 the site I created in this "code along" is at the following link: https://brittanyk30.github.io/tryout/

    Once more, looking forward to going through more of your tutorials. Finding solid resources can be a challenge. Thank you for this wonderful video. Much appreciated.

    For those new and drowing in a "meh" learning materials I have recently discovered (and adore) Murach's books (they a bit pricey about $60 bucks for each topic (js and jq is one book, html5 and css3 is another, php and dbms another) but are literally the best if you want to find your way quickly (just google Murach (it's the titled publisher) and get the correct version–I opt to borrow from the library but half price books has a website too and it's possible to pick up one version away from current for about $5 bucks (be careful there and do your research). There's also a coding frog css website (google it) and it's a nice interactive approach (similar to SoloLearn) but more visual. Anyhow:) Subscribe and like this guy's vid if you do like and benefit 'cause it's good and if you follow the directions that's how you do it:) Gracias WebJeda!

  18. I'm new to HTML-ing and found GitHub through Khan Academy. At first, I was confused on how to make a website on it but thanks to your video, I now know how 🙂 Thanks!

  19. I liked your videos on Jekyll. I was looking for a recent one so you may want to update as screens have changed on github. Also found someone who reposted your video https://youtu.be/hGLMCatW1jE and didn't even change the title. Seems to be case of copyright infringement.

Leave a Reply

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