Split up Deploy to GitHub, highlight Optionalness

Author: SteveBarnett

sites/en/frontend/_consider_deploying_to_github.step

@@ -1,7 +1,7 @@
 div :class => "deploying" do
-  h1 "Deploying"
+  h1 "Optional Step: Deploying to GitHub"
   blockquote do
-    message "Before the next step, you could try deploying your page to GitHub! If you haven't used Git or GitHub before, you might prefer to do this later."
-    link 'deploying_to_github_pages'
+    message "Before the next step, you could try deploying (sending your code) your page to GitHub! If you haven't used Git or GitHub before, **it's okay to do this later**."
+    link 'deploying_to_github'
   end
 end

sites/en/frontend/_consider_deploying_to_github_again.step

@@ -0,0 +1,13 @@
+div :class => "deploying" do
+  h1 "Optional Step: Deploying to GitHub again"
+  blockquote do
+
+    message <<-MARKDOWN
+    Before the next step, you could try deploying your page to GitHub!
+
+    * If you have already deployed to GitHub, go on to [Deploying to GitHub again](deploying_to_github_again).
+    * If this is your first time deploying, start at [Deploying to GitHub](deploying_to_github)
+    MARKDOWN
+
+  end
+end

sites/en/frontend/_deploying_to_github.step

@@ -0,0 +1,60 @@
+goals do
+  goal "Create a new git repository locally"
+  goal "Create a new git repository on GitHub"
+  goal "Push your local repository to GitHub"
+end
+
+steps do
+  tip "If you have a 'railsbridge' folder on your computer or some other place you like to keep project files, `cd` to that directory and then follow the steps below."
+
+  step "Make a special new directory" do
+    message "To get started on the project, you'll need to open up your command line. If you have a Mac, open up the Terminal app. If you're on a PC, look for a program called Command Prompt. You'll also need to know your GitHub user name and password. Wherever you see `[your-github-user-name]`, you'll replace that with your user name (and delete the braces: the `[` and `]`)."
+    console "mkdir [your-github-user-name].github.io"
+    message "`mkdir` stands for 'make directory.' You just made a new directory that you'll put your project files in."
+  end
+
+  step "Initialize a new local git repository" do
+    console "cd [your-github-user-name].github.io"
+    message "You just changed directories and moved into the folder you just created."
+    console "git init"
+    message "You just initialized an empty repository, i.e. told git, 'I want to start a new project here.'"
+  end
+
+  step "Make a commit" do
+    console "touch index.html\ngit add index.html"
+    message "This creates a blank, new file called 'index.html'. The next line tells git you want to stage the file."
+    console "git commit -m 'first commit'"
+    message "You just made an initial commit. (Think of it as a snapshot of your project that you can come back to later.)"
+  end
+
+  step "Add GitHub as a remote" do
+    message "You really do have to type your user name three times in the next command. Get ready for it."
+    console "git remote add origin https://[your-github-user-name]@github.com/[your-github-user-name]/[your-github-user-name].github.io.git"
+
+    message "You just set up a 'remote' — a git repository somewhere else (in this case, on GitHub) that also holds your project files."
+  end
+
+  step "Create a new repo via the GitHub UI" do
+    tip "You can skip this step if you've created a ***[your-github-user-name].github.io*** page previously."
+    message "Navigate to https://github.com/[your-github-user-name]/"
+    message "Click 'Create a new repo' in the upper right"
+    img :src => "img/github_create_repo.png"
+    message "Type **[your-github-user-name].github.io** into the 'Repository name' box"
+    img :src => "img/github_name_your_repo.png"
+
+    important "Do not choose 'Initialize this repository with a README' when creating the repo."
+  end
+
+  step "Push your code to GitHub" do
+    message "Now, push the new file you just committed to GitHub."
+    console 'git push -u origin master'
+    message "You'll probably be prompted to type your GitHub password at this point. After you do, you'll have just pushed your project to GitHub's servers!"
+    important "If you have existing content in your GitHub Pages repo, this command will fail, and you will have to do a `git push -uf origin master` instead. Verify with a volunteer first that you're doing the right thing."
+  end
+
+  step do
+    message "Woohoo!!! Take a breath and wait a few minutes."
+    message "Since you gave your GitHub repository a special name (in the format [your-github-user-name].github.io), GitHub will automatically take the contents of this one repository and make them your personal web page on GitHub. However, there's a small lag between the first push and being able to see your content on the web."
+    message "In a few minutes time, when you visit [your-github-user-name].github.io in a browser, you should see a blank white page: this is great! You're looking at the index.html file you just created, now live on the web!"
+  end
+end

sites/en/frontend/_deploying_to_github_again.step

@@ -0,0 +1,69 @@
+goals do
+  goal "Commit your changes to locally"
+  goal "Push your changes to GitHub"
+end
+
+step "Commit any pending changes to git" do
+  message "GitHub will only receive the files we've committed into our local git repository. So we need to make sure all changed files have been committed."
+  console "git status"
+  message "`git status` shows you any pending changes you've created. If it has no output, you're already ready to deploy! Otherwise..."
+
+  console <<-SHELL
+git add .
+git commit -m "Some helpful message for your future self"
+  SHELL
+  message "Your commit message should reference whatever your outstanding changes are: something like 'added new cat picture'."
+end
+
+step "Push changes to GitHub" do
+  console "git push origin master"
+  message "This takes all changes you've committed locally and pushes them to GitHub."
+end
+
+step "Visit your site" do
+  message "Go to your browser and navigate to **[your-github-user-name].github.io**"
+  message "You should see the changes you made, but ON THE INTERNET!"
+end
+
+
+explanation do
+  message <<-MARKDOWN
+
+## What is Git?
+
+Git is an open-source tool for tracking and managing changes to source code. If you've
+used tools like SVN or CVS, you can use Git to do the same things.
+
+Git is not required for front end development at all &mdash; some people use other source
+control tools like SVN, and there are wild and crazy coders who don't use source control
+at all.
+
+### But here are some good reasons to use a source control system:
+
+* You can commit different/earlier versions of a project, and get them back
+  later if you change your mind.
+* It's easy to also copy these versions to another server or computer, so you
+  have a backup if your laptop is stolen or your hard drive gets damaged.
+* Other coders can more easily work on a project with you. Source control
+  systems have an automated way to 'merge' or combine changed files together.
+
+### And there are some neat things about Git specifically:
+
+* Git is distributed. Each person or computer working on the project has a full
+  copy of it. There isn't a remote server you have to connect to that has the
+  'official' copy somewhere.
+* Git makes it easy to 'branch' or work separately for a while on an alternate
+  version of the project, and then 'merge' those changes back in if you want to.
+* Git is ultra-powerful, and even many experienced developers are mystified
+  by its wily ways.
+
+## What is GitHub?
+
+GitHub is a web application that will store copies of your git repositories for you.
+It's a convenient place to keep a backup of your projects, and it has a nice-looking
+web interface that makes it easy to see your files and changes.
+
+Projects that you make public (i.e. open source) can be stored on GitHub for free.
+
+  MARKDOWN
+end

sites/en/frontend/add_more_elements.step

@@ -60,6 +60,6 @@ Now that you know the basics of working with HTML, the trickiest part is remembe
   MARKDOWN
 end
 
-insert 'consider_deploying_to_github'
+insert 'consider_deploying_to_github_again'
 
 next_step 'make_columns'

sites/en/frontend/deploying_to_github.step

@@ -0,0 +1,9 @@
+h2 do
+  span "If you have already deployed your app to GitHub, go on to "
+  a 'Deploying to GitHub again', href: "deploying_to_github_pages_again"
+  span "."
+end
+
+important "If you have any problems with these steps, ask a volunteer for help. If you don't know if you have Git installed or have a GitHub account, it's okay to do these steps later instead."
+
+insert '_deploying_to_github'

sites/en/frontend/deploying_to_github_again.step

@@ -0,0 +1,11 @@
+h2 do
+  span "If you haven't deployed your app to GitHub yet, start at "
+  a 'Deploying to GitHub', href: 'deploying_to_github_pages'
+  span "."
+end
+
+important "If you have any problems with these steps, ask a volunteer for help. If you don't know if you have Git installed or have a GitHub account, it's okay to do these steps later instead."
+
+insert '_deploying_to_github'
+
+insert '_deploying_to_github_again'

sites/en/frontend/deploying_to_github_pages.step

@@ -44,6 +44,6 @@ it. Here are two different designers' interpretations of the same HTML:
   MARKDOWN
 end
 
-insert 'consider_deploying_to_github'
+insert 'consider_deploying_to_github_again'
 
 next_step "basic_javascript"