logo sykohpath.com

				where code goes to die
			
	
blogblogblogblogblog

Web Development From Scratch, Day 2

Ok, so, we got through day one.  We used Git GUI to handle out keys, because for some reason the terminal part is scary.  Welp, time to not be scared anymore.  Technically you can use Git GUI for everything, but it's actually going to be faster to work from the terminal.

1) Open Git Bash.
2) Cower in fear of the terminal window.

Once you're done cowering, you'll need to know a couple basic commands (write these down!)

Change to your home directory
cd ~

Change to Parent directory
cd ..

Change to Root directory
cd /

Change to a subdirectory (replace <NAME> with the folder name, such as "Projects")
cd <NAME>

Navigation is fun, but need to actually be able to see *what* is in the directory:
ls

You'll be using these "all the time", but at the beginning, you'll only be using these to get to your projects directory, and then sitting in that same place while you spam "git" commands.

NOTE: if your "projects" directory is on another drive, or rather, to change drives in general:
cd /<drive>

So "cd /D" would put you at the D: drive.  Again, only for Windows.


------------------------------------------------------------
Since we didn't do this yesterday, let's go ahead and whip this part out: configure your username and email.

In the Git Bash terminal, set the following:
1) git config --global user.email "<EMAIL ADDRESS>"
2) git config --global user.name "<USERNAME>"

Replace the fields with your values:
git config --global user.name "SyKoHPaTh", for example.  


---------------------------------------------------------

So, by default, when you open Git Bash, you're in your home directory.  If for some reason you aren't, do the "cd ~" thing, and you're magically back home.

1) Type "ls", and you will see something similar to your explorer-home window, with your user folders.
2) Type "cd Documents", followed by "cd Projects"
3) Another "ls" will show you your lonely "www.websitetest.com" folder.  Don't go into it quite yet.


Setup Git Repo Locally
1) Only have to do this once per repo (unless you screw something up and want to start over hah!)
2) type "git clone git@github.com:<USERNAME>/websitetest.com.git" - replace <USERNAME> with yours, so for me, it's: git@github.com:SyKoHPaTh/websitetest.com.git
    Note: This is also how you can clone other people's repos!
3) This created a new folder named "websitetest.com" next to your "www.websitetest.com".  This is intentional, because a) can't clone into a non-empty directory, and b) good habit to have a "backup" of sorts, by doing...
4) rename "www.websitetest.com" as "www.websitetest.com.backup" (or however you want to name it).  You can do this through explorer, or if you're finally confident with git commands, you can do it through the terminal:
mv www.websitetest.com www.websitetest.com.backup
    Tip:  instead of manually typing out the whole folder name, type in "ww" and then press TAB.  OMG magically filled in for you!  If you press tab and nothing happens, press it again, and it'll show you a list of matches - simply type more of the name you want to get it to complete.
5) Now, rename "websitetest.com" as "www.websitetest.com".  Easy, mind-numbing organization crap we're doing here, right?  Also, what about that awesome index.php file that's in the backup directory?  Just copy that over - through explorer, or again, terminal:
cp www.websitetest.com.backup/* www.websitetest.com

-----------------------------------------------------------------------------------------
Now, you can skip this part, or if you feel like poking around:
1) Go into your www.websitetest.com folder using the terminal:
cd www.websitetest.com
2) Type "ls", and you'll see your two files: index.php README.md

How does git "know" how to handle this folder as a link to your repository?  New command (flag)!
ls -a
This displays all files, including hidden ones.

1) You'll see a .git folder.  "cd .git" to get into it.
2) "ls" in there, and you'll see all of git's innards.  Do NOT dink around with any of this stuff.  Just be aware  it's there.
3) Finally, "cd .." to get back to where we were.

-----------------------------------------------------------------------------------------
FINALLY, we can start using git.  For today, we'll just mess around with the local-side, and not server side stuff.

New commands!  You already used "git clone" to get this far, now we need to use git to update and automagically upload our file changes to our repository.

1) git status
2) This shows all files that have changed, and are ready to be dealt with.  Actually reading what it says, we need to "add" our awesome index.php file to the repository.
3) git add index.php
    Note: Alternative: "git add *" will add *everything*.  Be careful doing this around sensitive files!
4) "git status" again, and it now says "Changes to be committed".
5) This next command is the one you'll be using all the fricking time: git commit.  Specifically, you'll be using it as follows:
git commit -a -m "<COMMIT MESSAGE>"
    -a means "all files that are ready to be commited"
    -m means "attach this message to the committed files"
    <COMMIT MESSAGE> is, well, whatever you want!
6) git commit -a -m "First commit, my awesome file!"
7) git status
8) Notice that no files are listed in status now.  This means they're ready to be "pushed" to our server.  You'll see the soon-to-be-familiar "Your branch is ahead of 'origin/master' by 1 commit."
   Note: "origin" is our reference to "<USERNAME>/websitetest.com" repository, while "master" is the "branch" of the repository.  More on these shortly.
9) And finally, the next command you'll be using for the rest of your life: git push.  Technically you want to use it as "git push origin master", but for now, "git push" will work.

--------------------------------
Go back to [url=http://www.github.com]GitHub, and under your profile name, go to your "websitetest.com" repository.

1) You'll now see your "index.php" file stored in the repository, with the commit message attached to the side of it.
2) Click on the "index.php" file itself, and it will show you the contents of the file.  In this case, it will say "I'm Awesome", if you filled it out from yesterday.
3) Click "Edit", and OMG, you can edit this file directly through the site!  Type in "Super Awesome!", and put a commit message in the box under the edit area: "Added awesomeness"
4) Click "Commit Changes", and it will take you back to the file contents view.  Click "History".
5) Here, you can see all of the commits attached to that specific file.  This is HIGHLY useful, especially if you "accidentally" delete a large chunk of code and commit it; simply view the previous commits, and your code is still there! (Click "Browse Code" by "First Commit...", and you'll see the file contents before you added "Super Awesome!").
6) Click the giant blue "websitetest.com" to get back to the file view.
7) You'll see your newer commit has replaced the first commit, everything is good so far.

------------------------------------------------------

Ok, back in your terminal, type:
1) git pull
2) Notice that it lists your file "index.php" with a number, and + next to it, reflecting 1 line was added (- is 1 line removed!)
3) Open up index.php by any means necessary (hopefully you have SublimeText 2 running, which will detect changes in the file if you already have it open).  Yeah, make sure you have Sublime Text 2 as the default editor for .php files.  Heck, make it the default editor for everything.
4) You should now see Super Awesome added in your file!

See, at this point, consider that now all you have to do, is "git push" from your local computer, and then a "git pull" on your server...with those two commands, you'll update all the files with changes on your server, no messing around with ftp or anything like that!

It can even be made *easier* so that you can type something like "git push production frontend", and it will handle copying everything from your "frontend" branch to your "production" server.  That's beyond the scope of this document right now, but be aware that this functionality exists.

-------------------------------------

Summary:
git status
git commit -a -m "message"
git push
git pull

Good enough for today?  Sure!

---------------------------------------------
Actually WAIT.  This next part may take a day or two, depending on your webserver.  You have a website, right?  And it's with a crappy hosting company, right?  Heck, the disclaimer on mine says it can take up to 72 hours for it to be "enabled".  WELL THEN.

This varies greatly by hosting company, but the gist of it is:
1) Go to your hosting company website.
2) Account Settings for your website
3) Click SSH
4) Enable

Chances are you'll have to verify, which is a good thing.  Do it.  Do it now, because tomorrow's lesson will be working with the remote server stuff.

Hey look at that, I forgot to enable SSH on my test hosting server.  That's not awesome.  Welp, doing it now.  If it's not up tomorrow, I'll have to think of a different tutorial.

php, tutorial, terminal, git, github,


0 comments.
Sign in to post a comment!



No comments posted yet!