Lesson 17 Github

We’re getting online today! This is a longer lesson because I wanted to get you across the finish line.

Part 1

Go to github.com and create an account. Then click to create or add a new repository. Think of a repository like a box of all the files and folders that hold everything for your website. Each website, each project, is going to have its own repository. It could have a number of pages, but they would all get saved in the same repository.

Your project is going into that repository. Your repository must have an index.html file. That’s what the browser is going to look for when someone goes to your web address, your url. This is your landing page, the page you’ve been looking at in your browser.

Give your repository a name, maybe firstProject and click on Create Repository. Leave that page open!

Part 2

(This should already be done, but just to make sure…) If your project pages and images aren’t already organized into a folder, then go to your Projects folder and create a new folder just for this project. You could call it firstProject. Make sure your index file and any images or videos or any other pages are saved on your computer in that folder. Keep things organized. You may have an image folder or video folder. Make sure your project still looks right by testing it in your browser after you moved it into its own folder.

Part 3

Open your Git command line box, what was downloaded in the previous lesson. Use cd (change directory) to navigate into your firstProject folder. My directory file path was documents/projects/firstProject.

Once you are in the correct directory. Type git init . That initializes, creates, a git directory for your project. A little folder with .git next to it will appear in your project folder. (If you don’t see it, it’s there! Windows may be hiding it. You can later search online about how to get Windows to show hidden files and folders.)

Get on your screen the github page and the git command line box. Put your box right above where it says …or push an existing repository from command line. Beneath it should appear something like this (but with your user name).

git remote add origin https://github.com/AllinOneHomeschool/firstProject.git

Make sure you type it exactly. If you mess up, you can search how to fix it, or delete your repository and git folder and start fresh.

Then type git add . Type the period! That tells it you want to add everything in the current directory into the repository.

Then type git commit -m “Create page.”  Type the quotes and everything. Committing is well, committing to adding all that. The M means you are leaving a message with it. You must. The stuff in the quotes can be anything. I was taught to use the command form and a period. You are saying what changes you made. “Add contact info.” “Change background color.” Stuff like that. Or, “Fix bugs.”

*Since it’s your first time using Git, it wants to connect with your Github account. It will tell you at this point that you have to let it know who you are. It will tell you the code you need to enter. It’s this.

git config –global user.email “Put your Github email address here

git config –global user.name Type your name in here, first and last name

Then retype git commit -m “Create page.” and hit enter.

Then type the final line there.

git push -u origin master

Push is the command that takes the files from the directory on your computer and puts it in the online repository. Just picture pushing all those files and folders into the box holding your repository.

Click on your repository name on GitHub and look for Settings toward the top of the page. Scroll down to GitHub Pages. Under Source there is a button that says None. Click on that and choose Master Branch and save. Scroll back down to the same place and your url, your link will be there. Give it ten minutes before you click your link to check to see if it’s there. If it’s not there, make sure you have an index.html file in the directory you created your .git folder in. If you still need help, contact GitHub. They have excellent customer support.

Congrats on your first website!

You can see this lesson on video and you can see my firstProject website. You can add your project links in the comments if they appropriate for ALL audiences. I reserve the right to remove any link that’s not by my standards. Please report any abuse.