logo sykohpath.com

				where code goes to die

Web Development From Scratch, Day 4

Alright, looks like my SSH request finally went through.  Let's go ahead and set this up for today's lesson (yes I know you have your database "test" created - we'll get to that soon enough!)

First off, from your terminal...oh right, we're in Windows.  Open up Git Bash.  Now, from *this* terminal, type:
ssh <username>@<website>

So, for example, your username to ssh into your site is "Blah", and your site is "www.websitetest.com", your line will appear as so:
ssh Blah@www.websitetest.com

niiiiiice.  Type in your password, and you'll be at a funky looking prompt, which varies *greatly* among hosting servers:

Yeah, weird, right?  Type "ls".  Chances are, there isn't much here.  Probably your "www" folder (or some variant).  "cd" into that, and you'll see all your web files.  This is your "web root" directory, that is, it's the directory that appears when you type in "http://www.websitetest.com" into your browser.  Note that it'll usually load "index.html" first.  Ok, done poking around?  "cd .." or "cd ~" to get to the home directory.

Now, the part I really can't help with here is making sure your host has Git installed and enabled.  Again, since there's many hosting companies, and every one is different, they may or may not have it installed.  A quick test is to type "git" at the command prompt.  If it's installed, it will show you a list of commands, with something like "See 'git help <command>'..." at the bottom.  If so, YAY.  If not, welp:

1) Google your webhost and "git".  See if there's any easy way to get git on there.
2) If not, unfortunately you'll probably have to stick with ftp for now.  (Get a better webhost! I suggest A2 Hosting - they have Git installed for sure!)

Keys.  Sigh.  Now, unless you feel like typing in your password every time Git or you connects via SSH to your server, you're going to have to make authentication keys.

1) If you're still on git bash, and connected to your webserver, type "exit" to disconnect.  
2) Now, just to make sure, type "cd ~" to put yourself back at the home directory.
3) View all files with "ls -al"
4) look for a ".ssh" directory.  If one exists, you'll want to back it up (or if you know you're already using it - say, you already set it up for git, you can use the same keys! - skip to <STEP> if you want to use the same key)
5) You can refer to GitHub SSH Key Guide if you want to generate keys, or to make new ones (don't forget to add them to Git!).
6) Arguable, but leave the passkey blank so that you don't have to type it every time you git/login.
7) Open up "id_rsa.pub" by any means necessary.  Well, you can do this directly through Git Bash.  Type "cat id_rsa.pub".  It'll display the contents of the file.
8) Now, to copy *from* Git Bash, Click the top-left window icon and Edit -> Mark, then drag a selection box over the text (make sure you cover *all* of the file contents!).  Then press Enter.
9) Ok, ssh back into your webserver.
10) At your home directory, "cd .ssh".  If the directory doesn't exist, create it: mkdir .ssh
11) In the directory, type: vi authorized_keys2
12) A really strange-looking setup appears.
13) Press i  (when you do, the bottom of the window should say "-- INSERT--")
14) Paste into the window - with Git Bash, press the "Insert" key to do this.  This should paste the entire "ssh-rsa <bunch of characters> email@address.com" into the top line.
15) Press ESC (removes the "-- INSERT --" at the bottom of the screen)
16) Type :x
17) Press enter (":x" <enter>)
18) You're magically at the prompt again! whew that was scary!
19) confirm the file actually contains what you pasted by typing "cat authorized_keys2"
20) exit
21) Relog back into your ssh server - this time, it should log in without a password (however, it will ask for a passkey if you set one!)

And that's "it".  Again, you only have to set this up once (unless you access from a computer with different keys!)


Ok, now, we have to somehow magically make Git push to your webserver.  This is another one of those "setup once" things.

1) ssh to your server.
2) First, we're going to make a subdirectory on the web root, so that it will be accessible from http://<yourwebsite.com>/websitetest.com.git
3) cd into your webroot, which varies by server.
4) mkdir websitetest.com.git
5) pwd
6) With "pwd", it shows the full path to the current directory.  Remember this!  Again, it varies by server, and will look something like:
7) cd ~
8) Type: mkdir websitetest.com (create the folder within your home directory, different than the ".git" one in webroot)
9) cd websitetest.com
10) git init --bare
11) The home/websitetest.com directory is now initialized with a "bare" repository.  This is separate from your repository on github.com, but we'll be pushing directly to this one.
12) Now, this next part is called the "hook".  Remember the path you got from pwd?  I hope you wrote it down!
13) vi hooks/post-receive
14) Press "i" for insert mode.
15) Enter in the following, replacing <PATH> with the full path you got from "pwd"
GIT_WORK_TREE=<PATH> git checkout -f

16) Press ESC, then :x
17) Verify the file with "cat hooks/post-receive".  If it has what you entered, you're good so far.
18) chmod +x hooks/post-receive
19) The file is now marked as "execute".
20) exit

We're back on the local machine for this next part.  I promise we're almost done.  Seriously.

1) Open Git Bash, if for some reason you closed it within the last 2 seconds of the previous section.  "cd ~/Projects/www.websitetest.com"
2) Now, to setup our remote access and push to our webserver!
3) git remote add web ssh://<username>@<yourserver.com>/websitetest.com
    Note: Make sure it's pointing to the repository, and not the .git directory you made in your web root.
        - if you get "repository not found", you may have to set it up as:  ssh://<username>@<yourserver.com>/~/websitetest.com
4) git push web +master:refs/heads/master
    Note: this pushes the master config and goodies and all that - you only have to type "git push web" for normal use

Note that if you get an error...tough!  Well actually, google the error.  It helps to google your host, git, and error message, such as "godaddy git git-receive-pack:command not found".  I apologize if you're using GoDaddy.  They don't have git installed, and are kind of a pain to get working.  However, I'm nice, and managed to run across this post when I tried that search: GoDaddy git-receive-pack error fix

5) Everything should be happy, but, there's only one way to be sure!
View your work at:  http://<yoursite.come>/websitetest.com.git/
For me, that's: http://www.sykohpath.com/websitetest.com.git/

Hey look at that...I'm Awesome.  Super Awesome.

Now, just to make sure, we have 2 "remotes" setup.  Simply type "git remote" to view all of them.  There should now be one for "origin" and one for "web".  Origin points to your repository on github, while web points to your website.  With this process, you should be able to setup a "dev" and "live" environment.  I'll explain that setup in a separate tutorial.  For now, be happy you can push to git and your website!

And finally from now on - after you commit your changes, all you have to type is "git push origin" or "git push web".

php, tutorial, git, github,



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:

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.


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,



Web Development From Scratch, Day 1

SO, you want to get started in web development, eh?  Sure, you can crap out an html page and slap on a "I DID THIS" on the bottom, but that won't even start to get you a job, anywhere, unless you want to get ripped off by people on craigslist ("will pay in stock!").

Long gone are the days of working in notepad, ftping each file, and then f5'ing your way to success.  We're in the future, now, so let's do things appropriate to modern times.

Objective: Really basic starter setup.  I'll be leaving out a ton of the "more advanced" (from a beginner perspective) elements, and just get things up and running as quickly as possible.  Note the date of this post.  This isn't necessarily a living document, so yeah, things will change.  Enough babble, let's go!

Hardest part is the setup.  Good thing is, you only have to do it once (more or less lol).  Follow this EXACTLY omg.

1) Chances are, you're working in Windows. Personally I work in Linux, but Windows is in the majority right now.
2) File Structure.  Do This.  Seriously:
3) Start -> Documents -> Create Folder: "Projects"
4) Go into that folder, and Create another one: "www.websitetest.com"

Sublime Text 2
1) Download Sublime Text 2
2) Install it, and run it.
3) Project->Add Folder to Project
4) Navigate to "Library -> Documents -> My Documents -> Projects".  Add that one, not the subfolder you just created.
5) Now, whenever you create a new folder in your Project folder, it will magically appear in your file browser in SublimeText2.
6) On the left side, you should see your "www.websitetest.com" folder.  Right-click on it, and select "New File".
7) Type in "I'm Awesome", then save it as "index.php"

1) Go to GitHub and create an account.
2) Go through Step 1.  This will install Git on your computer.
2a) Add your SSH Key: Account Settings -> SSH Keys
3) As tempting as it is to use Git Gui, I prefer Git Bash.  Since you're a noob and are afraid of words, we'll go through Git Gui for now.
4) Open Git Gui!
4a) Click on Help, "Show SSH Key"
4b) It's blank.  Or it shows something.  If it shows something, welp, back it up.  
4c) Click "Generate Key".
4d) Press "Enter" for a blank passphrase.  Again.
4e) "Copy To Clipboard"
4f) Back on GitHub.com, click "Add SSH Key"
4g) Title: Name it something like "<computer name> Windows 7 (blank)"
4h) Paste the key, then confirm.
5) Click back to your account, and click "Create Repository"
5a) Name: "websitetest.com"
5b) Set as Public, and check the box "Initialize README"
5c) When that's done, you'll see your little repo box.  Click it!
5d) Notice the contents "https://github.com/<username>/websitetest.com.git".  Remember this, since you'll be accessing it tomorrow in the form of: git@github.com/<username>/websitetest.com.git

aaand that's good enough for one day.  Yep, leaving you hanging here!  Tough.

php, tutorial, sublime text 2, git, github,