1.8: GitHub Pages - Git and GitHub for Poets

Hello welcome to part 8 of github, git, and all that stuff for poets and in this particular video. I'm going to show you how to have your poem or whatever it is you're making - webpage hosted through github so your git repository on github can actually be uh... you can get free web hosting with it so. And this is by using something called github pages. Github pages is a rather large topic because there are tons of features that it has available for you but I'm not sure the very basics. Just how to take your files and have them viewable through you R.L. So that's the first thing that I'm in a do in this particular video so if you've been following these videos along there's these important git concepts that I've been covering in each one of these videos commits we have a repository a commit is like a same branch is ticking. Is having a separate branch of changes that you might merge into your master branch later if you like those changes there's push and pull of pushing being to send and pull being to to retrieve so there's all the stuff that I've covered in all these other videos and the exciting thing is that using git hub pages all of this stuff works identically exactly the same way. So you can have a project that you are working on through git keeping track of its history collaborating through gits but if you flip a switch and it's on git hub you can actually view that project as directory of as as if it's hosted on a website so let me show you how this works. The key to it is that on your brain. The key is that typically by default your git branch is called Master. That's the sort of like fundamental core branch of your project where you're like flight rules things are your main poem your main code whatever it is lives in the master branch for github pages to work. You want to get rid of this idea of having a master branch you still can have one but for simplicity. You could just think of your master branch as being called. gh - pages. So as long as the branch that you're working on is called gh-pages. There is automatically a secret your well by which you can access. Now there's a lot more to this how but I'm avoiding saying that now and I'll get to it later. So let's come back up and the so let's just do this right now. It's actually going to be quite simple and easy. I'm going to go. I'm on my profile page I'm the rainbow coder for lack of a better username. And I'm going to make a new repository and I'm going to call this poem website. So this is my repository name poem website says ridiculously bad for repository name but that's fine. You could come up with something better and this poem will be on the Internet. And really on the World Wide Web talking about. So that's my description it's going to be public. I want to initialize it with a read me. So you can see what I'm doing so I'm just making a new or positively through the github. Interface. Just like I always have before. So one hundred I'm going to create repository. There it is now I have this repast So notice here that by default the repository lives in the master branch. So in order for two years github pages all the thing to do is click here and make a new branch. So I'm going to type in git hub - pages and I'm going to select Create branch gh- pages. So now I have this branch gh-pages. Now here's the thing that Master of branch is still there and in fact if I were to go to this repository again by default. It's going to put me on to the master branch. So to make things simpler. I want to make sure that gh-pages is the default branch. So where I do that. I need to go to settings so I'm going to click on settings and under settings. I'm to go over here to brand. Is on a click on branches and over here. Notice here this is where it says default branch. So I want to go to this default branch place and I want to switch default branch and I want to switch it to G.H. pages and then I want to click update now it's going to it's going to say like my goodness changing your default branch could have unintended consequences. It can and this is you know it's reliving a little bit in the danger zone here. But what's the big deal if there's nothing in this are positive and yet I'm just making a poem and messing around this is actually quite OK to do with a brand new or positive. You're not affecting anything else that's happened in the history because there is no history so far so I'm going to say I understand update the default branch and now the default branch is G.H. pages so if I go back to this loops. Poem website repository. You can see that I am now by default in the branch G. H. pages. Now there's a little bit. This is fine and I could stop here but I want to be really I'm really serious about github pages But I'm not stop I'm I'm of all it on github pages. So I also want to go over here to branches where this is the link where I could view what are all the branches associated with this repo and I'm going to click here. And I'm going to see that the default branches G.H. pages but I still have this other branch of Master. So over here on the right hand side there's this little trash icon. I can click this and actually delete the master bridge and this is worth doing because I don't want to by accident ever work on the master branch in this particular case. So I'm going to delete this branch and you can see it's gone it's kind of x-out I now all I have now is a G.H. pages bridge. OK we did it this for positive is now or a positive hosted through good pages. So I can I can go to settings by the way and I can scroll down under github-pages. You can see here. Your site is published at this U.R.L. So by definition is. If you have gh-pages branch in your repository the U.R.L. for that repository will be your user name dot GitHub dot IO slash the repository name which in this case is poem website. Now here's the thing you absolutely can use a custom URL for example I have plenty I have several websites posted through github pages nature of code dot com for example is hosted with github pages but it isn't at Shiffman Dot Github Dot I O slash nature of code. So there is a way to do that and on another video we will explore that as a topic. It's just a good sort of configuration thing but you get this sort of free URL that you can use. Now let's go to that URL and you can see here. It's going to say page not found the reason is there are no files there. There's no files there for me to look at I mean maybe in the repository. There is a file called Read Me I might be a look at that. But let's let's take a step further. Let's add a file. So I'm going to go here under create new file. And I'm just going to name the file. Now I'm just going to make a temp plain text file. I'm going to call it poem dot T.X.T. and I'm going to do I'm going to write some poetry git hub. Pages git hug It's that I wrote that by accident. I'm the keep it githug git hug is a hug on the pages. Oh Dear this poem is terrible. OK So that's my poem you can you send me a pull request to approve it I'm going to do commit new file and you can see that it's committing it directly to the G.H. pages branch and you can see there it is so I can see it here in my github repository. But now look at this. I can go to the U.R.L. and I can put it in there. Poem. So I can access that particular file and there you can see there it is. I now have a web Page with this particular poem on now that web page is a plain text file. So all it shows up as raw text those of you who have used the Internet before or browse the web have noticed that web pages have different fonts and images and animations so. To go further with this to actually host a dynamic web site through get home pages you need to actually have H.T.M.L. files. Perhaps also image files perhaps also something called C.S.S. files. The whole set of the totals about how to use H.T.M.L. C.S.S. and javascript to create different kind of web pages that could go and look at it and come back to this but I'm going to leave going to just one step. I'm going to make an H.T.M.L. poem just here. So you can see a little bit more. So what I want to do now is I'm going to go back and I'm going to say another I'm going to create another new file and you know what I'm going to call this file index . html If you name a file index .html then you don't actually have to type in that file name on the web. It will be the default file that's open whenever I go to. Rainbowcoder dot github dot IO Slash Poem website. So I'm to call it that and then I'm going to type looks. I'm going to type some H.T.M.L. into this file you know I'm probably missing some things you're supposed to have in H.T.M.L. but H.T.M.L. is all about having these tags open H.T.M.L. close H.T.M.L. open body closed body and in the body. I can put something like h1 which means header one and I can say poem and then I could say like H three by Daniel Shiffman. And then I could say like P. which is for a paragraph and I could say this. You know Rainbow rainbow you are my rainbow and. I could put a period and close the paragraph and you can see this is you can check out my other tutorials to learn More about H.T.M.L. but this is writing some markup which is giving it some formatting and I'm going to just add a little more formatting like I'm going to add strong. So this is going to make that particular rainbow bold and then I'm going to hit commit and I say making an H.T.M.L. poem and I'm going to commit that new file and you can see now what do I have in my repast story. I know the index studied in dition a poem dot T.X.T. and if you remember this is what poem dot T.X.T. looks like. However now if I go to the URL and I just get rid of that right. And I want to go to just the core U.R.L. rainbowcoder github dot IO slash. Poem website and I hit enter. You can see there is my poem and formatted so I've now used a little bit of H.T.M.L. and it's freely available on the Internet. This is a website. People can contribute to this website by making poll requests. You can make changes to it through the github interface. You could clone that repository down to your computer the same way I showed you in other videos you could make branches you can make changes. Just remember the one thing that's going to be different. I'm actually going to let's do this really quickly. Let's say you want to work with this locally. I want to get I'm going to go to clone or download. I'm going to copy this particular this U.R.L. and go to terminal. This is something that I did in a previous tutorial if you need to go back and look at that and I miss a first of all just so you know I'm on the desktop of my computer and I say git clone. So we can see now that here is that. You can see there are the files. One thing for you to remember if I say. No it's telling me I am on Branch G H dot pages. So if I ever want to get updated changes get pull. Normally we were saying things like get pull origin master no longer is there a master branch. So I have to remember if I've use any of these other get commands to always use G.H. dot pages. OK So there you go. That's the basics of it you can put image file anything that you can do in a web page you can put into this repository. You can add stuff you can commit stuff. Your whole web pages there online for anyone to work to see and for you to work with through the through the git. Platform. What I'm going to do in the next video for those of you who might have come to this series by working with something called P5 js I'm going to show you how to actually take a code example something that has H.T.M.L. C.S.S. and Javascript and a host that with github pages which would be quite simple. But I'm just going to put that in a separate video because it does involve programming in source code but you can actually just. Still just with this video put a text file or some basic H.T.M.L. on line. OK Thanks for watching and let me know what questions you have in the comments.

Channel: The Coding Train

Views: 84,633

Rating: 4.953846 out of 5

Keywords: github, git, tutorial, github (website), github pages, github tutorial, github pages tutorial, website, version control, repository, daniel shiffman, how to use github, version control tutorial, repository tutorial, how to get started with github, github version control, html github pages, web hosting github pages, web hosting, how to github pages

Id: bFVtrlyH-kc

Length: 12min 57sec (777 seconds)

Published: Thu Jun 02 2016