Creating a Project Pages Site

Before you can begin hosting your website with GitHub pages, you need to sign up for 0:00 a GitHub account. 0:04 It only takes a few minutes to sign up and it's free to use for public projects. 0:05 As you learned in the previous video, 0:09 each repository in your GitHub account can have its own website. 0:11 Those websites are called project pages. 0:14 To create a project pages website, we'll need to follow these four steps. 0:16 First, initialize a local repository for our site. 0:21 Then, add the repository to GitHub and 0:25 create a GitHub Pages branch in the repository. 0:27 Then, wait for GitHub Pages to build the site. 0:31 It usually takes no more than ten minutes. 0:33 All right, let's get started. 0:36 First, I'm going to teach you how to create a local git repository for 0:39 a project that's already on your computer. 0:43 To learn more about the git concepts and commands we're about to use, 0:45 be sure to check out the links in the teacher's notes. 0:48 So inside my computer's home directory I have a project folder named courses. 0:51 This is a simple web page I created that displays some of my recent front-end 0:57 courses on Treehouse. 1:01 So I want to create a local git repository for this project so 1:03 I can then host it on GitHub pages for free as a project pages site. 1:07 So at first, to initialize a new git repository on my computer, 1:13 I'm going to navigate to my courses project directory using the Mac terminal, 1:17 by typing the command cd courses. 1:22 Then I'll type the command, git init. 1:26 Now if you're on Windows, you can open the command prompt and type the same commands. 1:30 Or you can use GitBash, 1:34 a command line utility you can install when you install Git for Windows. 1:36 So the git init command creates a git repository on my computer for 1:40 the courses directory. 1:46 Now if I run the command get status 1:48 it lists all my project files as untracked files. 1:53 Untracked files are files that haven't been staged or 1:57 committed to the Git repository. 2:00 Git won't include these files in the repository unless we explicitly 2:02 tell it to do so. 2:06 Forget to start tracking these new files, I need to add them, 2:08 using the command git add followed by a period. 2:11 Once I hit Enter, it adds all the files in my directory to my staging area. 2:16 Now the staging area is where Git gathers any new or updated files in one place, 2:21 so that they're ready to go when I want to store them in my Git repository. 2:28 If I run git status again, I'm able to see that the new files are now tracked and 2:32 staged, so all the files listed in green are the actual files in staging. 2:38 So now, to commit these staged files to my local git repository, 2:44 I'll write the command git commit -m, and 2:49 as the commit message I'll type initial commit. 2:53 So now, all my new files are stored in my local repository on my computer only. 3:01 They're not connected to GitHub yet, 3:07 in fact, GitHub knows nothing about these files right now. 3:08 So, the first step to connecting this repository to GitHub is to create a new 3:12 repository on GitHub.com and this will be the remote repository. 3:16 In my GitHub account I'll click the repositories tab, 3:21 then I'll create a new repository. 3:25 And as the repository name I'll type courses. 3:29 So here's a helpful tip. 3:35 If you leave initialize this repository with a README unchecked, 3:36 when you click Create repository. 3:41 The next page will give you all the information you need to connect 3:44 your computer to this new remote repository, and push all your files to it. 3:47 So I wanna push an existing repository from the command line. 3:53 So if I copy these commands here and paste them in the terminal. 3:58 Once I hit enter, 4:06 Git pushes the files from my local repository to my remote GitHub repository. 4:07 So now if I click on my repository link, all my websites code 4:13 is up on get hub, associated with my local project folder and 4:18 my computer now knows about the GitHub repository. 4:23 Project pages websites show up on the GitHub domain 4:26 only if they're stored in a special branch of the project repository. 4:29 In Git, branches let you work on multiple versions of your code at one. 4:33 For example, you can have a main branch for your current website and another 4:38 branch to test out a new design or new features you're still experimenting with. 4:41 Right now I only have one branch in my repository, the master branch. 4:46 This is the main project branch so next I need to create a new branch for GitHub 4:50 pages and anything I push to that branch will appear in the GitHub.io domain. 4:55 So I'm gonna create the new branch on my computer first then push it to this 5:01 project page's repository. 5:06 To create the new branch I'm going to bring up the terminal and 5:08 type the command git checkout- b following by gh-pages. 5:14 When hosting project pages the branch needs to be named gh-pages or 5:20 your website will not display on GitHub pages. 5:26 So this command creates a new branch in my local repository named gh-pages and 5:29 switches to that branch. 5:35 So now if I run the command get branch. 5:38 It shows me that the new gh-pages branch is on my computer. 5:41 So now I have master and gh-pages. 5:45 And the start and green color tells me the branch I'm currently on which is gh-pages. 5:49 So when I created this new branch it made a copy 5:55 of all the files in the master branch. 5:58 So if I run the command LS it lists the directories and files inside the branch. 6:00 Now, the new gh-pages branch is on my local machine only. 6:08 I need to push up to GitHub using the git push command. 6:12 So, back in the terminal, I'll type git push origin gh-pages. 6:17 This not only pushes the files to GitHub, but it also creates a new gh-pages branch 6:28 with those files in the remote repository on GitHub. 6:33 So if I go back to my courses, GitHub repository and 6:36 click this branch drop-down menu, I'm only seeing the master branch. 6:40 But when I refresh the page, I'm able to see the new gh-pages branch. 6:45 So now, this new branch is for my GitHub page's website only. 6:54 It's where I need to push any changes that I want to appear on my site So once 6:59 you push the GH pages branch to GitHub, it starts building the GitHub page's website 7:05 and your website will be available to view on the GitHub page's domain, GitHub.io. 7:10 So as I mentioned earlier, it usually takes no longer than ten minutes to 7:15 view the site with the GitHub page's domain. 7:19 So let's try it out, 7:21 project pages sites are served under a sub path that matches a repository's name. 7:23 So, the URL for my website will look like this. 7:29 guih.github.io/courses. 7:32 So my user name followed by the GitHub pages domain and the repository name. 7:39 So great, it worked, my site's now hosted via GitHub pages. 7:46 So now what if you want to make changes to your project page's website 7:52 hosted on GitHub pages? 7:56 Well, making changes and pushing them up to GitHub pages is simple. 7:58 First, you make your changes in your local project repository, then you push those 8:02 changes to the gh-pages branch of your project pages repository. 8:06 So back in the terminal, if I run the command 8:11 git branch it tells me that I'm still on my gh-pages branch. 8:15 So, great, because this is where I want to make my changes. 8:19 So now I want to add a few new Treehouse workshops to my site. 8:22 So I'll open up my website project files in Sublime Text. 8:28 Then I'll simply paste in some new code that displays those new workshops. 8:32 Okay, so now I'm ready to publish these changes on GitHub Pages. 8:38 To view the latest changes on the GitHub domain, 8:43 I need to push them up to the gh-pages branch on GitHub. 8:46 So back in the terminal, if I run a git status, 8:50 I'm able to see the untracked changes in the project, so the index.html file. 8:55 So now I'll need to add these changes by typing git add followed by a period. 9:00 And now to commit the file, I'll type the command git commit -m. 9:07 And as the commit message, 9:15 I'll type add workshops. 9:20 Finally, to push these changes to the remote gh-pages branch, 9:24 I'll type the command git push origin gh-pages. 9:29 So, now in my gh-pages branch I can see that the latest changes were 9:37 just added to the repository. 9:42 So if I go back to my site and refresh the browser, great. 9:46 All my new changes show up. 9:51