If you are just getting started with GitHub, then this post is for you! First download git to your computer from git-scm.com/downloads (think of git as local version control (tracks any changes) and GitHub as remote version control.) You need to make a new repository for each separate project you create. On your GitHub, you can click the plus sign in the top right corner, to the left of your profile picture. Hit new repository, give it a descriptive name and click the create repository button. The next page will have some have some handy instructions. Copy the line that says
git remote add origin https://github.com/your-user-name/repo-name.git
we will need this line in a few steps
open git bash or a terminal of your choice and navigate to where you want your project. For example, if you have a projects folder on your desktop you can type
cd Desktop/projects
(cd stands for Change Directory, it is how we can navigate through the file system.)
make a new folder for new project ('mkdir' will create a new folder it stands for make directory, 'touch' will create a new file)
mkdir new-project-folder-name
(dont include spaces in your folder and file names, that will just create future headaches..)
cd new-project-folder-name
git init
(this will initialize empty git repo on your computer, so it can keep track of any changes)
git branch -M main
(here we are just changing the name of our branch from master to main, it is the more updated way)
Here we will paste in that line we copied earlier from github.com. (remember, in git bash, paste is shift + insert)
git remote add origin https://github.com/username/repo-name.git
(adds the remote repo to your local folder)
Now that we are all set up it is time to open our editor and start creating some wonderful apps!
You could create folders and files from the terminal, (with mkdir and touch) or you could do it from inside your editor as well.
code .
opens VS Code in the current directory, if you want to just open up a file you can type code main.js
or code file-name.ext
you can replace code with atom if you are using that editor. For others, I'm not really sure why you would use anything besides VS code or Atom. Lmao, just playin.. do a quick google search for your specific editor. (Becoming good at searching for the answer/solution or whatever resources you need, is going to be a critical skill you will need to develop.)
When you are ready to send your work to the world...
(make sure your files are saved)
git add .
(this adds everything in the current directory and below, to the staging area)
git commit -m "your commit message goes here. for codewars I put the name and level of kata. for projects i will put what I changed for example - added css"
(spaces are allowed here)
git push --set--upstream origin main
or git push -u origin main
(both work and are the same)
you only have to add this additional piece the first time you push to a new repo. It is just setting up to send to your 'main' branch.
for existing repos, that have already been initialized..
After you save your files go to git bash and navigate to the folder of your project. (or right click the folder on your desktop or file explorer and click 'Git Bash Here') When you open git bash normally, it opens in your root directory. For example, if you have a projects folder on your desktop you can type the following to get into your project.
cd Desktop/projects/folder-name
cd ..
will bring you up one level. For example, if we are already in Desktop/projects/folder-name and we want to navigate to test-folder that is located on our desktop, we can type cd ../../test-folder
we had to go up two levels to access whatever is on the Desktop.
(after all your files are saved)
git add .
git commit -m "message here"
git push
ohshitgit.com - this site will help if you run into any issues
If you make any changes remotely (on github.com via their editor) you have to pull those changes into your local folder before you can push new changes. In your terminal in the location of your project type
git pull
This will update your local files and allow you to push your new changes. Git is pretty helpful with error messages, they will usually tell you one or more commands to try that are related to the error.
some helpful keyboard shortcuts!
-for mac replace control with command but some could still be different
alt + z (word wrap: makes all the text fit inside your screen inside of VS Code )
ctrl + z (undo)
ctrl + y (redo)
ctrl + r (refresh the page) I believe the f5 key will also do this
ctrl + f (find: will search the file for any keywords, works in browser as well)
windows key (or start key) + d (minimizes all windows)
windows + shift + s (take a snippet/screenshot of a portion of your screen)
windows + g (opens up the gaming app which will allow you to record the screen)
ctrl + a (highlights all text)
ctrl + / (will turn highlighted text into a comment. If not highlighted it will comment the current line)
ctrl+ j (opens up the terminal inside of VS Code)
alt + tab (shift between applications)
alt + shift + tab (same as above but backwards)
Inside Chrome:
ctrl + tab (shift between tabs)
ctrl + shift + tab (same as above but to prior tab)
in git bash:
rm folder/file-name (rm will remove/delete and if it is yelling at you, use the force flag. It won't allow you to delete a folder but sometimes we need to! so you would type, rm -rf folder-name)
ctrl + insert (copy, insert is usually above backspace and my keyboard makes me hit another key, fn to get to insert)
shift + insert (paste)