Transcripts
1. Welcome to Launching Your Website Using GitHub Pages: get Hub Page is a great way to share in demo. The projects you've been working on it can help you get a job as a developer and prove your skills is a great way to tell the world about all the amazing things that you've been working on. We have to get home pages. You don't need to pay for anything. It's absolutely free. You don't need to worry about server management, complex configurations, databases or anything like that. You can simply focus on making a beautiful website or portfolio and putting it on. Get up, get up. Pages are the most direct path to getting your code on the Internet. There's no fees, no catches, no complexities whatsoever. Also, don't worry. If you don't actually know, get while you're taking this course because I'll show you how to use. Get throughout the rest of this course, but also because I'll show you an additional way to add files to your website. Hi, I'm killing telling and welcome to my skill share class. I've been developing websites for over 20 years. I've taught over 1/4 1,000,000 students in my life, and I use get every single day in this course, you'll be launching your very own website from scratch using get hub pages. So if you want to get your portfolio projects on the Internet today, this is absolutely the course for you. Thanks for watching, and I hope to see you inside.
2. Setup your free GitHub account: okay for this course, you were going to need a get hub dot com account to their absolutely free. So all we have to do is head on over to get hub dot com, and we can create a completely free account. So your user name is going to be whatever you want to use for your website. So it's going to be for example, Caleb tolling dot Get hub dot io. That's going to be my website. You? Well, because that's my user name. Caleb told me. So you're going to want you specify your user name, because changing it down the road may or may not be possible. So I'm gonna put Caleb dot Colleen. Oh, can only use on contain alphanumeric characters. Ah, I fence. So no dots. So you could put really pretty much anything you want in here. So you could try like that suggestion killed Julian. Star killed tolling Max. I like that. I don't know why. 31319 But you could put anything in your for your user name. So you put your user name and then for your email address, you just put you at I don't know. Maybe gmail dot com If you have a gmail dot com or Hotmail or Yahoo or anywhere Ah, wow, that's already taken Ah, or invalid. Interesting on. Then you just put in your password and you sign up. You're going to have to verify your email address so you'll want to sign into your email account, verify your email address and then you'll be able to sign in. So once you have your account, you can sign in. My user name is Caleb telling, and my password is something I'm not going to say out loud. Your account probably won't have all of this fun stuff in here, but you are going to need something to get started with Git. Now there's going to be two ways we can do this. We can either edit files directly on get hub dot com, or we can edit files on our computer and push him up to get up. And I'm going to show you how to do both of those in the next lesson. Let's go ahead and create our first repo, and then I'll show you how to install git
3. Create a "special" repository on GitHub: All right, let's go ahead and create your first repository. So when you sign in to get up, you'll see something that looks sort of like this. I sort of have ah feed here from the different repositories and code bases that I sort of monitor. But you don't need to worry about that. You just click this plus up here and click New Repository. Now, this repository needs to have a special name. But before we even get into that, what is a repository anyways? Repository basically, is a place where you can store all of your code and your code history. So if I wrote some code today and it turns out I don't know, I broke my website and I wrote some code three days ago. But I know what was working. I could actually go back in time and use that code. I don't have to worry about trying to fix it. I can just literally go back in time, use the code that works and then, you know, fix it afterwards so that my users aren't ever seen a broken website. And that's called version ing. That's one of the powers behind. Get so in your repository here, you're going to want to use a very special name. It's going to be your user name dot Get hub. Not Io. So for me, my user name is Caleb Tallinn. But I'm going to use Caleb hauling dot Get hub dot io It's not get hub dot com because that's the website. We're on its get hub dot I'll get home. Page is always live on a dot io domain. I'm going to initialize this. Read me, uh, this repository with the read me. It's just a sample file. We can't change that later on. And also, you're going to want to make sure this is public. This does not work on private repositories. So your code needs to be public, which is actually OK, because if you're creating a get home page for your portfolio pieces, you're going to want to show off that code anyways. And so making that public is going to be good for employers to take a look at your code. So you go ahead, click create repository, and there we go. We have a repository. So we just set up a basic repository, remember, yours is not going to be Caleb tolling Dugit hub dot io is going to be your user name dot Get hub dot io Now you can always figure out what your user name is says right up here. Signed in as Caleb, telling. I just put it all as lower case. That's totally fine, but it'll show you up here. If it doesn't, you could always go into your settings are usually your profile, and it will show you as well. So just as an example, says my name here, and it also says my user name. So make sure you have a new a brand new repository set up with your user name. Don't get home, not IO. Once you're done that, let's head on over to that next lesson where we figure out how to get this code onto our computer.
4. What is cloning, anyway? : all right, we are going to need to clone our code from get hub to our computer. Now, cloning is essentially just copying your code from a repository, the one that we made in the last video to your computer. So basically, we're taking get hubs code, and we're putting it on your computer now. You don't actually need to clone a repository toe work with it, but it does make it a lot easier to work with files on your computer. So in the next couple of lessons, you're going to want to download, get on your computer. I'll show you how to do that, whether you're you're using Windows, Mac or Linux and then we'll configure, get. But if you really, really don't want to learn, get which I highly suggest that you do. But if you don't want to, you don't have to a little bit down the road. I'll show you how you can edit files without even having get on your computer.
5. How to install Git on Windows: If you are using Windows as an operating system, you're going to want to download a specific program to use get. This is by far the best program for Windows I found. I've done development on Windows, Mac, Linux, you name it. I've been there. And when I was doing a lot of Windows work, this was the program that I turned to. This was a really, really good program. So you want to go to get for windows dot org's Click your download button here, and this will take you to a get home page, which, ironically, this is actually what we're going to be learning pretty soon as a little kid hub. So if you scroll on down, you'll be able to see we've got file names and stuff in there. We've got assets. You want to download the program? That's right for you know, chances are you want to download get 2.250 point zero 64 bit dot dxy. That's probably the one who wants. Now, if you have an older computer and older Windows laptop for uncensored or an older Windows desktop, you might want to get the 32 bit one But if you've got a newer computer, let's say within the last four years or so, you're definitely going to want to get the 64 bit dot txt file download that install that. And once you have that installed, you'll be able to open a program called Get for Windows. And all that's going to look like is a command line tool something like this. No, my command line tool is unique because I've customized this quite a bit. Yours is going to look very similar, is going. Have some tax and you'll be able to write some stuff in here. But otherwise the coloring might be different. The sides might be different, but all you really need is to be able to type some stuff in here now, a fun thing to do. If you are on Windows, you can always type D I R. And that will show you a list of your files and directories where you currently are something like this to quickly move around. All you have to do is type CD change directories with a sense for change directory. You can see the into any other folder you want, so I'm going to just, for example, a CD into been. And then if I do P W. D. You can see that's the folder I'm in for you. You might want to set up a sample project or an example project on your desktop or in your downloads, or somewhere that's a little more temporary, and then CD into that directory wherever that's going to be, so that you can automatically just start working and we'll do all over. Get inside of that particular folder. So what you have get for Windows installed and you've got your get for Windows Terminal open. We'll get started with the next lesson where we get introduced into get Hub.
6. How to install Git on MacOS and Linux: If you're on a Mac or Lennix, there are a couple different ways for each operating system to install. Get first things first. Let's go over Mac because more people are using Mac than they are. Linux desktop. So on a Mac, if you have a program called Brew, you can type brew install. Get now if you don't have brew. This is a program called Homebrew, and I would suggest getting this four year Mac operating system. This is really just a package manager, so allow you to easily update get down the road for it, for example, or install other packages that might be related to get or might be related to a particular project. You're working on a really useful tool, so that's Mac number one. Mac Option number two is You can just open up your browser and go to source forge dot net slash projects slash git Dash os X dash installer slash files Scroll on down this page, and you'll probably just want to get the latest one. So this one is get to point to 3.0, and you can see that it's got 30,000 downloads this week. If there's a newer version. Definitely go. Go ahead, get that newer version. But if you see this one, you can also get this one as well. You're going to want to download this, install it, and once you have that up and running, you'll be able to open a program called Terminal. Every Mac comes with this program called Terminal Will. Write that out Terminal. Basically, that's what I'm using here. Now I've got a customised version of my terminal, but your terminal is going to look something like this. Now, if you're on a linen, there's a different way of doing this. So usually you'll type sudo Apt. Install, get, and that will install Get for you if you're in an older version of Lennix or an older version of Let's Say You bun, too. You do sudo apt get install, get and that will install it for you on older versions of you. But you say you want to 12 14 16 something like that. If you're on you bunch of 18 or earlier, it's just sudo. Apt installed. Get If you're on a different Linux operating system. It might be Yaman. Maybe whatever your package manager is, but chances are. It's you're prefects. Whatever your package manager is called install, get something along those lines. If you already on Lin X, chances are you already know how to do this and you know which one to use now, a quick little crash course. If you are brand new to using the command line on Mac or on the Lennox, you can type PWD. And that will show you the the working directory that were that were in that This is really just ah folder name here. So I'm in the root of my computer and then I'm in a folder called Been and To Change Directories and Do CD and C D stands for a change directory And then to list all of your files and folders you can always do ls Dash L. A. And you can see I've got a bunch of stuff in here. I'm going going to see the up one directory a last dash L A and you can see I'm just sort of in the root here. There's nothing fancy going on in here. This is just really folders and a temporary folder in here. We're going to be working with command line a little bit more throughout this course. That's not really get related. So you're going to want to be familiar with CD. Let me, ah, just make that a little bit centred here. You're going to want to be familiar with CD and probably PWD No. And also ls Dash L. A CD to many arguments, cause that's not a command. You have to do one at a time. So it's CD PWD or Ellis Dash L. A. So go ahead, get get installed on your computer. Once you have it installed up and running, you've got your terminal open. Or, if you're on a limits machine, you'll want to open up A program called Bash instead of Terminal Terminal is for a Mac bashes for clinics machine. Once you have that up and running, you can type get dash dash version and it will show you the version of Get that we're using . Once you've done that, let's head on over the next lesson where we get started with Get Hub
7. How to configure your Git settings: before we do anything with it, we need to configure it on our command line because right now, if we try to do anything with get or get hub from our command line, it doesn't know who we are. It doesn't know what we do. It doesn't know anything about us. So we're going to need to configure two things we're going to need to configure our name and our email address. And this is just what we consign commits. We'll talk about commits and signing and all that stuff down the road. But basically, every time you write a little piece of code and you put it on, get hub. There's a little signature at the hash, actually, and it has an author, and it needs to know who that author is. So for this, we're going to type get config, Dash, dash global. I make a just a tad smaller here and you can see some of my stuff from above showed up. That's OK, user dot name quotation, and I'm gonna put my name as Caleb telling because that's my name. And then I'm going to type get config, Dash dash, global user dot email, and this is going to be my email address. I put this in quotations as well, and I'm going to write my email address here. You can see that actually wrapped onto another line. That's totally okay if I made the smaller goes back onto one line, so hit enter and that's it. Now that email addresses should ideally match with your get Hub email address, I don't believe it's actually necessary, but it is a better way of doing things if your email addresses all line up. So whatever you signed up for on Get Hub, get lab Orbit Bucket, make sure you're using that exact same email address. No, we can verify that this worked by typing Cat, and that's a tilled slash dot get config. And if I do tab after the word C o N f just tab, it'll auto complete. For me, that file should exist, and now we can see we've got user with a name and an email address. If you do not have this file, that means you're get configures not set up, so make sure you have your user name and your user email set up, and also make sure you have a git config file on your computer. If you have that all up and running head on over to the next lesson, it will talk about adding an ssh key.
8. How to "download" your repository to your computer: Okay, let's talk about downloading your project to your computer. So we're actually going to clone this entire repo? I have a sample report here called Caleb telling dot Get hub dot io. I'm going to clone this onto my computer so I can have access to this. Read me file. Now, To do that, all we have to do is click this green button here and we can clone with https or we can use Ssh. Now I'm going to stick with https to make this nice and simple. So when I click this link or this little button here and that's gonna copy this whole thing for me now, I'm gonna open up my command line, and I'm going to CD into just the folder that I usually put most my websites in. And I'm going to type, get clone, and then we're going to paste that you Ellen here. And that's going to create a folder called Caleb tallinn dot Get hub dot io. Now it's going to create a folder for you called your user name. Dugit hub dot Io. Let's go ahead and run that and that cloned the site down. So now I can CD into Caleb Tully. Don't get hub dot io And if I do ls dash out a or if you're on windows, you can type d. I ardor. So I'll do ls Dash L. A. You can see I've got a read me file in here, and we can actually open this up in our code editor, So I'm using V s code. I'll just open this up and we can see my read me file is in here, and it just has this title. So this is just mark down. It just has the same text that is in here. And if we actually go to edit this file, we'll see that it's the exact same content. We've got a number sign, and then we have the title. And if I go over to V s code, we can see that if I select all of that and I just paste on top of it, it's the exact same text. Nothing changes. And that's because that's because this is literally the exact same code that get hub has. Right now. We can now edit it on our computer, and then when we're ready, we can push it back up to get her views and get now once again, you don't have to do that. If you would much rather just edit files right on, get hub. You can do that too. Now, I would suggest not doing that cause get is a really good skill to learn as a Web developer by to just know that you don't have to do that So we can always click this little edit icon here Or if we can go into a particular file, there's usually edit icon right over here. So edit this file and we can say I'm going to create a pull quote here. This is the website for Caleb Colleen and we can preview the changes. Green just means that's what we added, and this is a nice little border to it. And then we commit those changes and we just give a little message like, what exactly did we do? Added a description. And I'm going to commit directly to the master branch and commit those changes. And there we go. Now, my read me has been updated. If I go back to this repo this repository, you can see that this has been updated. Now where get comes into play is this has not been updated on my computer. I go here, nothing's been updated. But what I can do is I can say get pull origin, Master. And when I come back here, we can see that this was automatically updated for me. That's the power of get. We can keep code in sync between get hub and our computer and other people can do that too , so they can always have a source of truth.
9. Create your first file: All right, let's go ahead and create our first file. So this one came with our repo and we edited it, but we didn't actually make our first file, so there's two ways to do this. The first way is to use get, and I'll show you that little down the road. But the other way is you can literally just click. Create a new file and you can create a new filing here. Let's call this index dot html and in here we're just going to say H one. Hello world slash H one. Preview this and it just looks like regular HTML code. So let's give this a name of first. Hello world. Commit and commit that file. And so where these commits air coming into play is right up here, we can actually see that I now have some sort of code history. Initial commit added a description First, Hello, world commit and you can actually go through these and you can see the different pieces of code that have been updated for each commit. Now that's neither here nor there. What we want to do is work with this index dot html file. So what we can do is just go in here. We can either edit it directly, just like we did with the Read Me file. We could copy and paste or HTML in here, but that's actually a pretty painful way to do this. And honestly, that's no way to live your life. Another way to do this is if you just open up here code editor and I'm already inside of my repository. I could do a get pole origin master. And if I do get Log, dash, Dash one line, we have that initial commit. We added the description. And first hello, world commit. That's the one that we just made, which means we should now have access to that index dot html file inside of es code. And look at that. It's right beside the read me file. So this is inside of your folder on your computer now. And really, that's all it is is just a folder that stays in sync with get up. So what we could do here is, instead of just that standard H one, we could actually let's make this a little smaller. We could actually give this a hello world, um html body so html five were using English as the language. This just make sure that it's responsive and it's going to be responsive. CSS. And here we could say, each one this was edited. Save that. And in the next lesson, what we can do is with get, we can actually push it from our computer to get hub directly.
10. Push your files to your special repository: all right in that last video, what we did was we edited that index dot html file and this is what it currently looks like on our computer. But if we go back to our repository index dot html only has one line in their versus the 11 lines that we have in here. So how do we get that in sync now? One way we could do that is we could copy all of this and we can edit this file and then we could pace it. We could make a commitment sit, and then we could commit the changes. It's no way to live your life because you'll be doing that over and over and over again, and that is a very slow process. Instead, what we can do is we can do this through the command line. So in my repository on my command line, I could do a git status, and we can see that index dot html is modified. That what it's telling us, at least, and then we can do, get add, dash, dash, all get status once again and we can see that is now green. So red means it was not staged for commitment. This is now stage for commitment because it's green. So I'll just get status once more here. Now, what we can do is get commit Dash M for message. New html file structure Something like that. Now, this currently is not on get up yet. So if we did get long Dash, dash one line, get logged. Ash, Ash One line produces this new commit in year origin. Master, a k get hub is back here. So now we need to actually go back to get hub and we can see and hear that nothing has changed. And in order for us to push these files from our computer to get hub, it is actually command called Get push. So we do get push origin Master. So we get status, get add, get commit, and then get pushed. Origin Master. Now, this doesn't really seem worthwhile if you're only changing one file at a time. But when you're working with other developers in the future, you're going to be working with lots of files. So this makes a lot more sense to do it with, like, 10 files or big changes and not just like 10 lines of code. It's going to ask me for my user name because I use the https version. So Caleb Colleen is my user name, and I put in my password, all right, And so once you have pushed that up, you've entered your user name and password. You can refresh your get home page, and you will see this commit name changed, and we now have the code that's on our computer. So that's creating your first file and pushing it up from Get Hub are to get help from your computer and the next lesson. Let's go ahead and actually view this website.
11. Demoing your new website: All right, let's go and actually view this on our new get home page because we've already been working inside of this Repo and surprise Get hope has actually been making this website for you the whole time. So let's go into our settings and we can scroll on down and we can deal with those headings later if we wanted to. And it says your site is published at https Kayla telling don't get hub Io Now yours is going to say your user name don't get helped out I owe So I'm just gonna click this and look at that. This as edited supposed be This was edited but DNC This as edited proves that it was edited The title was Hello World We can see that appear says hello World title is hello world So our code is actually being deployed to our own website Here https Caleb tolling dot get hub dot I'll I can now share that link with everybody else. Now this is not really a share worthy website. We're going to want to actually create some sort of portfolio on maybe upload a couple of projects which will also do in the future lessons now a couple things to keep in mind. If in your settings you don't see this yet, it might say that it is. Ah, here it is. You might just see something like this. It says you're get hub pages currently being built from master and you don't see this sort of green success box or you go to your page and it's just do like, I'm hoping this is not an actual get homepage. Yeah, if you see a page like this that just has 404 chances are one of two things have happened. You're get hub Repo name your user named. I get hub dot io was spelt wrong. Maybe there's a type of you can change your get hub repository name in here. Yeah, your page is still being set up. Your your website is still being set up, and that's because get hub behind the scenes, deals with your servers, deals with content delivery networks, deals with all sorts of configuration stuff. You don't have to worry about any of that. Sometimes I can take a few extra minutes to set up, So if you don't see this within a few minutes, make sure that your repo name is spelt properly has to be. Get hub dot io not dot com But if you have both of those already, your website should be loading. Not this one. Your website should be loading something like this. So the next lesson, let's go ahead and find some sort of theme that we can use just a free thing just to make this page look a little nicer.
12. Making your website nicer with a theme: okay. In that last lesson, we actually access our website. Even has an SSL certificate. So it has http s, which is nice, and it shows all of our code in here. And even if I did right, click and view source, view page source. There you are. Make this bigger. We can see that this is the exact code that is currently on our computer. That's pretty cool. So we could go ahead and close that. I just wanted to show you that that is the exact same code that we've been working with. And so now let's go ahead, make this page actually look like a nice website. So if you have a website built already, definitely use that I don't have one pre built. So what I'm going to do is just go and get one from start bootstrap dot com such themes. And I'm going to use this creative theme. This is a pretty standard looking portfolio site. And let's view this live preview and this is what this page is going to look like for me. Now, we're not going to edit all the content on here because this is not a ah full contents html CSS JavaScript Web sites sort of project. What this is is a nice way to give you some sort of theme that you can work with down the road. Now again, if you have your own, please, please use your own for me. I don't have one, so I'm just going to download this one, and we're going to use this so free download, you know, save that file. Okay, so I just did some quick editing there, And these are the files that came with this. And so I just extracted them on my computer and who, literally just going to copy them over. So So I'm going to select all of these and copy them, and then I'm going to move over to my new project, Might get help project. And I'm going to just paste this, and I'm going to overwrite this index dot html found. You're going to want to make sure it's called index dot html. So I'm gonna replace that, And what I can do in my terminal now is get status and you can see that there's all sorts of stuff in here. I modified index on each email, but I also added CSS and JavaScript so I can do get add dash, dash all get status once more, it will show me all my files, all three of them. Now what we need to do is give us a commit message so we could get commit. Dash M added a nice site. Then we could get pushed Origin, master. And again, this is where it really becomes useful to know Get because we can edit three files or add three files without having to copy and paste creating file copy pays creating file copy, paste created file. We could just do it all on our computer like this. It's no, I'm going to get pushed. Origin Master is going to ask me for my user name and my password. And then if we go back to get hub here and just refresh, we can see we have a CSS folder. We've got a JavaScript folder index dot html. And just to prove that this is all the same in here in my editor, I'm using V s code. I've got CSS style that CSS JavaScript folder script, duck, jazz and index dot html, which I did not write. So now we can go back to our settings, and if we just scroll on down, Okay, you're gonna want to make sure that this says that your site is published. So let's go back to our side here and let's just click refresh and OK, ok. Eso this is looking better. You know what? I know exactly what I did wrong here is I didn't copy the images or the assets fold right that you. So if I open this up Yeah, I didn't like that, but this is a good example. So I could just copy that whole folder, pace that over here, go into my terminal again. Get status, get at dash dash, all get status. Gives me all these images. Now I don't have to copy and paste them or find some magical way to get them on. Get hub. I could just simply get commit. Added assets get pushed. Origin Master is going to ask me from I use name and password. And if we go back to ever get home page here way, go back to our code. We'll see we have a folder called Assets and then a some folder called I m G. It's refresher settings here, and I just I always like to make sure that this is still available. Sometimes it goes away because it's the middle of a deployment, and that's okay. Sometimes when that happens, it takes like 30 seconds. Let's go back to our page here and refreshing. We'll see these images now load now we have a website up and running on Get hub pages. Now, at this point, feel free to do any sort of edits that you want to do so the next last. We're going to customize the title some text, add some links, and we're going to add some sub folders in here so you can actually copy and paste your existing projects onto your get hub pages website, and people can interact with them right away.
13. Don't forget to add your projects to your portfolio!: All right, let's add some of our custom projects. If you don't have any, that's okay. You can add them down the road. If you have some, you might want to start adding them now. So what I'm going to do is open up Firefox here, and I'm going to file open open file. There we go. And I'm gonna open up this index dot html file and this is our local copy. So this is what's on our computer. This is not what's on get home pages. So I'm gonna change this this and I'm gonna add a second button, and they're going to go to two different places with two different projects. So first things first. Let's go back to our editor here. And this is the title Caleb's Port Folio. And in here view the things I have created and this is refresh this page. Okay, cool. Just change them tax. Nothing, Major, let's changes. But now, So they're supposed to be two in here. We don't want this to trigger any sort of scrolling. That's just javascript that comes with this particular theme. We don't want that. We do want this to go to different places. so we'll add a to do here, and this one's going to be view my motile and the view. My calculator and these are just two projects that actually have courses on where you create a motile from hand and you create an interactive calculator from hand. So flip back to Firefox refresh, and we see two buttons. Now these aren't going to go anywhere. If I click, it doesn't do anything. These need to go somewhere. So I'm going to actually end up copying and pasting my projects from those courses to a new folder called motile just slash motile or to make it a relative link. Wherever this index study Chmela file is and into the folder called Motile has a slash. This is getting into path thing. If you aren't familiar with Path thing, this can be a little bit painful at first. But passing is very, very important, and this one is going to be calculator now. If I go back to Firefox and refresh, you see the bottom left here, it says slash model and slash calculator. Now, if you click that these folders simply don't exist, we're going to get a file not found that's okay. What I want to do is open up finder or any sort of folder explorer on your operating system , And I'm going to create a new full during here called Motile, and I'm going to create another one called Calculator Calculator, and I'm just going to go and grab that source code and paste it in here. So I'm gonna pace my calculator in here, and so I'm going to go up to file paste or edit paste, depending on your operating system or just command or control V And I just pasted my files in your now you won't have these files and that's okay. You're not supposed to have these files. This is supposed to be your project. So if I go back a directory here, this might not be calculated for you. This might be something completely different, and it might not be a motile might be something completely different. So I'm just gonna go ahead and grab the motile code and come back here and I was just off screen for a second. That's okay. You don't really need to see me copying and pasting. That's all it was, and I just pasted four files in here. And so now I have files in motile. That's my fuller called motile. You can see it down here with an index dot html file. That's very important. And also calculator hasn't index dot html file. Also very important. Now when we refresh our local page here again, this is going to go to Motile, and this loads up my index dot html file. Now, if you're using Firefox actually skipped a thing here. Firefox walks to show you that you're in a directory. A Web server like Get Pages won't show you. It will just automatically assume that is looking for index dot html. That's why it's important. So we could do that again with our calculator. Same thing Firefox, and say, Hey, which file do you want to view? We say index dot html and we've got a calculator in. You know, it's pretty cool, but let's go ahead, and actually it's closes down. Ah, and lets view our page. So copy that link pace that in there None of this is on our get up page yet, so let's go ahead and go into our command line here. Let's do a get status and we can see we've got this weird es store file. This is from a Mac. And actually, as you use get, you're going to see that your computer uses all sorts of hidden files that you may or may not have ever seen before. So what we're going to do here is get add index dot html get add calculator that whole folder and get ad the entire motile folder. We can do it, get status, and we can see that we didn't add this DS store because that's just not a useful file. Really. It's just for Mac OS, and we're going to be adding all of these green files. Let's go ahead, get commit added projects. Get push origin master again. This is going to ask you for your user name and your password. Now, you already know my user name, but I just don't, like type in my password on screen, even if it is hidden. And then we can go back to our source code here, refresh and we'll see that we have a calculator and or moto. So these are now our projects that we have, and we go back to her settings. Just make sure that this is refreshing the way it's supposed to. Your site is now published. Okay, Cool. Cool. Cool. Let's go back here. I'm on Caleb telling dot Get hub dot Io and I just hit. Refresh. I now have Caleb's portfolio. Things I've created. I've got a link to my motel. You can see that at the bottom left and a link to my calculators. Let's click on this motile And this is actually the source code from the motile project. Until that work so people can now actually experience my project. I can go back. I just made that way too big. I can view my calculator and this one's pretty cool. I like this one quite a bit. We could do something like 55 times five divided by three is equal to 91.666666667 something like that. But again, this just demonstrates that I have a project that actually works, and I can show this off to people. Now, what makes this really really powerful is the fact that someone can simply come to your repository and they can read through this. They can see Oh, you've gotten index dot html file, But hey, also, you've got ah Motile folder. You got a calculator folder, What is in this? And they can actually go and see your source code so we can see that there's not a lot of html in here. We can see that there's strangely not a lot of javascript in your butt. If you were applying for a job, the company that you're applying for could look at your JavaScript and say, Oh, this person is writing modern javascript. That is a very good sign. And they could also look at the CSS and say, Oh, they know, Ah, boat background, radiance. And they know about buck shadows using to box shadows at the same time, things like that. Those were good signs for employers to site. We could hire this person because they actually know what they're doing. And that is how you simply get your projects on to get help pages. Really? I just made it Ah, folder and I linked to that folder Major. I had index dot html in there. That's all it was
14. How and why you should "ignore" useless/hidden computer files: Okay. One thing you're going to want to do is not commit certain file types. So, for example, we saw this in the last video. If I do get status, I have this weird DS store file. Now on a Mac, that's just a hidden file. We don't usually see that, but get hub picks up on it. You're going to see things like this. Maybe not this exact file, But you're going to see things like this on Windows and Limits as well. And we can actually get ignore these files. And it is a file called Get Ignoring all. It doesn't say, Hey, ignore certain files. Don't let them be committed. So if we open up our text editor and we just create a new file in here called dot get ignore, we can ignore certain file types and I'm just going to put a new file type on your DS underscore store and save that Now, if I opened up my editor are my terminal again. I could do get status and DS store does not show up, but my get ignore does. That's okay. We want to ignore these files permanently so we can commit this file. That's okay. Now let's say you had other files in your Maybe you had a bunch of Maybe you had a bunch of images that you were using locally, but they should not be pushed to your get hub repository so you could say anything. That's a J peg dot jpeg. And from now on, it will ignore JPEG files. Probably a bad idea unless you're JPEG files air. Really, really big. But a good example would be if you write Python. We have these high cache files P. Y sees. We also have pie cash folders so we can ignore all of those as well and is really just one file per line or one file type or one folder per line. That's all it is. So we could do kids status. We have this get ignore file in here, and we can do kid add dash, dash all or just get add dot Get ignore Get status, will see its green get commit Ignore files. Get push origin. No, let's do this. Let's clear this off. Get push Origin, Master And all this is going to do is again is going to ask you for your user name and password and for me that was pushed up to get up. And we can always verify that by going to our repository clicking refresh and we'll see. There's a get ignore filing year, and it's going to ignore DEA store dot pew I see and pie cash folders.
15. Your final Skillshare project - don't forget to share your website! : Okay. Welcome to your skill share project. Through this course we've created get Hub Repo. We've learned some kit and we've launched a website. But now it's your turn. I would like you to create a get hub Pages website and cherry screenshot and the link to your get Home Pages website In your skill share project on skill share, there is a dedicated area so it's not in the comments. It's an actual dedicated area where you can share your entire project. No, don't forget at any point in time, if some of the get stuff got a little bit confusing, I do have a get essentials course here on skill share as well. You can always check that out or if you need a refresher on h email CSS javascript, anything like that. I have you covered all over those courses are also available here on skill share. So don't forget to follow me on skill share because I will let you know when I have a new course. But in terms of this course, it is your turn to create a get hub pages website. Share your portfolio stuff on there. Everything you work on in the future can go into your get hub pages website. It's totally free. They'll never charge for source code is definitely open source so people can see your code which is really, really powerful for employers to actually understand what kind of Dev you are. Once you have that again, don't forget Do you share that project in your skill share project? Thanks for taking this course and hopefully I'll see you in the next one.
Kalob Taulien, Web Development Teacher
