We’re getting online today! This is a longer lesson because I wanted to get you across the finish line. Here’s the video.
Go to github.com and create an account. Then click to create or add a new repository. You want a public (NOT private) repository. Public just means you can share your code with others. 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!
(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 is in that folder and not inside any other directory. Any images or videos or any other pages for your website must be saved in there as well but can be organized into folders inside the project folder. Keep things organized. You may have an image folder or video folder. Index.html MUST be in the main folder, not tucked away inside. Make sure your project still looks right by testing it in your browser if you moved something into a folder.
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.
That folder, that directory, MUST have an index.html file. It can’t be in another folder inside that folder. It must be in the main directory. If you called your project, firstproject.html, you need to rename it index.html before you do this next part.
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 and click on Pages. It’s the last thing on the menu to the left. Under Source there is a button that says Branch: None. Click on that and choose Master Branch (or maybe yours says “Main”) and save. Don’t change anything else. Your url, your link, will be there at the top of that page. Give it ten minutes before you click your link to check to see if it’s there. (Don’t check too soon. If it’s not there, your cache will save the not there page.) If it’s not there and you were good and waited, 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, but let’s not bother them over little things. Make sure you have that index.html file!
Congrats on your first website!
You can see my firstProject website.